根據(jù)Vue.js + Element UI + MongoDB進(jìn)行開發(fā)
P1 安裝Vue-CLI
利用Vue.js提供的一個官方命令行工具
# 全局安裝 vue-cli$ npm install --global vue-cli# 創(chuàng)建一個基于 webpack 模板的新項目$ vue init webpack my-project# 安裝依賴，走你$ cd my-project$ npm install$ npm run dev
Vue.js 主要目錄結(jié)構(gòu)
.├── build # 一些webpack的文件，配置參數(shù)什么的，一般不用動 ├── config # vue項目的基本配置文件 ├── index.html # 主頁├── node_modules # 項目中安裝的依賴模塊 ├── package.json # 項目文件，記載著一些命令和依賴還有簡要的項目描述信息 ├── README.md ├── server # 自己創(chuàng)建的后端文件，可以忽視├── src # 源碼文件夾，基本上文件都應(yīng)該放在這里 ├── App.vue # App.vue組件 ├── assets # 資源文件夾，里面放一些靜態(tài)資源 ├── components # 這里放的都是各個組件文件 ├── main.js # 入口文件 └── router # vue-router 路由配置├── static # 生成好的文件會放在這個目錄下├── test # 測試文件夾，測試都寫在這里├── .babelrc # babel編譯參數(shù)，vue開發(fā)需要babel編譯 ├── .gitignore└── .eslintignore
完成后就可以在/src/components/*.vue模板中寫代碼，ctrl+s保存后頁面會自動刷新，若無效請檢查端口是否被占用
P2 安裝Element UI
npm i element-ui -S
完成后在main.js中添加如下代碼完整引入Element,就能在/src/components/*.vue模板中使用Element UI的組件
// main.jsimport ElementUI from 'element-ui'import 'element-ui/lib/theme-default/index.css'Vue.use(ElementUI)
P3 登錄注冊功能
思路
驗證輸入的賬號和密碼是否合法(利用elementui的form表單)
export default { name: 'register', data () { var validateUser = (rule, value, cb) => { var pattern = /^[/w/u4e00-/u9fa5]{3,10}$/g if (value === '') { cb(new Error('請輸入用戶名')) } else if (!pattern.test(value)) { cb(new Error('請輸入3-10個字母/漢字/數(shù)字/下劃線')) } else { cb() } } var validatePwd = (rule, value, cb) => { var pattern = /^/S{3,20}$/g if (value === '') { cb(new Error('請輸入密碼')) } else if (!pattern.test(value)) { cb(new Error('請輸入3-20個非空白字符')) } else { if (this.registerForm.checkPwd !== '') { this.$refs.registerForm.validateField('checkPwd') } cb() } } var validateCheckPwd = (rule, value, cb) => { if (value === '') { cb(new Error('請再次輸入密碼')) } else if (value !== this.registerForm.pwd) { cb(new Error('兩次輸入密碼不一致!')) } else { cb() } } return { registerForm: { userName: '', pwd: '', checkPwd: '' }, registerRule: { userName: [ { validator: validateUser, trigger: 'blur' } ], pwd: [ { validator: validatePwd, trigger: 'blur' } ], checkPwd: [ { validator: validateCheckPwd, trigger: 'blur' } ] } } }, methods: { submitForm (formName) { this.$refs[formName].validate((valid) => { if (valid) { ... } else { return false } }) } }}利用axios實現(xiàn)與后端數(shù)據(jù)的交互
Axios.post('http://localhost:3000/register', data).then(res => { console.log(res.data) if (res.data.code === 0) { this.$message({ showClose: true, message: '注冊成功', type: 'success' }) router.push({name: 'Login'}) } else { this.$message({ showClose: true, message: '注冊失敗', type: 'error' }) }})使用 JSON WEB Tokens 實現(xiàn)登錄驗證
由于node后端和vue前端是兩個不同的端口（:3000和:8090），對于跨域（我已經(jīng)允許跨域訪問），session和cookie就不要想了，并不是設(shè)置一個什么就能解決的，花了一下午才發(fā)現(xiàn)，所以使用了token來做api請求，而且還能加密。
后端處理登錄
// sever/db/dbHelper.jsexports.findUser = function(data, cb) { User.findOne({ username: data.usr }, function(err, doc) { // 用戶密碼都正確 // jwt.encode({加密對象, 持續(xù)時間}, 密鑰字符串) entries.data = user entries.code = 0 var time = moment().add(1, 'days').valueOf() entries.access_token = jwt.encode({ iss: user._id, exp: time }, jwtTokenSecret) cb(true, entries) })}加密后的entries.access_token:
前端獲取到后端傳遞過來的access_token，將其保存進(jìn)sessionStorage。這個導(dǎo)航鉤子我放在/p路由獨(dú)享的鉤子下，在進(jìn)入/p/:id前攔截導(dǎo)航，通過axios向后端傳遞access_token，根據(jù)后臺返回值判斷是否已經(jīng)登錄。
注意router.beforeEach確保要調(diào)用next方法，否則鉤子就不會被 resolved，但after鉤子沒有 next方法，不能改變導(dǎo)航
beforeEnter: (to, from, next) => { let pattern = /^(//p)/g let token = sessionStorage.getItem('accessToken') //保存token if (pattern.test(to.path)) { Axios.post('http://localhost:3000/isLogin', {access_token: token}) .then(res => { if (res.data.code === 0) { console.log(from) console.log(to) next() } else { router.push({name: 'Login'}) next() } }) .catch(err => { console.log(err) }) }}后端處理token是否合法
后臺獲取到傳遞的token值，利用jwt.decode(token, jwtTokenSecret)對其解碼，解碼結(jié)果就是當(dāng)初我們加密的對象{iss, exp}，首先根據(jù)exp判斷token是否過期，然后根據(jù)_id查詢數(shù)據(jù)庫是否有這個用戶
// 登錄驗證exports.authority = function (req, cb) { // JWT 允許客戶端使用一下3個方法附加token： // 作為請求鏈接（query)的參數(shù)，作為主體的參數(shù)（body）， // 和作為請求頭（Header）的參數(shù)。 var token = (req.body && req.body.access_token) || (req.query && req.query.access_token) || req.headers['access-token'] if (token) { try { var decoded = jwt.decode(token, jwtTokenSecret) // 解碼 if (decoded.exp <= Date.now()) { // 判斷token是否過期 entries.code = 99 cb(false, entries) } else { // 之前加密對象是 user._id User.findOne({ _id: decoded.iss }, function(err, user) { if (err) { console.log(err) } else if (user !== null) { entries.code = 0 cb(true, entries) } }) } } catch (err) { console.log(err) } } else { entries.code = 99 cb(false, entries) }}以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持武林網(wǎng)。
新聞熱點(diǎn)
疑難解答
