根据Vue.js + Element UI + MongoDB进行开发
P1 安装Vue-CLI
Vue.js文档
利用Vue.js提供的一个官方命令行工具
# 全局安装 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
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文档
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,将其保存进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) } }
源码
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。
Vue学习之路之登录注册实例代码
- Author -
明眸在心丶声明:登载此文出于传递更多信息之目的,并不意味着赞同其观点或证实其描述。
Reply on: @reply_date@
@reply_contents@