express+vue+mongodb+session 實(shí)現(xiàn)注冊登錄功能

來源：懂視網(wǎng) 責(zé)編：小采時(shí)間：2020-11-27 22:02:48

express+vue+mongodb+session 實(shí)現(xiàn)注冊登錄功能

express+vue+mongodb+session 實(shí)現(xiàn)注冊登錄功能:主要實(shí)現(xiàn)如下功能： 1. 支持注冊，登錄功能，用戶可以注冊完成后，進(jìn)行登錄，登錄完成后會(huì)進(jìn)入到列表增刪改查頁面。 2. 支持session會(huì)話，也就是說設(shè)置了多長時(shí)間登錄過期，如果用戶沒有登錄，直接進(jìn)查詢列表頁面，會(huì)重定向到登錄頁面去，如果用戶登錄了后，

推薦度：

點(diǎn)擊下載本文 文檔為doc格式

導(dǎo)讀express+vue+mongodb+session 實(shí)現(xiàn)注冊登錄功能:主要實(shí)現(xiàn)如下功能： 1. 支持注冊，登錄功能，用戶可以注冊完成后，進(jìn)行登錄，登錄完成后會(huì)進(jìn)入到列表增刪改查頁面。 2. 支持session會(huì)話，也就是說設(shè)置了多長時(shí)間登錄過期，如果用戶沒有登錄，直接進(jìn)查詢列表頁面，會(huì)重定向到登錄頁面去，如果用戶登錄了后，

主要實(shí)現(xiàn)如下功能：

1. 支持注冊，登錄功能，用戶可以注冊完成后，進(jìn)行登錄，登錄完成后會(huì)進(jìn)入到列表增刪改查頁面。
2. 支持session會(huì)話，也就是說設(shè)置了多長時(shí)間登錄過期，如果用戶沒有登錄，直接進(jìn)查詢列表頁面，會(huì)重定向到登錄頁面去，如果用戶登錄了后，把瀏覽器關(guān)掉，直接輸入列表查詢頁面，會(huì)直接進(jìn)入列表頁面的。
3. 列表數(shù)據(jù)加入了分頁功能。
4. 對數(shù)據(jù)庫中的請求加入了日志記錄。

先看下效果：

1. 首先服務(wù)器重啟后，在地址欄中輸入 http://localhost:8081/ 后，會(huì)重定向到登錄頁面來，如下圖所示：

2. 如果沒有賬號(hào)的話，我們可以注冊一個(gè)賬號(hào)，進(jìn)入注冊頁面，如下圖所示：

3. 如果用戶名和密碼沒有輸入，或者輸入的格式不合法的話，會(huì)如下提示所示：

4. 當(dāng)用戶注冊成功后，可以看到如下頁面了

5. 我們?nèi)サ卿涰撁妫M(jìn)行登錄，如下：

6. 登錄成功后，會(huì)跳轉(zhuǎn)到列表頁面，如下圖所示：

下面的增刪改查操作的流程，我就不再介紹了，和我之前的 express+mongodb+vue 實(shí)現(xiàn)增刪改查中的演示是一樣的。

7. 下面我們來看看我們的數(shù)據(jù)庫中是否增加了剛剛注冊的用戶賬號(hào)了，如下圖所示：

上面的四個(gè)賬號(hào)都是我注冊的，在數(shù)據(jù)庫中可以看到，注冊成功了。

注意：如果某個(gè)用戶注冊過了，你再使用相同的賬號(hào)繼續(xù)注冊話，是不能注冊，會(huì)提示該賬號(hào)已經(jīng)注冊過了，如下圖所示：

下面還是來看下我們項(xiàng)目的整個(gè)目錄架構(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 # 用戶賬號(hào)表
| |--- 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 文件代碼(服務(wù)器代碼)：

部分代碼如下：

// 引入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 進(jìn)行加密簽名
 cookie: {
 maxAge: 1000 * 60 * 10 // 設(shè)置 session的有效時(shí)間，單位為毫秒，設(shè)置有效期為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了，對應(yīng)的 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); 的時(shí)候，會(huì)調(diào)用 routes/addAndDelete.js 下的請求方法，分別為：

/add, /query, /update, /del, 因此在我們列表頁面中使用接口方式如：類似于如下這樣的：

都是 /user/add, /user/query, /user/update, /user/del 這樣的接口，比如說我們使用 /user/add post請求這樣的接口的時(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ù)庫的操作，會(huì)在數(shù)據(jù)庫中增加一條數(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，類型為String
 age: { type: Number, default: 30 }, // 屬性age，類型為Number，默認(rèn)值為30
 sex: { type: String }
});

// 導(dǎo)出model模塊
const User = module.exports = mongoose.model('User', UserSchema);

因此會(huì)創(chuàng)建user表，并且在表中插入對應(yīng)的數(shù)據(jù)。

如上只是解釋下增加接口的調(diào)用方式，其他的接口設(shè)計(jì)也是一樣的。就不多解釋了。對應(yīng) /user 這樣的，我們在webpack中的devServer中會(huì)配置下，解決跨域問題，因?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' : '' // 重寫路徑
 }
 },
 '/reglogin': {
 target: 'http://127.0.0.1:3001',
 changeOrigin: true // 是否跨域
 }
 }
},

4. app.js 中使用了 mongoose-morgan 這個(gè)插件，為了數(shù)據(jù)庫操作接口的時(shí)候，寫入日志，比如報(bào)錯(cuò)的時(shí)候可以在服務(wù)器端看到報(bào)錯(cuò)信息，該API的具體使用可以

看下 npm庫（https://www.npmjs.com/package/mongoose-morgan）。

如下日志記錄：