nodeJS中express框架和mysql简单的连接demo
本次文章的案例，是基于nodejs和MySQL写的，所以需要电脑中已经提前安装了这两个包。
demo主要实现效果，将数据库里的内容显示在页面上，并且可以往里面添加内容。文章附有源码，可以直接查看。源代码
-
先创建一个文件夹，我命名为project，找到你所在的文件夹的目录，并且复制下来。打开cmd
以上是准备工作，现在开始哈嘻嘻嘻 -
在你创建的project下安装express并且初始化创建package.json，命令为npm install express 安装完毕后，再执行命令npm init
安装成功后，project中就会多了如下内容
-
我用的是sublime，打开并且创建文件夹views文件夹，写html助于显示数据库的内容。index.html放在views文件夹里面
<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文件
<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>
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 = $(""+mes.sname+" "+mes.sage+" "+mes.tel+" "+mes.addr+" ");
$("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);
});
});
}
最终点击index的超链接查看所有信息，就可以看到咱们数据库中添加的所有的信息啦
到这里，这个小的demo就已经完成了，写的不好，还希望大家见谅。给出整个project包，可以下载下来参考下