根据Vue.js + Element UI + MongoDB进行开发
P1 安装Vue-CLI
利用Vue.js提供的一个官方命令行工具
rush:bash;">
# 全局安装 vue-cli
$ npm install --global vue-cli
# 创建一个基于 webpack 模板的新项目
$ vue init webpack my-project
# 安装依赖，走你
$ cd my-project
$ npm install
$ npm run dev
Vue.js 主要目录结构
rush:plain;">
.
├── 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
rush:bash;">
npm i element-ui -S
完成后在main.js中添加如下代码完整引入Element,就能在/src/components/*.vue模板中使用Element UI的组件
rush:js;">
// 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表单)
{
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,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,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,checkPwd: [
{ validator: validateCheckPwd,trigger: 'blur' }
]
}
}
},methods: {
submitForm (formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
...
} else {
return false
}
})
}
}
}
利用axios实现与后端数据的交互
{
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请求，而且还能加密。
后端处理登录
rush:js;">
// 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方法，不能改变导航
{
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查询数据库是否有这个用户
rush:js;">
// 登录验证
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 },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)
}
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。
原文地址：https://www.jb51.cc/vue/38062.html
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
