主要實(shí)現(xiàn)如下功能：
1. 支持注冊(cè)，登錄功能，用戶(hù)可以注冊(cè)完成后，進(jìn)行登錄，登錄完成后會(huì)進(jìn)入到列表增刪改查頁(yè)面。
2. 支持session會(huì)話，也就是說(shuō)設(shè)置了多長(zhǎng)時(shí)間登錄過(guò)期，如果用戶(hù)沒(méi)有登錄，直接進(jìn)查詢(xún)列表頁(yè)面，會(huì)重定向到登錄頁(yè)面去，如果用戶(hù)登錄了后，把瀏覽器關(guān)掉，直接輸入列表查詢(xún)頁(yè)面，會(huì)直接進(jìn)入列表頁(yè)面的。
3. 列表數(shù)據(jù)加入了分頁(yè)功能。
4. 對(duì)數(shù)據(jù)庫(kù)中的請(qǐng)求加入了日志記錄。
先看下效果：
1. 首先服務(wù)器重啟后，在地址欄中輸入 http://localhost:8081/ 后，會(huì)重定向到登錄頁(yè)面來(lái)，如下圖所示：
2. 如果沒(méi)有賬號(hào)的話，我們可以注冊(cè)一個(gè)賬號(hào)，進(jìn)入注冊(cè)頁(yè)面，如下圖所示：
3. 如果用戶(hù)名和密碼沒(méi)有輸入，或者輸入的格式不合法的話，會(huì)如下提示所示：
4. 當(dāng)用戶(hù)注冊(cè)成功后，可以看到如下頁(yè)面了
5. 我們?nèi)サ卿涰?yè)面，進(jìn)行登錄，如下：
6. 登錄成功后，會(huì)跳轉(zhuǎn)到列表頁(yè)面，如下圖所示：
下面的增刪改查操作的流程，我就不再介紹了，和我之前的 express+mongodb+vue 實(shí)現(xiàn)增刪改查中的演示是一樣的。
7. 下面我們來(lái)看看我們的數(shù)據(jù)庫(kù)中是否增加了剛剛注冊(cè)的用戶(hù)賬號(hào)了，如下圖所示：
上面的四個(gè)賬號(hào)都是我注冊(cè)的，在數(shù)據(jù)庫(kù)中可以看到，注冊(cè)成功了。
注意：如果某個(gè)用戶(hù)注冊(cè)過(guò)了，你再使用相同的賬號(hào)繼續(xù)注冊(cè)話，是不能注冊(cè)，會(huì)提示該賬號(hào)已經(jīng)注冊(cè)過(guò)了，如下圖所示：
下面還是來(lái)看下我們項(xiàng)目的整個(gè)目錄架構(gòu)如下：
### 目錄結(jié)構(gòu)如下：demo1 # 工程名| |--- dist # 打包后生成的目錄文件 | |--- node_modules # 所有的依賴(lài)包| |----database # 數(shù)據(jù)庫(kù)相關(guān)的文件目錄| | |---db.js # mongoose類(lèi)庫(kù)的數(shù)據(jù)庫(kù)連接操作| | |---models # 存放所有模型表| | | |--- user.js # 增刪改查用戶(hù)數(shù)據(jù)表| | | |--- userTable.js # 用戶(hù)賬號(hào)表| |--- app| | |---index| | | |-- views # 存放所有vue頁(yè)面文件| | | | |-- list.vue # 列表數(shù)據(jù)| | | | |-- index.vue| | | | |-- login.vue # 用戶(hù)登錄頁(yè)面| | | | |-- regist.vue # 用戶(hù)注冊(cè)頁(yè)面| | | |-- components # 存放vue公用的組件| | | |-- js # 存放js文件的| | | |-- css # 存放css文件| | | |-- store # store倉(cāng)庫(kù)| | | | |--- actions.js| | | | |--- mutations.js| | | | |--- state.js| | | | |--- mutations-types.js| | | | |--- index.js| | | | || | | |-- app.js # vue入口配置文件| | | |-- router.js # 路由配置文件| |--- api # 保存所有接口操作的文件| | |--- addAndDelete.js # 增刪改查的接口| | |--- regAndLogin.js # 注冊(cè)登錄的接口| | |--- userSession.js # 用戶(hù)session有效的接口| |--- routes # 存放所有的路由文件| | |--- addAndDelete.js # 增刪改查路由| | |--- regAndLogin.js # 注冊(cè)和登錄路由| | |--- userSession.js # session路由| |--- views| | |-- index.html # html文件| |--- webpack.config.js # webpack配置文件 | |--- .gitignore | |--- README.md| |--- package.json| |--- .babelrc # babel轉(zhuǎn)碼文件| |--- app.js # express入口文件
首先我們先看下 根目錄下的 app.js 文件代碼(服務(wù)器代碼)：
部分代碼如下：
// 引入express模塊const express = require('express');// 引入sessionconst session = require('express-session');// 創(chuàng)建app對(duì)象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-morganconst morgan = require('mongoose-morgan');app.use(bodyParser.json());app.use(bodyParser.urlencoded({ extended: false }));app.use(session({ secret: 'kongzhi', // 對(duì) session id 相關(guān)的cookie 進(jìn)行加密簽名 cookie: { maxAge: 1000 * 60 * 10 // 設(shè)置 session的有效時(shí)間，單位為毫秒，設(shè)置有效期為10分鐘 }}));// Logger 添加數(shù)據(jù)庫(kù)操作日志記錄 https://www.npmjs.com/package/mongoose-morganapp.use(morgan({ connectionString: 'mongodb://localhost:27017/dataDb'}));// 使用app.use('/user', addAndDelete);app.use('/reglogin', regAndLogin);app.use('/user', userSession);如上代碼，加載路由后，然后使用 use了，對(duì)應(yīng)的 routes文件下的js文件，代碼分別如下：
1. routes/addAndDelete.js 代碼如下：
// 引入express 模塊 const express = require('express');const router = express.Router();// 引入user.jsconst 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);// 注銷(xiāo)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;因此對(duì)于 app.use('/user', addAndDelete); 的時(shí)候，會(huì)調(diào)用 routes/addAndDelete.js 下的請(qǐng)求方法，分別為：
/add, /query, /update, /del, 因此在我們列表頁(yè)面中使用接口方式如：類(lèi)似于如下這樣的：
都是 /user/add, /user/query, /user/update, /user/del 這樣的接口，比如說(shuō)我們使用 /user/add post請(qǐng)求這樣的接口的時(shí)候，他們會(huì)調(diào)用到 routes/addAndDelete.js 中的router.post('/add', User.add); 這里面的 User.add方法，所以它就會(huì)調(diào)用到 api/addAndDelete.js 中的add函數(shù)，如下代碼所示：
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();};因此會(huì)調(diào)用數(shù)據(jù)庫(kù)的操作，會(huì)在數(shù)據(jù)庫(kù)中增加一條數(shù)據(jù)。如上代碼，會(huì)應(yīng)用到 database/models/user 這個(gè)表中的代碼：
/* 定義一個(gè)user的Schema*/const mongoose = require('../db.js');const Schema = mongoose.Schema;// 創(chuàng)建一個(gè)模型const UserSchema = new Schema({ name: { type: String}, // 屬性name，類(lèi)型為String age: { type: Number, default: 30 }, // 屬性age，類(lèi)型為Number，默認(rèn)值為30 sex: { type: String }});// 導(dǎo)出model模塊const User = module.exports = mongoose.model('User', UserSchema);因此會(huì)創(chuàng)建user表，并且在表中插入對(duì)應(yīng)的數(shù)據(jù)。
如上只是解釋下增加接口的調(diào)用方式，其他的接口設(shè)計(jì)也是一樣的。就不多解釋了。對(duì)應(yīng) /user 這樣的，我們?cè)趙ebpack中的devServer中會(huì)配置下，解決跨域問(wèn)題，因?yàn)槲椰F(xiàn)在是啟動(dòng)兩個(gè)服務(wù)的，node端的端口是 3001, 而我的webpack的端口是8081， 會(huì)存在跨域的，因此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' : '' // 重寫(xiě)路徑 } }, '/reglogin': { target: 'http://127.0.0.1:3001', changeOrigin: true // 是否跨域 } }},4. app.js 中使用了 mongoose-morgan 這個(gè)插件，為了數(shù)據(jù)庫(kù)操作接口的時(shí)候，寫(xiě)入日志，比如報(bào)錯(cuò)的時(shí)候可以在服務(wù)器端看到報(bào)錯(cuò)信息，該API的具體使用可以
看下 npm庫(kù)（https://www.npmjs.com/package/mongoose-morgan）。
如下日志記錄：
具體的代碼這邊就不多解釋?zhuān)信d趣的話可以去github上下載代碼查看下哦。
總結(jié)
以上所述是小編給大家介紹的express+vue+mongodb+session 實(shí)現(xiàn)注冊(cè)登錄功能，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)武林網(wǎng)網(wǎng)站的支持！
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
