<span id="mktg5"></span>

<i id="mktg5"><meter id="mktg5"></meter></i>

        <label id="mktg5"><meter id="mktg5"></meter></label>
        最新文章專題視頻專題問答1問答10問答100問答1000問答2000關(guān)鍵字專題1關(guān)鍵字專題50關(guān)鍵字專題500關(guān)鍵字專題1500TAG最新視頻文章推薦1 推薦3 推薦5 推薦7 推薦9 推薦11 推薦13 推薦15 推薦17 推薦19 推薦21 推薦23 推薦25 推薦27 推薦29 推薦31 推薦33 推薦35 推薦37視頻文章20視頻文章30視頻文章40視頻文章50視頻文章60 視頻文章70視頻文章80視頻文章90視頻文章100視頻文章120視頻文章140 視頻2關(guān)鍵字專題關(guān)鍵字專題tag2tag3文章專題文章專題2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章專題3
        問答文章1 問答文章501 問答文章1001 問答文章1501 問答文章2001 問答文章2501 問答文章3001 問答文章3501 問答文章4001 問答文章4501 問答文章5001 問答文章5501 問答文章6001 問答文章6501 問答文章7001 問答文章7501 問答文章8001 問答文章8501 問答文章9001 問答文章9501
        當(dāng)前位置: 首頁 - 科技 - 知識百科 - 正文

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

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

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

        先看下效果:

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

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

        3. 如果用戶名和密碼沒有輸入,或者輸入的格式不合法的話,會如下提示所示:

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

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

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

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

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

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

        注意:如果某個(gè)用戶注冊過了,你再使用相同的賬號繼續(xù)注冊話,是不能注冊,會提示該賬號已經(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 # 用戶賬號表
        | |--- 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í)候,會調(diào)用 routes/addAndDelete.js 下的請求方法,分別為:

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

        都是 /user/add, /user/query, /user/update, /user/del 這樣的接口,比如說我們使用 /user/add post請求這樣的接口的時(shí)候,他們會調(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ù)。如上代碼,會應(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);

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

        如上只是解釋下增加接口的調(diào)用方式,其他的接口設(shè)計(jì)也是一樣的。就不多解釋了。對應(yīng) /user 這樣的,我們在webpack中的devServer中會配置下,解決跨域問題,因?yàn)槲椰F(xiàn)在是啟動(dòng)兩個(gè)服務(wù)的,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 這個(gè)插件,為了數(shù)據(jù)庫操作接口的時(shí)候,寫入日志,比如報(bào)錯(cuò)的時(shí)候可以在服務(wù)器端看到報(bào)錯(cuò)信息,該API的具體使用可以

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

        如下日志記錄:

        具體的代碼這邊就不多解釋,有興趣的話可以去github上下載代碼查看下哦。

        查看github上源碼

        總結(jié)

        以上所述是小編給大家介紹的express+vue+mongodb+session 實(shí)現(xiàn)注冊登錄功能,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時(shí)回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!

        聲明:本網(wǎng)頁內(nèi)容旨在傳播知識,若有侵權(quán)等問題請及時(shí)與本網(wǎng)聯(lián)系,我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

        文檔

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

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

        最新推薦

        猜你喜歡

        熱門推薦

        專題
        Top
        主站蜘蛛池模板: 亚洲天堂免费在线| 人人爽人人爽人人片av免费| 色www永久免费网站| 亚洲AV永久无码精品一区二区国产| 亚洲依依成人亚洲社区| 国产妇乱子伦视频免费| 亚洲免费一级视频| 在线永久看片免费的视频| 亚洲午夜精品国产电影在线观看| 91精品免费在线观看| 亚洲已满18点击进入在线观看| 91在线视频免费看| 亚洲久悠悠色悠在线播放| 成年女人色毛片免费看| 亚洲日韩aⅴ在线视频| 在线综合亚洲欧洲综合网站| 嫩草视频在线免费观看| 亚洲无mate20pro麻豆| 国产免费变态视频网址网站| 午夜肉伦伦影院久久精品免费看国产一区二区三区 | 免费无遮挡无码视频在线观看| 无码欧精品亚洲日韩一区夜夜嗨| 亚洲日本精品一区二区 | 成全高清视频免费观看| 亚洲久热无码av中文字幕| 国产免费一区二区三区VR| 一区二区三区在线免费观看视频| 亚洲精品成人片在线播放| 久草视频在线免费| 国产成人亚洲精品91专区高清 | 亚洲国产韩国一区二区| 成年女人视频网站免费m| 污视频网站在线观看免费| 亚洲av午夜福利精品一区| 青青青免费国产在线视频小草| 欧美色欧美亚洲另类二区| 在线免费视频一区| 美女无遮挡拍拍拍免费视频 | 免费观看一级毛片| 成人免费av一区二区三区| 久久久久亚洲av无码专区喷水 |