??準備工作假定已經做好。下面直接進入express項目的創建。
- 全局安裝express，命令如下：
nom install express-generator -g
- 然后使用express在目的文件夾創建項目：
express demo
- 進入到項目的根目錄，安裝項目依賴：
npm install
這樣，項目就可以運行了，輸入命令：
npm start
在 localhost:3000 端口便可訪問到項目了
新項目運行結果
- 由于需要使用mysql數據庫，還需要安裝mysql數據庫的依賴（可在根目錄下 package.json 文件中查看依賴版本）：
nom install mysql -save
- 在根目錄下新建 config 目錄，在該目錄下新建 db.js 文件，文件如下：
var mysql = require('mysql'); // 引入mysql數據庫模塊
// 配置數據庫線程池連接
var pool = mysql.createPool({
host: 'localhost',
user: 'root',
password: '*******',
database: 'database_name'
});
function query(sql, callback) {
pool.getConnection(function (err, connection) {
connection.query(sql, function (err, rows) {
callback(err, rows);
connection.release();
});
});
}
exports.query = query;
當然還需要數據庫，我簡單建了一個表：
user表
- 這里需要注意一個問題，我這里使用的是ejs模版，而項目創建時默認的是jade模版。（注意你的項目的默認模版），如我想我一下的話，需要在 app.js 文件中做這樣的修改：
// view engine setup
app.set('views', path.join(__dirname, 'views'));
// app.set('view engine', 'jade');
app.set('view engine', 'ejs');
并使用
npm install ejs
安裝ejs模版模塊。
- 然后修改 routes 文件夾下的 users.js 文件如下：
var express = require('express');
var router = express.Router();
var db = require('../config/db'); // 引入數據庫配置文件，默認后綴名
/**
* 展示列表頁
*/
router.get('/', function (req, res) {
db.query('select * from user', function (err, rows) {
if (err) {
res.render("users", {title: '用戶列表1', data:[]});
} else {
res.render("users", {title: '用戶列表2', data:rows});
}
});
});
/**
* 添加用戶
*/
// get請求，跳轉到添加的頁面
router.get('/add', function (req, res) {
res.render('add');
});
// post請求，提交表單數據
router.post('/add', function (req, res) {
var name = req.body.name;
var gender = req.body.gender;
var age = req.body.age;
db.query("insert into user(name, age, gender) values(' "+ name + " ', ' "+ age +" ', '" + gender + " ' )", function (err, rows) {
if (err) {
res.send('新增失敗' + err);
} else {
res.redirect('/users');
}
});
});
// ...
// 這里僅僅實現了兩個功能作為示例
module.exports = router;
- 在 views 文件夾下創建 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="<%= data.name %>">
年齡：<input type="text" name="s_age" value="<%= data.age %>">
<input type="submit" value="查詢">
<a href="/users/add">添加</a>
</form>
<table>
<tr>
<th>編號</th>
<th>姓名</th>
<th>性別</th>
<th>年齡</th>
<th>操作</th>
</tr>
<% for (var i = 0; i < data.length; i++) { %>
<tr>
<td><%= data[i].id %></td>
<td><%= data[i].name %></td>
<td><%= data[i].gender %></td>
<td><%= data[i].age %></td>
<td><a href="/users/delete/<%= data[i].id %>">刪除</a></td>
<td><a href="/users/update/<%= data[i].id %>">修改</a></td>
</tr>
<% } %>
</table>
</body>
</html>
- 在 views 文件夾下創建 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="gender"><br>
年齡：<input type="text" name="age"><br>
<input type="submit" value="提交">
</form>
</body>
</html>
這樣再啟動項目，便可以看到下面的圖片：
列表頁面
新增頁面
圖中 刪除 與 修改 代碼中并未實現，留給讀者自己實踐吧～
