這是迄今為止第一次接觸后端的東西，是一個很小的項目，但是對於前端學習入門很好。我是先學了VUE框架再學的Node，學起來比較輕松，不過每個人都有自己的學習方法❤️
一、項目描述
學生信息管理系統，可以實現對信息的增、刪、改、查。
二、使用技術
客戶端：BootStrap3完成頁面的基本框架；JavaScript操作DOM元素
服務端：使用Express框架創建web服務端；利用路由模塊完成不同頁面對服務端的請求；利用第三方包body-parser獲取post請求的參數；利用express-art-template模板引擎完成服務端數據對頁面的渲染
這個項目里面沒有用數據庫，數據存放在json文件中，不用現成的API更適合學習
三、開發步驟
1、建立一個express項目
1. 創建一個文件夾
2. `npm init`設置package.json文件
3. `npm i express -S`安裝express包
4. 設置一個入口文件app.js
2、在app.js中編寫服務端代碼
// 1. 引包
var express = require('express')
// 2. 創建服務器應用程序
var app = express()
// 4.配置靜態開放資源
app.use('/public/', express.static('./public/'))
app.use('/static/', express.static('./static/'))
// 3. 端口監聽
app.listen(3000, function () {
console.log('app is running at port 3000.')
})
3、BootStrap框架搭建頁面
官方文檔https://www.bootcss.com/
⭕注意：利用npm安裝BootStrap框架的版本和npm的版本有關系，我的npm版本默認安裝BootStrap4，但是做項目的時候沒有注意到這一點，直接用的是BootStrap3中的樣式。。。。找了好多可能出問題的地方，最后發現是版本的原因，哇🥺好氣
4、配置模板引擎
npm i -S art-template express-art-template
app.engine('html', require('express-art-template')); //在app.js中編寫
模板引擎的使用
服務端：
res.render('html模板名', {模板數據}); //默認會從view文件夾下面找render
客戶端：
{{ each students }}
<tr>
<td>{{ $value.number }}</td>
<td>{{ $value.name }}</td>
<td>{{ $value.gender}}</td>
<td>{{ $value.age }}</td>
<td>{{ $value.academy }}</td>
<td>{{ $value.time }}</td>
<td>
<a href="/students/edit?id={{ $value.id }}">編輯</a>
<a href="/students/delete?id={{ $value.id }}">刪除</a>
</td>
</tr>
{{ /each }}
或者
`<input value="{{stuId.academy}}" class="form-control" type="text" id="" name="academy" required min="1" max="150">`
4、路由設計
5、配置body-parser獲取post請求數據
//1、安裝：
npm install --save body-parser
//2、引包：
var bodyParser = require('body-parser')
//3.配置
app.use(bodyParser.urlencoded({ extended: false }))
app.use(bodyParser.json())
//4、使用：
req.body
6、配置路由及提取路由模塊
在項目中新建router.js路由模塊，專門用來處理路由相關操作。
新建一個router.js路由文件：
// 1 創建一個路由容器
var express = require('express');
// 2 把路由都掛載到路由容器中
var router = express.Router();
router.get("/students", function (req, res) {
// 這里面的操作總的分成三步：
// 1、獲取表單數據
// 2、[調用student.js中的API]處理數據。
// 3、發送響應
})
router.post("/students/new", function (req, res) {})
....
// 3 把router導出
module.exports = router;
app.js中：
var router = require('./router')
// 把路由容器掛載到 app 服務中
// 這個一定要放在所有配置的最后面
app.use(router)
7.新建student.js處理文件數據
可以讓router.js專注於路由功能，便於代碼的維護
1、獲取數據文件中全部信息 find
2、根據學生id獲取學生信息 findById
3、添加新的學生信息到數據文件中 save
4、根據學生id更新數據文件中的內容 updateById
5、根據學生id刪除數據文件中的內容 deleteById
⭕因為獲取文件信息是異步操作，所以需要回調函數來獲取數據
⭕封裝API可以先在router.js寫怎么調用API,再按照調用需要封裝API。體現“上層(調用)決定下層(封裝)”的思想
比如：要實現編輯學生信息這個功能，在router.js中對將要封裝的API的期待使用如下：
var Student = require('./student');
router.get("/students/edit", function (req, res) {
Student.findById(id, function (err, stuId) {
if (err) {
res.status(500).send("Server error.");
}
res.render('edit.html', {
stuId
})
})
});
所以在student.js中要封裝的findById API如下：
/**
* 根據 id 獲取學生信息對象
* @param {Number} id 學生 id
* @param {Function} callback 回調函數
*/
exports.findById = function (id, callback) {
fs.readFile(dbPath, 'utf8', function (err, data) {
if (err) return callback(err);
var students = JSON.parse(data).students;
var stuId = students.find(function (item) {
return item.id === parseInt(id);
})
callback(null, stuId);
})
}
8.按照業務功能順序寫代碼
- 列表
- 添加
- 編輯
- 刪除
9.其它
大框架建起來了，剩下的小細節再扣，比如：
1、客戶端性別根據服務端數據來顯示，可以采用這種方法 {{ $value.gender == 0 ?"女":"男"}}
2、渲染編輯頁面的時候，利用JS完成對性別的渲染
3、之前的數據文件中可以保存相同的數據，我在將數據存到文件之前對其進行了去重操作，想到這一步的時候，突然發現，咦，算法題沒白刷，哈哈哈，的確是有用的😊
貼上代碼：
// 把對象數據轉換為字符串並存到db.json文件中
var saveFile = function (students, callback) {
// 對數組students進行去重操作
for (var i = 0; i < students.length; i++) {
for (var j = i + 1; j < students.length; j++) {
if (students[i].number === students[j].number) {
students.splice(j, 1);
}
}
}
// 把對象數據轉換為字符串
var fileData = JSON.stringify({
students
});
// 把新得字符串保存到文件中
fs.writeFile(dbPath, fileData, function (err) {
if (err) {
// 錯誤就是把錯誤信息傳遞給回調函數
return callback(err);
}
// 沒有問題就是傳遞null值
callback(null);
})
}
4、npm5以后的版本安裝都不要加--save參數，它會自動保存依賴信息