实验内容：

设计并实现班级同学录数据库和信息查询模块，数据库中保存学生学号、姓名、班级、性别、兴趣爱好、电话、电子邮件、QQ号等信息，能够根据按姓名、按班级、按姓名和班级三种方式查询学生信息。设计并实现班级同学录数据库和信息录入模块，能够将学生学号、姓名、班级、性别、兴趣爱好、电话、电子邮件、QQ号等信息录入数据库。

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

1. 首先创建js文件，在项目目录下安装Express框架。

npm install express --save

2.安装mysql数据库驱动，在命令窗口使用以下命令进行安装：

npm install mysql

3.然后将网页文件和图片、样式表等资源文件均放置在项目文件夹下的public目录中。在代码中导入express模块，将public目录设置为静态文件目录。在此基础上补充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: 'zldatabase'
});
//连接数据库
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 stulist'；
	//查询完成后执行回调函数function(error, results, fields)对查询结果进行处理；
	//其中查询结果保存在参数results中，如果查询无差错，则通过响应对象res的send方法将结果以JSON数据格式返回给浏览器。此处需要前端根据JSON数据格式来处理。
	connection.query('SELECT * from stulist', function(error, results, fields) {
		if (error) throw error;
		res.send(results);
	});

});

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

app.get('/list1', function(req, res) {
	//此处可以用请求对象req的query.class1属性获取用户请求中class1参数的值
	var class1=req.query.class1;
	//用获取到的参数值class1构造完整的sql查询语句
	connection.query('SELECT * from stulist where class= "'+class1+'"', function(error, results, fields) {
		if (error) throw error;
		res.send(results);
	});
});

app.get('/list2', function(req, res) {
	var name2=req.query.name2;
	var class2=req.query.class2;
	connection.query('SELECT * from stulist where name= "'+name2+'" and class= "'+class2+'"', function(error, results, fields) {
		if (error) throw error;
		res.send(results);
	});
});

