nodeJS中express框架和mysql简单的连接demo_nodejs + express + mysql demo-CSDN博客

本文链接：https://blog.csdn.net/weixin_43227172/article/details/83866765

本次文章的案例，是基于nodejs和MySQL写的，所以需要电脑中已经提前安装了这两个包。
demo主要实现效果，将数据库里的内容显示在页面上，并且可以往里面添加内容。文章附有源码，可以直接查看。源代码

先创建一个文件夹，我命名为project，找到你所在的文件夹的目录，并且复制下来。打开cmd

以上是准备工作，现在开始哈嘻嘻嘻
在你创建的project下安装express并且初始化创建package.json，命令为npm install express 安装完毕后，再执行命令npm init
安装成功后，project中就会多了如下内容
我用的是sublime，打开并且创建文件夹views文件夹，写html助于显示数据库的内容。index.html放在views文件夹里面

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>员工登记</title>
</head>
<body>
	<form action="/saveData" method="post">
		<p>姓名：<input type="text" name="userName"></p>
		<p>年龄：<input type="text" name="age"></p>
		<p>电话：<input type="text" name="telphone"></p>
		<p>地址：<input type="text" name="address"></p>
		<p><input type="submit"></p>
	</form>
	<a href="mess.html">查看所有登记员工信息</a>
</body>
</html>

打开mysql，新建数据库，和表

设计表的各个变量，如上图所示。表名保存为staffInfo
在project中新建个文件夹db以及文件DBConfig.js，内容如下

module.exports={
	mysql:{
		host:'127.0.0.1', //主机名，本地都是这个
		user:'root',//用户名，这个也是默认的
		password:'123456',//密码,这个需要看你数据库安装时候设置的密码是多少
		database:'staff',//数据库名，和咱们创建的数据库一样
		port:3306  //端口号（默认都是3306）
	}
}

大家可以看下咱们现在的文件夹和文件的等级，避免出错。
在这里插入图片描述

下一步，需要在cmd中安装mysql啦。写的可能有点啰嗦–避免啰嗦，现在可以将下面需要使用到的包，大家现在就一并装上。需要识别咱们的html页面，所以需要安装ejs，命令为npm install ejs。再输入命令npm install body-parser，这个模块主要便于我们利用post请求得到我们需要的内容。
下面就是正式进入编写js的阶段，先在project下新建app.js，因为分离的原则，再创建一个router.js。专门写咱们的路由的函数内容
app.js中所需要引入的模块，以及设置的端口号，大家可以直接看下代码

//引入express模块
var express = require("express");
var app = express();
var router = require("./router.js");
//引入body-parser模块
var bodyParser = require("body-parser");
app.use(bodyParser.urlencoded({extended:false}));

var ejs = require("ejs");
//让express框架能够识别html的模板
app.set("view engine","html");
//设置模板存放的位置
app.set("views",__dirname+"/views");
//在编译的时候将html模板转换成ejs，这个就不用把每个html文件的后缀名改成.ejs了，比较方便
app.engine("html",ejs.__express);

/*等下咱们需要加代码的位置！！！！！！*/

//托管views文件夹下的静态页面，注意，这个代码建议写在设置端口号的前面一行，因为避免后面直接加载静态页面，而不先发送请求带来的潜在问题
app.use(express.static("./views"));
//设置端口号为9999
app.listen(9999);

写到这，就可以到浏览器中输入http://127.0.0.1:9999，就可以出现我们的index.html页面，服务器已经创建好了。
也可以写get请求到index页面
app.js代码添加

//首页
app.get("/",router.toIndex);

router.js中添加

module.exports={
	toIndex:function(req,res){
		res.render("index");
	}
}

下面就可以输入信息，点击提交，内容就可以加到数据库中了
在index.html中添加一行代码，用于显示登记成功

<div><%=msg%></div>

app.js中添加代码

//点击提交
app.post("/saveData",router.saveDataFn);

向数据库添加内容的router.js代码如下

//引入mysql模块  
var mysql = require("mysql");
//引入自己配置的模块  
var dbconfig = require("./db/DBConfig.js");
//创建mysql数据的连接池对象
var pool = mysql.createPool(dbconfig.mysql);
module.exports={
	toIndex:function(req,res){
		res.render("index",{
			msg:""
		});
	},
	saveDataFn:function(req,res){
		pool.getConnection(function(err,connection){
			// 此处就写在数据中查询的语句，？表示占位的意思，第二个参数就写？对应的值
			connection.query("insert into staffInfo(sname,sage,tel,addr) values(?,?,?,?)",[req.body.userName,req.body.age,req.body.telphone,req.body.address],function(err,result){
				if(err){
					throw err;
				}
				//成功
				res.render("index",{
					msg:"登记成功"
				});
			});
		});
	}
}

此时在网页中输入数据，点击提交后，在这里插入图片描述
打开我们数据库中的表
提交几次数据，过来表的页面右击刷新，就可以看到新增的内容，也可以直接在表中直接添加数据！

下面就把提交到数据库中的内容在页面上显示出来
需要在views文件夹中添加mess.html文件

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>所有信息</title>
	<link rel="stylesheet" href="css/mess.css">
</head>
<body>
	<table cellspacing="0" >
		<tr>
			<th>姓名</th>
			<th>年龄</th>
			<th>电话</th>
			<th>地址</th>
		</tr>
		<!-- <tr>
			<td>小明</td>
			<td>22</td>
			<td>13178906789</td>
			<td>南京</td>
		</tr> -->
	</table>
</body>
<script src="js/jquery-1.12.4.js"></script>
<script>
//用于接收/getAll接收到数据，并把它填写到html页面中
	$.ajax({
		url:"http://127.0.0.1:9999/getAll",
		type:"get",
		success:function(data){
			//console.log(data);//搞不清楚数据是什么的话，可以console.log看下，就明白了
			for(var mes of data){
				var tr = $("<tr></tr>");
				tr.html("<td>"+mes.sname+"</td><td>"+mes.sage+"</td><td>"+mes.tel+"</td><td>"+mes.addr+"</td>");
				$("table").append(tr);
			}
		}
	})
</script>
</html>

app.js中添加代码get请求

//查看信息
app.get("/getAll",router.getAllFn);

最后在router.js中编写函数内容

getAllFn:function(req,res){
		pool.getConnection(function(err,connection){
			connection.query("select * from staffInfo",function(err,result){
				if(err){
					throw err;
				}
				//发送数据
				res.send(result);
			});
		});
	}