这是我参与更文挑战的第2天，活动详情查看：更文挑战
前提
电脑已经安装了node，express，mysql。
实现步骤
1.新建数据库表
附数据表结构：
2.创建exprss项目
express -e myapp 新建一个以ejs为模板的express项目
cd myapp
npm install
3.安装nodejs的mysql插件
npm install mysql --save
4.创建数据库配置文件
项目根目录下创建config目录，config目录内新建db.js,来实现基本的数据库连接
var mysql = require("mysql");
var pool = mysql.createPool({
host:"localhost",
user:"root",
password:"",
database:"oa"
});
function query(sql,callback){
pool.getConnection(function(err,connection){
connection.query(sql, function (err,rows) {
callback(err,rows);
connection.release();
});
});
}
exports.query = query;
5.数据表增删改查的业务代码，demo中暂时放到routes下的user.js中(demo的项目目录结构可能不大合理，暂且不纠结于此)
user.js
var express = require('express');
var router = express.Router();
var db = require("../config/db");
/**
* 查询列表页
*/
router.get("/",function(req,res,next){
db.query("select * from user",function(err,rows){
if(err){
res.render("users",{title:"用户列表",datas:[]});
}else {
res.render("users",{title:"用户列表",datas:rows});
}
});
});
/**
* 添加用户
*/
router.get("/add",function(req,res,next){
res.render("add");
});
router.post("/add",function(req,res,next){
var name = req.body.name;
var age = req.body.age;
db.query("insert into user(name,age) values('"+name+"','"+ age +"')",function(err,rows){
if(err){
res.send("新增失败"+err);
}else {
res.redirect("/users");
}
});
});
/**
* 删除用户
*/
router.get("/del/:id",function(req,res){
var id = req.params.id;
db.query("delete from user where id = " + id,function(err,rows){
if(err){
res.send("删除失败"+err);
}else {
res.redirect("/users");
}
});
});
/**
* 修改
*/
router.get("/toUpdate/:id",function(req,res,next){
var id = req.params.id;
var sql = "select * from user where id = " + id;
console.log(sql);
db.query(sql,function(err,rows){
if(err){
res.send("修改页面跳转失败");
}else {
res.render("update",{datas:rows});
}
});
});
router.post("/update",function(req,res,next){
var id = req.body.id;
var name = req.body.name;
var age = req.body.age;
var sql = "update user set name = '"+ name +"',age = '"+ age +"' where id = " + id;
console.log(sql);
db.query(sql,function(err,rows){
if(err){
res.send("修改失败 " + err);
}else {
res.redirect("/users");
}
});
});
/**
* 查询
*/
router.post("/search",function(req,res,next){
var name = req.body.s_name;
var age = req.body.s_age;
var sql = "select * from user";
if(name){
sql += " where name = '"+ name +"'";
}
//if(age){
// sql += " and age = '" + age + "'";
//}
sql.replace("and","where");
db.query(sql,function(err,rows){
if(err){
res.send("查询失败: "+err);
}else{
res.render("users",{title:"用户列表",datas:rows,s_name:name,s_age:age});
}
});
})
module.exports = router;
6.创建ejs模版文件
users.ejs(用户列表页模板)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title><%= title %></title>
</head>
<body>
<form action="/users/search" method="post">
姓名：<input type="text" name="s_name" value="<%= datas.name %>"><br>
年龄：<input type="text" name="s_age" value="<%= datas.age %>"><br>
<input type="submit" value="查询">
</form>
<table>
<tr>
<th>编号</th>
<th>姓名</th>
<th>年龄</th>
<th>操作</th>
</tr>
<% for(var i = 0; i < datas.length; i++) {%>
<tr>
<td><%= datas[i].id %></td>
<td><%= datas[i].age %></td>
<td><%= datas[i].name %></td>
<td><a href="/users/add">添加用户</a></td>
<td><a href="/users/del/<%= datas[i].id %>">删除</a></td>
<td><a href="/users/toUpdate/<%= datas[i].id %>">修改</a></td>
</tr>
<% } %>
</table>
</body>
</html>
add.ejs(添加用户的模板文件)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>新增页面</title>
</head>
<body>
<form action="/users/add" method="post">
姓名：<input type="text" name="name"><br>
年龄：<input type="text" name="age"><br>
<input type="submit" value="提交">
</form>
</body>
</html>
update.ejs(用户信息修改的模板文件)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>修改页面</title>
</head>
<body>
<form action="/users/update" method="post">
<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>
7.启动服务
npm start 启动服务
express默认的是3000的端口，如果服务正常启动，则可以在浏览器地址栏输入http://localhost:3000/users
8.示例贴图：
人懒，不想配图，都是自己的博客内容（干货），望能帮到大家
公众号：小何成长，佛系更文，都是自己曾经踩过的坑或者是学到的东西
有兴趣的小伙伴欢迎关注我哦，我是：小阿肥。 大家一起进步鸭
