Nodejs Web数据库应用演示实例

flyroc08

已于 2024-10-20 23:39:17 修改

阅读量440

点赞数

文章标签： node.js web javascript 数据库

于 2023-10-19 17:05:56 首次发布

本文链接：https://blog.youkuaiyun.com/flyroc08/article/details/133927362

版权

Nodejs Web应用基础演示实例

Web数据库应用

一、服务器端

var express = require('express');
var app = express();
var mysql = require('mysql');

//设置静态资源目录public
app.use(express.static(__dirname + '/public'));

//创建mysql数据库访问连接（数据库主机地址，用户名和密码，数据库名称根据情况自行修改）
var connection = mysql.createConnection({
	host: 'localhost',
	user: 'root',
	password: '123456',
	database: 'test'
});

connection.connect();

//允许跨域访问，可以从不同主机进行调用
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); //让options请求快速返回
  }
  else {
    next();
  }
});

//查询全部记录的API
app.get('/all', function(req, res) {

	connection.query('SELECT * from stu', function(error, results, fields) {
		if (error) throw error;
		res.send(results);
	});

});

//按用户名进行查询的API
//前端发来的用户请求应该为“主机名:端口号/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) {
		if (error) throw error;
		res.send(results);
	});

});

//用户注册API
//前端发来的请求应该为“主机名:端口号/add?username=***&pwd=***&name=***&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);
	
	if(username==''){
		res.send({success:0, insertid:0, msg:'用户名不能为空'});
		return;
	}
	//查询是否存在同名用户
	connection.query('SELECT * from stu where username= "'+username+'"', function(error, results, fields) {
		//查询出错则返回
		if (error){
			console.log('[QUERY ERROR] - ',err.message);
			res.send({success:0, insertid:0, msg:'操作异常'});
			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:'操作异常'});
			         return;
			        }        
			 
			       console.log('--------------------------INSERT----------------------------');
			       console.log('INSERT ID:',result.insertId);        
			       console.log('-----------------------------------------------------------------\n\n');  
				   res.send({success:1, insertid:result.insertId, msg:'操作成功'});
			});
		}
		else{
			res.send({success:0, insertid:0, msg:'用户名已存在，请重新注册！'});
		}
	});

});

var server = app.listen(8080, 'localhost',function() {
	var host = server.address().address;
	var port = server.address().port;

	console.log("应用实例，访问地址为 http://%s:%s", host, port);

})

二、前端

1. 用户查询页面

<html>
	<head>
		<meta charset="utf-8">
		<title>根据用户请求查询后台数据库记录</title>
		<!--解决node提示favicon.ico图标文件不存在的问题-->
		<link rel="shortcut icon" href="#" />

		<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
		</script>
		<script>
			$(document).ready(function() {
				
				//在前端页面容器中添加查询到的记录数据
				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("姓名："+record.name);
					$("#box").append(p1);					
					var p2=$("<p class='data'></p>").text("年龄："+record.age);
					$("#box").append(p2);
					var p3=$("<p class='data'></p>").text("用户名："+record.username);
					$("#box").append(p3);
					$("#box").append("<hr>");
				};
				
				//查询数据库全部记录
				$("#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]);
						}
					});
				});
				
				//根据用户输入的用户名查询数据库中的特定记录								
				$("#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]);
						}
					});
				});
								
				$(".data").click(function(){
					$("#username").val($(this).text());
				});
			});
		</script>
	</head>
	<body>
		<p>用户名: <input type="text" id="username" value=""></p>
		<button id="list">查询</button>
		<button id="all">查询全部</button>
		<div id="box">

		</div>

	</body>
</html>

2. 用户注册页面

<html>
<head>
  <title>MySQL添加记录实例</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="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script>
  <link rel="shortcut icon" href="#" />
  
  <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
  </script>
  <script>
  	$(document).ready(function() {
  		//清空输入框内容
  		$("#clear").click(function(){
  			$("#username").val("");
  			$("#pwd").val("");
  			$("#name").val("");
  			$("#age").val("");
  		});
		 
  		//根据用户输入的用户名查询数据库中的特定记录								
  		$("#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);
  			});
  		});				
  	});
	

  </script>
</head>
<body>

<div class="container mt-3">
  <h2>注册用户</h2>

	  <div class="mb-3 mt-3">
		<label for="username" class="form-label">用户名:</label>
		<input type="text" class="form-control" id="username" placeholder="输入用户名字母数字组合" name="username">
	  </div>
	  <div class="mb-3">
		<label for="pwd" class="form-label">口令:</label>
		<input type="password" class="form-control" id="pwd" placeholder="输入口令字母数字组合" name="pwd">
	  </div>
	  <div class="mb-3">
		<label for="name" class="form-label">姓名：</label>
		  <input class="form-control" type="text" id="name" name="name"> 
	  </div>
	  <div class="mb-3">
	  		<label for="age" class="form-label">年龄：</label>
	  		  <input class="form-control" type="text" id="age" name="age"> 
	  </div>
	  <button id="add" class="btn btn-primary">提交</button>
	  <button id="clear" class="btn btn-primary">清除</button>

	<div id="box">
	
	</div>
</div>

</body>
</html>