杭州数澜科技招聘Node.js工程师【可实习】、UE/UI设计师【实习】、前端React工程师【实习】，联系方式可见评论区

Vue.js + Element UI + MongoDB

P1 安装Vue-CLI

# 全局安装 vue-cli

$ npm install --global vue-cli

# 创建一个基于 webpack 模板的新项目

$ vue init webpack my-project

# 安装依赖，走你

$ cd my-project

$ npm install

$ npm run dev

Vue.js 主要目录结构

.

├── build # 一些webpack的文件，配置参数什么的，一般不用动

├── config # vue项目的基本配置文件

├── index.html # 主页

├── node_modules # 项目中安装的依赖模块

├── package.json # 项目文件，记载着一些命令和依赖还有简要的项目描述信息

├── README.md

├── server # 自己创建的后端文件，可以忽视

├── src # 源码文件夹，基本上文件都应该放在这里

├── App.vue # App.vue组件

├── assets # 资源文件夹，里面放一些静态资源

├── components # 这里放的都是各个组件文件

├── main.js # 入口文件

└── router # vue-router 路由配置

├── static # 生成好的文件会放在这个目录下

├── test # 测试文件夹，测试都写在这里

├── .babelrc # babel编译参数，vue开发需要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.js

import ElementUI from 'element-ui'

import 'element-ui/lib/theme-default/index.css'

Vue.use(ElementUI)

P3 登录注册功能

登录界面

界面代码及注册略

思路

得益于vue的数据双向绑定，让我们不用操作DOM就能边输入边验证字符串合法性

利用axios实现前后端的数据交互

利用jsonwebtoken实现登录验证，结合vue-router的beforeEnter导航钩子在跳转前拦截验证access_token的有效性

验证输入的账号和密码是否合法(利用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个字母/汉字/数字/下划线'))

} 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实现与后端数据的交互

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 实现登录验证

由于node后端和vue前端是两个不同的端口(:3000和:8090)，对于跨域(我已经允许跨域访问)，session和cookie就不要想了，并不是设置一个什么就能解决的，花了一下午才发现，所以使用了token来做api请求，而且还能加密。

后端处理登录

// sever/db/dbHelper.js

exports.findUser = function(data, cb) {

User.findOne({

username: data.usr

}, function(err, doc) {

// 用户密码都正确

// jwt.encode({加密对象, 持续时间}, 密钥字符串)

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

前端获取到后端传递过来的access_token，将其保存进sessionStorage。这个导航钩子我放在/p路由独享的钩子下，在进入/p/:id前拦截导航，通过axios向后端传递access_token，根据后台返回值判断是否已经登录。

router.beforeEach确保要调用next方法，否则钩子就不会被 resolved，但after钩子没有 next方法，不能改变导航

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)对其解码，解码结果就是当初我们加密的对象{iss, exp}，首先根据exp判断token是否过期，然后根据_id查询数据库是否有这个用户

// 登录验证

exports.authority = function (req, cb) {

// JWT 允许客户端使用一下3个方法附加token：

// 作为请求链接(query)的参数，作为主体的参数(body)，

// 和作为请求头(Header)的参数。

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)

}

}