node+express+mysql實現簡單的資料增刪改查
阿新 • • 發佈：2019-01-01
安裝node mysql 就不說了，自己查一下資料，
1.安裝express命令如下：
- $ npm install -g express-generator #需先安裝express-generator
- $ npm install -g express
- $ express --version #驗證是否安裝成功
表結構 如下：
3.建立exprss專案
express -e myapp 新建一個以ejs為模板的express專案
cd myapp
npm install
4.安裝nodejs的mysql外掛
npm install mysql --save
5.建立資料庫配置檔案
專案根目錄下建立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;
6.資料表增刪改查的業務程式碼，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;
7.建立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>
8.啟動服務
npm start 啟動服務
express預設的是3000的埠，如果服務正常啟動，則可以在瀏覽器位址列輸入http://localhost:3000/users
9.執行圖如下：
