express+vue+mongodb+session 實現(xiàn)注冊登錄功能
主要實現(xiàn)如下功能：
1. 支持注冊，登錄功能，用戶可以注冊完成后，進行登錄，登錄完成后會進入到列表增刪改查頁面。
2. 支持session會話，也就是說設置了多長時間登錄過期，如果用戶沒有登錄，直接進查詢列表頁面，會重定向到登錄頁面去，如果用戶登錄了后，把瀏覽器關(guān)掉，直接輸入列表查詢頁面，會直接進入列表頁面的。
3. 列表數(shù)據(jù)加入了分頁功能。
4. 對數(shù)據(jù)庫中的請求加入了日志記錄。
先看下效果：
1. 首先服務器重啟后，在地址欄中輸入 http://localhost:8081/ 后，會重定向到登錄頁面來，如下圖所示：
2. 如果沒有賬號的話，我們可以注冊一個賬號，進入注冊頁面，如下圖所示：
3. 如果用戶名和密碼沒有輸入，或者輸入的格式不合法的話，會如下提示所示：
4. 當用戶注冊成功后，可以看到如下頁面了
5. 我們?nèi)サ卿涰撁?，進行登錄，如下：
6. 登錄成功后，會跳轉(zhuǎn)到列表頁面，如下圖所示：
下面的增刪改查操作的流程，我就不再介紹了，和我之前的 express+mongodb+vue 實現(xiàn)增刪改查中的演示是一樣的。
7. 下面我們來看看我們的數(shù)據(jù)庫中是否增加了剛剛注冊的用戶賬號了，如下圖所示：
上面的四個賬號都是我注冊的，在數(shù)據(jù)庫中可以看到，注冊成功了。
注意：如果某個用戶注冊過了，你再使用相同的賬號繼續(xù)注冊話，是不能注冊，會提示該賬號已經(jīng)注冊過了，如下圖所示：
下面還是來看下我們項目的整個目錄架構(gòu)如下：
### 目錄結(jié)構(gòu)如下： demo1 # 工程名 | |--- dist # 打包后生成的目錄文件 | |--- node_modules # 所有的依賴包 | |----database # 數(shù)據(jù)庫相關(guān)的文件目錄 | | |---db.js # mongoose類庫的數(shù)據(jù)庫連接操作 | | |---models # 存放所有模型表 | | | |--- user.js # 增刪改查用戶數(shù)據(jù)表 | | | |--- userTable.js # 用戶賬號表 | |--- app | | |---index | | | |-- views # 存放所有vue頁面文件 | | | | |-- list.vue # 列表數(shù)據(jù) | | | | |-- 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轉(zhuǎn)碼文件 | |--- app.js # express入口文件
首先我們先看下 根目錄下的 app.js 文件代碼(服務器代碼)：
部分代碼如下：
// 引入express模塊
const express = require('express');
// 引入session
const session = require('express-session');
// 創(chuàng)建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 相關(guān)的cookie 進行加密簽名
cookie: {
maxAge: 1000 * 60 * 10 // 設置 session的有效時間，單位為毫秒，設置有效期為10分鐘
}
}));
// Logger 添加數(shù)據(jù)庫操作日志記錄 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); 的時候，會調(diào)用 routes/addAndDelete.js 下的請求方法，分別為：
/add, /query, /update, /del, 因此在我們列表頁面中使用接口方式如：類似于如下這樣的：
都是 /user/add, /user/query, /user/update, /user/del 這樣的接口，比如說我們使用 /user/add post請求這樣的接口的時候，他們會調(diào)用到 routes/addAndDelete.js 中的router.post('/add', User.add); 這里面的 User.add方法，所以它就會調(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();
};
因此會調(diào)用數(shù)據(jù)庫的操作，會在數(shù)據(jù)庫中增加一條數(shù)據(jù)。如上代碼，會應用到 database/models/user 這個表中的代碼：
/*
定義一個user的Schema
*/
const mongoose = require('../db.js');
const Schema = mongoose.Schema;
// 創(chuàng)建一個模型
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);
因此會創(chuàng)建user表，并且在表中插入對應的數(shù)據(jù)。
如上只是解釋下增加接口的調(diào)用方式，其他的接口設計也是一樣的。就不多解釋了。對應 /user 這樣的，我們在webpack中的devServer中會配置下，解決跨域問題，因為我現(xiàn)在是啟動兩個服務的，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 這個插件，為了數(shù)據(jù)庫操作接口的時候，寫入日志，比如報錯的時候可以在服務器端看到報錯信息，該API的具體使用可以
看下 npm庫（https://www.npmjs.com/package/mongoose-morgan）。
如下日志記錄：
具體的代碼這邊就不多解釋，有興趣的話可以去github上下載代碼查看下哦。
總結(jié)
以上所述是小編給大家介紹的express+vue+mongodb+session 實現(xiàn)注冊登錄功能，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
Vue動態(tài)數(shù)據(jù)實現(xiàn)?el-select?多級聯(lián)動、數(shù)據(jù)回顯方式
這篇文章主要介紹了Vue動態(tài)數(shù)據(jù)實現(xiàn)?el-select?多級聯(lián)動、數(shù)據(jù)回顯方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-07-07
這篇文章主要介紹了vue3.0中使用postcss-pxtorem的具體方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-11-11
Vue+ECharts實現(xiàn)中國地圖的繪制及各省份自動輪播高亮顯示
這篇文章主要介紹了Vue+ECharts實現(xiàn)中國地圖的繪制以及拖動、縮放和各省份自動輪播高亮顯示,本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2021-12-12
這篇文章主要介紹了vue.js引入外部CSS樣式和外部JS文件的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-01-01
vue中的get方法\post方法如何實現(xiàn)傳遞數(shù)組參數(shù)
這篇文章主要介紹了vue中的get方法\post方法如何實現(xiàn)傳遞數(shù)組參數(shù)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
Vue Element-UI中el-table實現(xiàn)單選的示例代碼
在element-ui中是為我們準備好了可直接使用的單選與多選屬性的,本文主要介紹了Vue Element-UI中el-table實現(xiàn)單選的示例代碼,具有一定的參考價值,感興趣的可以了解一下2023-12-12
如何使用Vue3.2+Vite2.7從0快速打造一個UI組件庫
構(gòu)建工具使用vue3推薦的vite,下面這篇文章主要給大家介紹了關(guān)于如何使用Vue3.2+Vite2.7從0快速打造一個UI組件庫的相關(guān)資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-09-09
Vue $emit $refs子父組件間方法的調(diào)用實例
今天小編就為大家分享一篇Vue $emit $refs子父組件間方法的調(diào)用實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
詳解Vue自定義指令如何實現(xiàn)處理圖片加載失敗的碎圖
這篇文章主要介紹了詳解Vue自定義指令如何實現(xiàn)處理圖片加載失敗的碎圖，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習吧2023-02-02
在本篇文章里小編給大家整理的是一篇關(guān)于vue3組件通信的方式總結(jié)及實例用法，對此有興趣的朋友們可以跟著學習下。2021-12-12