基於nodejs+express+mysql+webstorm+html的 增刪改查
阿新 • • 發佈：2017-09-05
input expr each exports 文章 rec index edi console
一、工具準備
Nodejs框架,WebStorm、Mysql服務、Navicat。此篇文章只講項目的搭建過程，至於Nodejs，WebStorm、Mysql的下載、安裝與配置網上資源很多，請自行查閱，本文重點講述 增刪改查，此文為學習筆記，我也是初學者，很多代碼沒有做過多解釋，以免誤導他人。
Github 地址：https://github.com/Spqin/Nodejs_Websto_Mysql_CRUD
二、打開WebStorm創建項目-項目名稱自定義，這裏我按年月日做項目名稱。
1、選怎File-->New-->Project
2、選擇nodejs框架、輸入項目名稱、選擇前端模版的引擎（後面會修改為Html）、點擊創建。
3、創建的項目目錄如下圖所示
4、打開app.js，找到模版引擎設置並進行修改
三、上述過程都是準備工作，接下來開始增刪改查的講述，這裏我采用數據庫、路由、視圖的順序講解
此處為了方便下面文章的閱讀，先給出一個完成後的項目目錄截圖。
1、數據庫 創建數據庫的連接
1.1 在routes目錄下創建 db.js,此模塊負責數據庫的連接
//db.js // 連接MySQL var mysql = require(‘mysql‘); var pool = mysql.createPool({ host: ‘localhost‘, user: ‘root‘, password:‘1qaz2wsx‘, database: ‘nodejs‘ }); function query(sql, callback) { pool.getConnection(function (err, connection) { // Use the connection connection.query(sql, function (err, rows) { callback(err, rows); connection.release();//釋放鏈接 }); }); } exports.query= query;
1.2 創建數據庫表（person）
/* Navicat MySQL Data Transfer Source Server : nodejs Source Server Version : 50717 Source Host : localhost:3306 Source Database : nodejs Target Server Type : MYSQL Target Server Version : 50717 File Encoding : 65001 Date: 2017-09-05 16:18:45 */ SET FOREIGN_KEY_CHECKS=0; -- ---------------------------- -- Table structure for person -- ---------------------------- DROP TABLE IF EXISTS `person`; CREATE TABLE `person` ( `id` int(11) NOT NULL AUTO_INCREMENT, `name` varchar(255) DEFAULT NULL, `age` int(11) DEFAULT NULL, `professional` varchar(255) DEFAULT NULL, PRIMARY KEY (`id`) ) ENGINE=InnoDB AUTO_INCREMENT=11 DEFAULT CHARSET=utf8; -- ---------------------------- -- Records of person -- ---------------------------- INSERT INTO `person` VALUES (‘1‘, ‘武大‘, ‘25‘, ‘計算機科學與技術‘); INSERT INTO `person` VALUES (‘2‘, ‘王二‘, ‘25‘, ‘計算機科學與技術‘); INSERT INTO `person` VALUES (‘3‘, ‘張三‘, ‘25‘, ‘計算機科學與技術‘); INSERT INTO `person` VALUES (‘4‘, ‘李四‘, ‘25‘, ‘計算機科學與技術‘); INSERT INTO `person` VALUES (‘5‘, ‘孫五‘, ‘25‘, ‘計算機科學與技術‘); INSERT INTO `person` VALUES (‘6‘, ‘錢六‘, ‘25‘, ‘計算機科學與技術‘); INSERT INTO `person` VALUES (‘7‘, ‘趙七‘, ‘25‘, ‘計算機科學與技術‘); INSERT INTO `person` VALUES (‘8‘, ‘劉八‘, ‘25‘, ‘計算機科學與技術‘); INSERT INTO `person` VALUES (‘9‘, ‘張九‘, ‘25‘, ‘計算機科學與技術‘); INSERT INTO `person` VALUES (‘10‘, ‘鄭十‘, ‘25‘, ‘計算機科學與技術‘); SET FOREIGN_KEY_CHECKS=1;
2、路由（就是映射地址，做過編程開發的都懂，簡單舉例 "/business/person/getPersonById.do"）
在routes目錄下創建 person.js，此模塊負責映射地址的註冊，簡言之就相當MVC的Controller層，這裏並不是傳統的MVC模式，此處只做了功能實現。
var express = require(‘express‘); var router = express.Router(); //引入數據庫包 var db = require("./db.js"); /* GET listing. */ // router.get(‘/‘, function(req, res, next) { // res.send(‘respond with a resource‘); // }); /** * 查詢列表頁 */ router.get(‘/‘, function (req, res, next) { db.query(‘select * from person‘, function (err, rows) { console.log(rows); if (err) { res.render(‘persons‘, {title: ‘人員管理‘, datas: []}); // this renders "views/persons.html" } else { res.render(‘persons‘, {title: ‘人員管理‘, 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; var professional = req.body.professional; db.query("insert into person(name,age,professional) values(‘" + name + "‘," + age + ",‘" + professional + "‘)", function (err, rows) { if (err) { res.end(‘新增失敗：‘ + err); } else { res.redirect(‘/persons‘); } }) }); /** * 刪 */ router.get(‘/del/:id‘, function (req, res) { var id = req.params.id; db.query("delete from person where id=" + id, function (err, rows) { if (err) { res.end(‘刪除失敗：‘ + err) } else { res.redirect(‘/persons‘) } }); }); /** * 修改 */ router.get(‘/toUpdate/:id‘, function (req, res) { var id = req.params.id; console.log(id); db.query("select * from person 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; var professional = req.body.professional; db.query("update person set name=‘" + name + "‘,age=‘" + age + "‘,professional= ‘" + professional + "‘ where id=" + id, function (err, rows) { if (err) { res.end(‘修改失敗：‘ + err); } else { res.redirect(‘/persons‘); } }); }); /** * 查詢 */ router.post(‘/search‘, function (req, res) { var name = req.body.s_name; var age = req.body.s_age; var professional = req.body.s_professional; var sql = "select * from person"; if (name) { sql += " and name like ‘%" + name + "%‘ "; } if (age) { sql += " and age=" + age + " "; } if (professional) { sql += " and name like ‘%" + professional + "%‘ "; } sql = sql.replace("and","where"); db.query(sql, function (err, rows) { if (err) { res.end("查詢失敗：", err) } else { res.render("persons", {title: ‘人員管理‘, datas: rows, s_name: name, s_age: age}); } }); }); module.exports = router;
3、視圖 刪除views下的.ejs文件，創建項目截圖中的對應html文件，此處只有對persons.html、add.html、update.html 做講述。
3.1 persons.html 這個文件是人員管理列表頁面。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title><%= title %></title> <style> div{width:800px;margin: 0 auto;} table {border-collapse:collapse;border-spacing:0;width:800px;} table tr td ,table tr th {border-top:solid 1px #ccc;border-left:solid 1px #ccc;line-height: 40px;text-align: center;} table tr td:last-child, table tr th:last-child {border-right:solid 1px #ccc;} table tr:last-child td{border-bottom:solid 1px #ccc;} a{text-decoration: none;font-size: 14px;} .text{width:150px;} </style> </head> <body> <div> <div style=""> <div style="float: left;width:10%;"> <a href="/persons/add">新增</a> </div> <div style="float: right;width:90%;"> <form action="/persons/search" method="post"> 姓名：<input type="text" name="s_name" value="" class="text"> 年齡：<input type="text" name="s_age" value="" class="text"> 職業：<input type="text" name="s_professional" value="" class="text"> <input type="submit" value="查詢"> </form> </div> </div> <table style=""> <tr> <th width="10%">編號</th> <th width="15%">操作</th> <th width="15%">姓名</th> <th width="10%">年齡</th> <th width="50%">職業</th> </tr> <% if (datas.length) { %> <% datas.forEach(function(person){ %> <tr> <td><%= person.id %></td> <td><a href="/persons/del/<%= person.id %>">刪除</a> <a href="/persons/toUpdate/<%= person.id %>">修改</a></td> <td><%= person.name %></td> <td><%= person.age %></td> <td><%= person.professional %></td> </tr> <% }) %> <% } %> </table> </div> </body> </html>
3.2 add.html 添加人員的頁面
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>新增頁面</title> </head> <body> <div style="width: 800px;margin: auto;"> <form action="/persons/add" method="post"> 姓名：<input type="text" name="name"> 年齡：<input type="text" name="age"> 職業：<input type="text" name="professional"> <input type="submit" value="提交"> </form> </div> </body> </html>
3.3 update.html 更新人員信息的頁面
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>修改頁面</title> </head> <body> <div style="width: 800px;margin: auto;"> <form action="/persons/update" method="post"> <input type="hidden" value="<%= datas[0].id %>" name="id"> 姓名：<input type="text" name="name" value="<%= datas[0].name %>"> 年齡：<input type="text" name="age" value="<%= datas[0].age %>"> 職業：<input type="text" name="professional" value="<%= datas[0].professional %>"> <input type="submit" value="提交"> </form> </div> </body> </html>
四、僅有上述文件，項目還是不能運行起來的，最終要的一個文件app.js，此文件事node.js服務的總配置文件，它告訴框架文件模塊的加載順序。
var express = require(‘express‘);
var path = require(‘path‘);
var favicon = require(‘serve-favicon‘);
var logger = require(‘morgan‘);
var cookieParser = require(‘cookie-parser‘);
var bodyParser = require(‘body-parser‘);
var index = require(‘./routes/index‘);
var persons= require(‘./routes/person‘);
var app = express();
// view engine setup
// app.set(‘views‘, path.join(__dirname, ‘views‘));
// app.set(‘view engine‘, ‘ejs‘);
//註釋掉默認的，自己手動修改默認引擎
app.set(‘views‘, path.join(__dirname, ‘views‘));
app.engine(‘.html‘, require(‘ejs‘).__express);
app.set(‘view engine‘, ‘html‘);
// uncomment after placing your favicon in /public
//app.use(favicon(path.join(__dirname, ‘public‘, ‘favicon.ico‘)));
app.use(logger(‘dev‘));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, ‘public‘)));
app.use(‘/‘, index);
app.use(‘/persons‘,persons );
// catch 404 and forward to error handler
app.use(function(req, res, next) {
var err = new Error(‘Not Found‘);
err.status = 404;
next(err);
});
// error handler
app.use(function(err, req, res, next) {
// set locals, only providing error in development
res.locals.message = err.message;
res.locals.error = req.app.get(‘env‘) === ‘development‘ ? err : {};
// render the error page
res.status(err.status || 500);
res.render(‘error‘);
});
module.exports = app;
五、經過上述步驟之後，點擊運行，可能會報錯模塊缺失的錯誤，這個問題很容易解決，只需要使用node自帶的npm下載對應的模塊到 node_modules,至此項目配置結束。
瀏覽器地址欄輸入：http://localhost:3000/persons，地址中的persons是在app.js中配置的模塊，如果不寫persons。
app.use(‘/‘, index);
app.use(‘/persons‘,persons );
運行界面如下圖所示：
1、列表頁/查詢頁（支持姓名和職業的模糊查詢、年齡的精確查詢）
2、新增頁面，這裏只做了簡單的功能，沒有註意太多的樣式。
3、更新頁面
基於nodejs+express+mysql+webstorm+html的 增刪改查