app.get('/list3', function(req, res) {
	var id1 =req.query.id3;
	var name1=req.query.name3;
	var class1=req.query.class3;
	var gender1=req.query.gender3;
	var interest1=req.query.interest3;
	var telephone1=req.query.telephone3;
	var email1=req.query.email3;
	var QQ1=req.query.QQ3;
	connection.query('INSERT INTO stulist(id,name,class,gender,interest,telephone,email,QQ)VALUES ("'+id1+'","'+name1+'","'+class1+'","'+gender1+'","'+interest1+'","'+telephone1+'","'+email1+'","'+QQ1+'")', 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  ，观察返回的JSON数据结果。在前端界面中，创建button按钮，设置每个查询的端口。代码如下：

<!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.id);
					$("#box").append(p1);
					var p2=$("<p></p>").text("姓名："+record.name);
					$("#box").append(p2);
					var p3=$("<p></p>").text("班级："+record.class);
					$("#box").append(p3);
					var p4=$("<p></p>").text("性别："+record.gender);
					$("#box").append(p4);
					var p5=$("<p></p>").text("兴趣爱好："+record.interest);
					$("#box").append(p5);
					var p6=$("<p></p>").text("电话："+record.telephone);
					$("#box").append(p6);
					var p7=$("<p></p>").text("email："+record.email);
					$("#box").append(p7);
					var p8=$("<p></p>").text("QQ："+record.QQ);
					$("#box").append(p8);
					$("#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 name1 = $("#name1").val();
					$.get(
					"http://127.0.0.1:8000/list",
					{
						name1:name1
					},
					function(data){
						for(var i=0;i<data.length;i++){
							console.log(data[i]);
							show(data[i]);
						}
					});
				});	
				//单击查询按钮后，根据用户在文本框中输入的班级查询数据库中的特定记录
				$("#list1").click(function(){
					$("#box").empty();
				    var class1 = $("#class1").val();
					$.get(
					"http://127.0.0.1:8000/list1",
					{
						class1:class1
					},
					function(data){
						for(var i=0;i<data.length;i++){
							console.log(data[i]);
							show(data[i]);
						}
					});
				});	
				//单击查询按钮后，根据用户在文本框中输入的姓名和班级查询数据库中的特定记录
				$("#list2").click(function(){
					$("#box").empty();
					 var name2 = $("#name2").val();
				    var class2 = $("#class2").val();
					$.get(
					"http://127.0.0.1:8000/list2",
					{
						name2:name2,
						class2:class2
					},
					function(data){
						for(var i=0;i<data.length;i++){
							console.log(data[i]);
							show(data[i]);
						}
					});
				});	
				//单击查询按钮后，根据用户在文本框中输入的姓名等信息录入到数据库中
				$("#list3").click(function(){
					$("#box").empty();
					var id3 = $("#id3").val();
				    var name3 = $("#name3").val();
					var class3 = $("#class3").val();
					var gender3 = $("#gender3").val();
					var interest3 = $("#interest3").val();
					var telephone3 = $("#telephone3").val();
					var email3 = $("#email3").val();
					var QQ3 = $("#QQ3").val();
					$.get(
					"http://127.0.0.1:8000/list3",
					{
						id3:id3,
						name3:name3,
						class3:class3,
						gender3:gender3,
						interest3:interest3,
						telephone3:telephone3,
						email3:email3,
						QQ3:QQ3
						
					},
					function(data){
						
							console.log(data);
							
						
					});
				});	
			});
		</script>
	</head>
	<body>
		<p>姓名: <input type="text" id="name1" value=""></p>
		<button id="list">查询</button>
		<button id="all">查询全部</button>
		<p>班级: <input type="text" id="class1" value=""></p>
		<button id="list1">查询</button>
		<p>姓名: <input type="text" id="name2" value=""></p>
		<p>班级: <input type="text" id="class2" value=""></p>
		<button id="list2">查询</button>
		<p>id: <input type="text" id="id3" value=""></p>
		<p>姓名: <input type="text" id="name3" value=""></p>
		<p>班级: <input type="text" id="class3" value=""></p>
		<p>性别: <input type="text" id="gender3" value=""></p>
		<p>兴趣爱好: <input type="text" id="interest3" value=""></p>
		<p>电话: <input type="text" id="telephone3" value=""></p>
		<p>email: <input type="text" id="email3" value=""></p>
		<p>QQ: <input type="text" id="QQ3" value=""></p>
		<button id="list3">录入</button>
		<div id="box">

		</div>

	</body>
</html>

三、Web目录结构

nodejs数据类型与mysql数据类型对照 nodejs如何实现数据库_node.js

四、数据库设计

nodejs数据类型与mysql数据类型对照 nodejs如何实现数据库_javascript_02

五、 程序运行结果

  • 按照姓名查询

            

nodejs数据类型与mysql数据类型对照 nodejs如何实现数据库_前端_03

nodejs数据类型与mysql数据类型对照 nodejs如何实现数据库_html_04

  • 按照班级查询

nodejs数据类型与mysql数据类型对照 nodejs如何实现数据库_node.js_05

nodejs数据类型与mysql数据类型对照 nodejs如何实现数据库_html_06

  •  根据姓名和班级查询

nodejs数据类型与mysql数据类型对照 nodejs如何实现数据库_node.js_07

nodejs数据类型与mysql数据类型对照 nodejs如何实现数据库_html_08

  • 查询全部

nodejs数据类型与mysql数据类型对照 nodejs如何实现数据库_html_09

 

nodejs数据类型与mysql数据类型对照 nodejs如何实现数据库_前端_10

nodejs数据类型与mysql数据类型对照 nodejs如何实现数据库_html_11

  •  信息录入

 

nodejs数据类型与mysql数据类型对照 nodejs如何实现数据库_ajax_12

 

nodejs数据类型与mysql数据类型对照 nodejs如何实现数据库_前端_13