node.js+express+mysql实现简单的增删改查功能详细解析,如下:
准备工作:
安装express项目生成器:npm install express-generator -g
检查是否安装成功:
查看express版本:express --version
创建一个project文件夹,在project目录下生成项目:
生成名为test的项目:express -e test
打开test目录
安装必要模块:npm install
安装mysql:npm install mysql
安装重要模块,之后会用到:
npm install --save art-template
npm install --save express-art-template
生成后的项目如下图所示:
修改app.js文件中的视图引擎为html:
将以上代码修改为以下代码:
// view engine setup
app.set('views', path.join(__dirname, 'views'));
//设置html引擎,使用express-art-template渲染后缀为html的模板,这个很重要!
app.engine('html', require('express-art-template'));
//设置视图引擎
app.set('view engine', 'html');
把views文件夹中的.ejs文件修改为.html文件,如下图所示:
设计数据库:
建立名为test的数据库,创建名为userinfo的表,在表中创建id,name,age字段,其中id为主键。如下图所示:
在routes文件夹中创建db.js文件,作为数据库连接池:
//创建数据库连接池,连接mysql
var mysql = require('mysql');
var pool = mysql.createPool({
host: 'localhost',
user: 'root',
password: '123456',
database: 'test'
});
function query(sql, callback) {
//得到连接
pool.getConnection(function (err, connection) {
//使用连接
connection.query(sql, function (err, rows) {
callback(err, rows);
//释放连接
connection.release();
});
});
}
exports.query = query;
修改views文件夹中index.html文件,改成以下代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>{ {title}}</title>
</head>
<body>
<!--设置行动地址-->
<form action="/search" method="post">
<!--使搜索框内的内容不改变-->
姓名:<input type="text" name="s_name" value="{ {s_name}}"><br>
年龄:<input type="text" name="s_age" value="{ {s_age}}"><br>
<input type="submit" value="查询">
<a href="/add">新增</a>
</form>
<table>
<tr>
<th>编号</th>
<th>姓名</th>
<th>年龄</th>
<th>操作</th>
</tr>
<!--将每条数据命名为value,并当作索引-->
{ {each datas as value index}}
<tr>
<!--将后台返回的数据显示出来-->
<td>{ {value.id}}</td>
<td>{ {value.name}}</td>
<td>{ {value.age}}</td>
<td><a href="/del/{ {value.id}}">删除</a></td>
<td><a href="/toUpdate/{ {value.id}}">修改</a></td>
</tr>
{ {/each}}
</table>
</body>
</html>
在views文件夹中创建add.html文件:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>新增页面</title>
</head>
<body>
<form action="/add" method="post">
姓名:<input type="text" name="name"><br>
年龄:<input type="text" name="age"><br>
<input type="submit" value="提交">
</form>
</body>
</html>
在views文件夹中创建update.html文件:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>修改页面</title>
</head>
<body>
<form action="/update" method="post">
<!--将后台的数据返回到前端,并将该数据的名字设置为id,返回到后台-->
<input type="hidden" value="{ {datas[0].id}}" name="id">
姓名:<input type="text" name="name" value="{ {datas[0].name}}"><br>
年龄:<input type="text" name="age" value="{ {datas[0].age}}"><br>
<input type="submit" value="提交">
</form>
</body>
</html>
修改routes文件夹中的index.js文件为以下内容:
var express = require('express');
var router = express.Router();
//引入连接数据库文件
var db = require("./db.js");
//创建首页
router.get('/', function (req, res, next) {
//在首页显示表中所有数据
db.query('select * from userinfo', function (err, rows) {
if (err) {
res.render('index', {title: 'Express', datas: []});
} else {
//将数据显示在index.html页面
res.render('index', {title: 'Express', datas: rows});
}
})
});
//创建增加页面
router.get('/add', function (req, res) {
res.render('add');
});
//实现增加功能
router.post('/add', function (req, res) {
//获取用户输入的信息
var name = req.body.name;
var age = req.body.age;
//往数据库中插入信息
db.query("insert into userinfo(name,age) values('" + name + "'," + age + ")", function (err, rows) {
if (err) {
res.end('新增失败:' + err);
} else {
//实现路径的跳转
res.redirect('/');
}
})
});
//实现删除功能
router.get('/del/:id', function (req, res) {
//获取参数中的id值
var id = req.params.id;
//删除当前id下的数据
db.query("delete from userinfo where id=" + id, function (err, rows) {
if (err) {
res.end('删除失败:' + err)
} else {
res.redirect('/')
}
});
});
//创建修改页面
router.get('/toUpdate/:id', function (req, res) {
var id = req.params.id;
//查询当前id下的详细数据,并显示到修改页面
db.query("select * from userinfo where id=" + id, function (err, rows) {
if (err) {
res.end('修改页面跳转失败:' + err);
} else {
//跳转到修改页面
res.render("update", {datas: rows});
}
});
});
//实现修改功能
router.post('/update', function (req, res) {
var id = req.body.id;
var name = req.body.name;
var age = req.body.age;
//修改当前id下的数据
db.query("update userinfo set name='" + name + "',age='" + age + "' where id=" + id, function (err, rows) {
if (err) {
res.end('修改失败:' + err);
} else {
res.redirect('/');
}
});
});
//实现查询功能
router.post('/search', function (req, res) {
var name = req.body.s_name;
var age = req.body.s_age;
//创建查询的sql语句
var sql = "select * from userinfo";
if (name) {
sql += " and name='" + name + "' ";
}
if (age) {
sql += " and age=" + age + " ";
}
//替换掉匹配到的第一个and字符串,并该成where
sql = sql.replace(/and/,"where");
db.query(sql, function (err, rows) {
if (err) {
res.end("查询失败:", err)
} else {
//将查询的数据显示在index.html
res.render("index", {title: 'Express', datas: rows, s_name: name, s_age: age});
}
});
});
module.exports = router;
启动项目,在test目录下执行以下命令:
npm start
在浏览器中访问:localhost:3000
以上为node.js+express+mysq实现增删改查的详细知识点。