上個月寫了一篇文章是 express+mongodb+vue 實現增刪改查. 只是簡單的實現了增刪改查功能，那麼今天是在那個基礎之上做了擴充套件，首先實現的功能有如下：
1. 支援註冊，登入功能，使用者可以註冊完成後，進行登入，登入完成後會進入到列表增刪改查頁面。
2. 支援session會話，也就是說設定了多長時間登入過期，如果使用者沒有登入，直接進查詢列表頁面，會重定向到登入頁面去，如果使用者登入了後，把瀏覽器關掉，直接輸入列表查詢頁面，會直接進入列表頁面的。
3. 列表資料加入了分頁功能。
4. 對資料庫中的請求加入了日誌記錄。
該程式碼和之前的實現增刪改查程式碼，目錄有所調整，目的想檔案目錄更加清晰。我們在講解之前，還是和之前一樣，先看下效果：
1. 首先伺服器重啟後，在位址列中輸入 http://localhost:8081/ 後，會重定向到登入頁面來，如下圖所示：
2. 如果沒有賬號的話，我們可以註冊一個賬號，進入註冊頁面，如下圖所示：
3. 如果使用者名稱和密碼沒有輸入，或者輸入的格式不合法的話，會如下提示所示：
4. 當使用者註冊成功後，可以看到如下頁面了
5. 我們去登入頁面，進行登入，如下：
6. 登入成功後，會跳轉到列表頁面，如下圖所示：
下面的增刪改查操作的流程，我就不再介紹了，和我之前的 express+mongodb+vue 實現增刪改查中的演示是一樣的。
7. 下面我們來看看我們的資料庫中是否增加了剛剛註冊的使用者賬號了，如下圖所示：
上面的四個賬號都是我註冊的，在資料庫中可以看到，註冊成功了。
注意：如果某個使用者註冊過了，你再使用相同的賬號繼續註冊話，是不能註冊，會提示該賬號已經註冊過了，如下圖所示：
下面還是來看下我們專案的整個目錄架構如下：
### 目錄結構如下： demo1 # 工程名 | |--- dist # 打包後生成的目錄檔案 | |--- node_modules # 所有的依賴包 | |----database # 資料庫相關的檔案目錄 | | |---db.js # mongoose類庫的資料庫連線操作 | | |---models # 存放所有模型表 | | | |--- user.js # 增刪改查使用者資料表 | | | |--- userTable.js # 使用者賬號表 | |--- app | | |---index | | | |-- views # 存放所有vue頁面檔案 | | | | |-- list.vue # 列表資料 | | | | |-- index.vue | | | | |-- login.vue # 使用者登入頁面 | | | | |-- regist.vue # 使用者註冊頁面 | | | |-- components # 存放vue公用的元件 | | | |-- js # 存放js檔案的 | | | |-- css # 存放css檔案 | | | |-- store # store倉庫 | | | | |--- actions.js | | | | |--- mutations.js | | | | |--- state.js | | | | |--- mutations-types.js | | | | |--- index.js | | | | | | | | |-- app.js # vue入口配置檔案 | | | |-- router.js # 路由配置檔案 | |--- api # 儲存所有介面操作的檔案 | | |--- addAndDelete.js # 增刪改查的介面 | | |--- regAndLogin.js # 註冊登入的介面 | | |--- userSession.js # 使用者session有效的介面 | |--- routes # 存放所有的路由檔案 | | |--- addAndDelete.js # 增刪改查路由 | | |--- regAndLogin.js # 註冊和登入路由 | | |--- userSession.js # session路由 | |--- views | | |-- index.html # html檔案 | |--- webpack.config.js # webpack配置檔案 | |--- .gitignore | |--- README.md | |--- package.json | |--- .babelrc # babel轉碼檔案 | |--- app.js # express入口檔案
首先我們先看下 根目錄下的 app.js 檔案程式碼(伺服器程式碼)：
部分程式碼如下：
// 引入express模組 const express = require('express'); // 引入session const session = require('express-session'); // 建立app物件 const app = express(); // 載入路由 const addAndDelete = require('./routes/addAndDelete'); const regAndLogin = require('./routes/regAndLogin'); const userSession = require('./routes/userSession'); const bodyParser = require("body-parser"); const fs = require('fs'); const path = require('path'); // mongoose-morgan const morgan = require('mongoose-morgan'); app.use(bodyParser.json()); app.use(bodyParser.urlencoded({ extended: false })); app.use(session({ secret: 'kongzhi', // 對 session id 相關的cookie 進行加密簽名 cookie: { maxAge: 1000 * 60 * 10 // 設定 session的有效時間，單位為毫秒，設定有效期為10分鐘 } })); // Logger 新增資料庫操作日誌記錄 https://www.npmjs.com/package/mongoose-morgan app.use(morgan({ connectionString: 'mongodb://localhost:27017/dataDb' })); // 使用 app.use('/user', addAndDelete); app.use('/reglogin', regAndLogin); app.use('/user', userSession);
如上程式碼，載入路由後，然後使用 use了，對應的 routes檔案下的js檔案，程式碼分別如下：
1. routes/addAndDelete.js 程式碼如下：
// 引入express 模組 const express = require('express'); const router = express.Router(); // 引入user.js const User = require('../api/addAndDelete'); router.post('/add', User.add); router.post('/query', User.query); router.post('/del', User.del); router.post('/update', User.update); module.exports = router;
2. routes/regAndLogin.js 程式碼如下：
const express = require('express');
const router = express.Router();
const RegAndLogin = require('../api/regAndLogin');
router.post('/regist', RegAndLogin.registered);
router.post('/login', RegAndLogin.login);
// 登出
router.post('/logout', RegAndLogin.logout);
module.exports = router;
3. routes/userSession.js 程式碼如下：
const express = require('express');
const router = express.Router();
const userSession = require('../api/userSession');
router.post('/usersession', userSession.usersession);
module.exports = router;
因此對於 app.use('/user', addAndDelete); 的時候，會呼叫 routes/addAndDelete.js 下的請求方法，分別為：
/add, /query, /update, /del, 因此在我們列表頁面中使用介面方式如：類似於如下這樣的：
都是 /user/add, /user/query, /user/update, /user/del 這樣的介面，比如說我們使用 /user/add post請求這樣的介面的時候，他們會呼叫到 routes/addAndDelete.js 中的router.post('/add', User.add); 這裡面的 User.add方法，所以它就會呼叫到 api/addAndDelete.js 中的add函式，如下程式碼所示：
const User = require('../database/models/user');
// 新增資訊
module.exports.add = function(req, res, next) {
const user = new User({
name: req.body.name,
age: req.body.age,
sex: req.body.sex
});
user.save((err, docs) => {
if (err) {
res.send({ 'code': 1, 'errorMsg': '新增失敗' });
} else {
res.send({ "code": 0, 'message': '新增成功' });
}
});
next();
};
因此會呼叫資料庫的操作，會在資料庫中增加一條資料。如上程式碼，會應用到 database/models/user 這個表中的程式碼：
/* 定義一個user的Schema */ const mongoose = require('../db.js'); const Schema = mongoose.Schema; // 建立一個模型 const UserSchema = new Schema({ name: { type: String}, // 屬性name，型別為String age: { type: Number, default: 30 }, // 屬性age，型別為Number，預設值為30 sex: { type: String } }); // 匯出model模組 const User = module.exports = mongoose.model('User', UserSchema);
因此會建立user表，並且在表中插入對應的資料。
如上只是解釋下增加介面的呼叫方式，其他的介面設計也是一樣的。就不多解釋了。對應 /user 這樣的，我們在webpack中的devServer中會配置下，解決跨域問題，因為我現在是啟動兩個服務的，node端的埠是 3001, 而我的webpack的埠是8081， 會存在跨域的，因此webpack的 devServer 需要做如下配置的：
devServer: { port: 8081, // host: '0.0.0.0', headers: { 'X-foo': '112233' }, inline: true, overlay: true, stats: 'errors-only', proxy: { '/user': { target: 'http://127.0.0.1:3001', changeOrigin: true // 是否跨域 }, '/combineFile': { target: 'http://127.0.0.1:3001', changeOrigin: true, // 是否跨域, pathRewrite: { '^/combineFile' : '' // 重寫路徑 } }, '/reglogin': { target: 'http://127.0.0.1:3001', changeOrigin: true // 是否跨域 } } },
4. app.js 中使用了 mongoose-morgan 這個外掛，為了資料庫操作介面的時候，寫入日誌，比如報錯的時候可以在伺服器端看到報錯資訊，該API的具體使用可以
看下 npm庫（https://www.npmjs.com/package/mongoose-morgan）。
如下日誌記錄：
具體的程式碼這邊就不多解釋，有興趣的話可以去github上下載程式碼檢視下哦。