Vue学习之路之登录注册实例代码

# 全局安装 vue-cli$ npm install --global vue-cli# 创建一个基于 webpack 模板的新项目$ vue init webpack my-project# 安装依赖，走你$ cd my-project$ npm install$ npm run dev

.├── 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

npm i element-ui -S

// main.jsimport ElementUI from 'element-ui'import 'element-ui/lib/theme-default/index.css'Vue.use(ElementUI)

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.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'    })  }})

// sever/db/dbHelper.jsexports.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)  })}

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)    })  }}

// 登录验证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)  }}