Nodejs Web application basic demonstration example
Web database application
1. Server side
var express = require('express');
var app = express();
var mysql = require('mysql');
//Set the static resource directory public
app.use(express.static(__dirname + '/public'));
//Create mysql database access connection (database host address, user name and password, database name can be modified according to the situation)
var connection = mysql.createConnection({<!-- -->
host: 'localhost',
user: 'root',
password: '123456',
database: 'test'
});
connection.connect();
//Allow cross-domain access and can be called from different hosts
app.all('*',function (req, res, next) {<!-- -->
res.header('Access-Control-Allow-Origin', '*');
res.header('Access-Control-Allow-Headers', 'Accept,Content-Type,Content-Length, Authorization,X-Requested-With ');
res.header('Access-Control-Allow-Methods', 'POST,GET,PUT,DELETE,OPTIONS');
if ('OPTIONS' == req.method) {<!-- -->
res.send(200); //Let options request return quickly
}
else {<!-- -->
next();
}
});
//Query API for all records
app.get('/all', function(req, res) {<!-- -->
connection.query('SELECT * from stu', function(error, results, fields) {<!-- -->
if (error) throw error;
res.send(results);
});
});
//API for querying by user name
//The user request sent from the front end should be "hostname:port number/list?username=***"
app.get('/list', function(req, res) {<!-- -->
var username=req.query.username;
connection.query('SELECT * from stu where username= "' + username + '"', function(error, results, fields) {<!-- -->
//var list = '';
if (error) throw error;
//console.log('The solution is: ', results);
//list = JSON.stringify(results);
//res.send(list);
res.send(results);
});
});
//User registration API
//The request sent from the front end should be "host name:port number/add?username=*** & amp;pwd=*** & amp;name=*** & amp;age=*** "
app.get('/add', function(req, res) {<!-- -->
var username=req.query.username.trim();
var pwd=req.query.pwd;
var name=req.query.name;
var age=parseInt(req.query.age);
\t
if(username==''){<!-- -->
res.send({<!-- -->success:0, insertid:0, msg:'Username cannot be empty'});
return;
}
//Query whether there is a user with the same name
connection.query('SELECT * from stu where username= "' + username + '"', function(error, results, fields) {<!-- -->
//Return if query error occurs
if (error){<!-- -->
console.log('[QUERY ERROR] - ',err.message);
res.send({<!-- -->success:0, insertid:0, msg:'Operation exception'});
return;
}
//
if (results.length==0){<!-- -->
var addSql='INSERT INTO stu(username,pwd,name,age) VALUES(?,?,?,?)';
var addSqlParams = [username, pwd, name, age];
connection.query(addSql,addSqlParams,function (err, result) {<!-- -->
if(err){<!-- -->
console.log('[INSERT ERROR] - ',err.message);
res.send({<!-- -->success:0, insertid:0, msg:'Operation exception'});
return;
}
\t\t\t
console.log('--------------------------------INSERT----------------- ----------');
console.log('INSERT ID:',result.insertId);
console.log('---------------------------------------------- ---------------------\\
\\
');
res.send({<!-- -->success:1, insertid:result.insertId, msg:'Operation successful'});
});
}
else{<!-- -->
res.send({<!-- -->success:0, insertid:0, msg:'The username already exists, please register again!'});
}
});
});
var server = app.listen(8080, 'localhost',function() {<!-- -->
var host = server.address().address;
var port = server.address().port;
console.log("Application instance, access address is http://%s:%s", host, port);
})
2. Front-end
1. User query page
<html>
<head>
<meta charset="utf-8">
<title>Query background database records based on user request</title>
<!--Solve the problem that node prompts that the favicon.ico icon file does not exist -->
<link rel="shortcut icon" href="#" />
<script src="//i2.wp.com/cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function() {<!-- -->
\t\t\t\t
//Add the queried record data in the front-end page container
function show(record){<!-- -->
var p0=$("<p class='data'></p>").html("ID: <span>" + record.id + "</span>");
$("#box").append(p0);
var p1=$("<p class='data'></p>").text("Name:" + record.name);
$("#box").append(p1);
var p2=$("<p class='data'></p>").text("Age:" + record.age);
$("#box").append(p2);
var p3=$("<p class='data'></p>").text("Username:" + record.username);
$("#box").append(p3);
$("#box").append("");
};
\t\t\t\t
//Query all records in the database
$("#all").click(function(){<!-- -->
$("#box").empty();
$.get(
"http://127.0.0.1:8080/all",
function(data){<!-- -->
//var records=JSON.parse(data);
for(var i=0;i<data.length;i + + ){<!-- -->
console.log(data[i]);
show(data[i]);
}
});
});
\t\t\t\t
//Query specific records in the database based on the username entered by the user
$("#list").click(function(){<!-- -->
$("#box").empty();
var username = $("#username").val();
$.get(
"http://127.0.0.1:8080/list",
{<!-- -->
username:username
},
function(data){<!-- -->
for(var i=0;i<data.length;i + + ){<!-- -->
console.log(data[i]);
show(data[i]);
}
});
});
\t\t\t\t\t\t\t\t
$(".data").click(function(){<!-- -->
$("#username").val($(this).text());
});
});
</script>
</head>
<body>
<p>Username: <input type="text" id="username" value=""></p>
<button id="list">Query</button>
<button id="all">Query all</button>
<div id="box">
</div>
</body>
</html>
2. User registration page
<html>
<head>
<title>MySQL adds record instance</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/css/bootstrap.min.css" rel="stylesheet">
<script src="//i2.wp.com/cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script>
<link rel="shortcut icon" href="#" />
<script src="//i2.wp.com/cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function() {<!-- -->
//Clear the content of the input box
$("#clear").click(function(){<!-- -->
$("#username").val("");
$("#pwd").val("");
$("#name").val("");
$("#age").val("");
});
\t\t
//Query specific records in the database based on the username entered by the user
$("#add").click(function(){<!-- -->
var username = $("#username").val();
var pwd = $("#pwd").val();
var name = $("#name").val();
var age = parseInt($("#age").val());
$.get(
"http://127.0.0.1:8080/add",
{<!-- -->
username:username,
pwd:pwd,
name:name,
age:age
},
function(data){<!-- -->
$("#box").text(data.msg);
});
});
});
\t
</script>
</head>
<body>
<div class="container mt-3">
<h2>Registered user</h2>
<div class="mb-3 mt-3">
<label for="username" class="form-label">Username:</label>
<input type="text" class="form-control" id="username" placeholder="Enter the username alphanumeric combination" name="username">
</div>
<div class="mb-3">
<label for="pwd" class="form-label">Password:</label>
<input type="password" class="form-control" id="pwd" placeholder="Input password alphanumeric combination" name="pwd">
</div>
<div class="mb-3">
<label for="name" class="form-label">Name:</label>
<input class="form-control" type="text" id="name" name="name">
</div>
<div class="mb-3">
<label for="age" class="form-label">Age:</label>
<input class="form-control" type="text" id="age" name="age">
</div>
<button id="add" class="btn btn-primary">Submit</button>
<button id="clear" class="btn btn-primary">Clear</button>
<div id="box">
\t
</div>
</div>
</body>
</html>