Nodejs Web应用基础开发实例（五）-MySQL数据库

flyroc08

已于 2023-10-19 14:59:28 修改

阅读量804

点赞数

分类专栏：后端开发技术文章标签：数据库 mysql node.js javascript

于 2022-10-07 00:12:33 首次发布

本文链接：https://blog.csdn.net/flyroc08/article/details/127189411

版权

后端开发技术专栏收录该内容

6 篇文章 0 订阅

订阅专栏

Nodejs Web应用基础开发实例（五）-MySQL数据库

循序渐进地通过几个实例展示如何通过Nodejs实现Web数据库应用的开发：

实例五：访问MySQL数据库-查询

实例四实现了一个可以访问静态页面的Web站点，本实例在此基础上增加数据库访问的功能，可以向前端用户提供查询数据库的API，用于开发Web数据库应用。
首先要安装mysql数据库驱动，在命令窗口使用以下命令进行安装：

npm install mysql

一、在服务端建立Web服务器和数据库访问API

创建js文件并参考实例四实现Web服务器，在此基础上补充mysql数据库查询的代码，如下：

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();

//允许跨域访问，可以从不同主机调用API
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为“/all”；回调函数 function(req, res)处理用户请求并响应
app.get('/all', function(req, res) {
	//采用数据库连接对象的query方法执行sql语句'SELECT * from stu'；
	//查询完成后执行回调函数function(error, results, fields)对查询结果进行处理；
	//其中查询结果保存在参数results中，如果查询无差错，则通过响应对象res的send方法将结果以JSON数据格式返回给浏览器。此处需要前端根据JSON数据格式来处理。
	connection.query('SELECT * from stu', function(error, results, fields) {
		if (error) throw error;
		res.send(results);
	});

});

//根据用户请求中的参数查询特定用户名的记录，定义API为“/list”，参数为name（参数名可以根据自身情况定义），
//前端发来的用户请求应该为“主机名:端口号/list?name=*** ”，
app.get('/list', function(req, res) {
	//此处可以用请求对象req的query.username属性获取用户请求中username参数的值
	var username=req.query.username;
	//用获取到的参数值name构造完整的sql查询语句
	connection.query('SELECT * from stu where username= "'+username+'"', function(error, results, fields) {
		if (error) throw error;
		res.send(results);
	});
});

var server = app.listen(8000, 'localhost',function() {
	var host = server.address().address;
	var port = server.address().port;
	console.log("应用实例，访问地址为 http://%s:%s", host, port);
})

二、编写前端HTML页面代码，调用API访问数据库

在此之前可以先在浏览器地址栏中输入API的URL，测试一下访问结果。例如输入：http://127.0.0.1:8000/all 或者 http://127.0.0.1:8000/list?name=zhou ，观察返回的JSON数据结果。
然后可以新建一个HTML文件，写入如下代码：

<!DOCTYPE html>
<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() {
				
				//在前端页面容器中添加查询到的记录record
				function show(record){
					var p1=$("<p></p>").text("姓名："+record.name);
					$("#box").append(p1);
					var p2=$("<p></p>").text("年龄："+record.age);
					$("#box").append(p2);
					$("#box").append("<hr>");
				};
				
			//单击查询全部按钮后，通过JQuery Ajax访问查询全部记录API
				$("#all").click(function(){
					$("#box").empty();
					$.get(
					"http://127.0.0.1:8000/all",
					function(data){		//回调函数，处理查询结果data，逐条调用show函数在前端显示
						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]);
						}
					});
				});				
			});
		</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>