前提
電腦已經安裝了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,來實現基本的數據庫連接
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.示例貼圖：
