nuxt全栈仿美团官网06——注册

平时在有道云上做笔记，直接发到这里格式全乱了，有空整理，大家也可查看有道云链接：
http://note.youdao.com/noteshare?id=17db4f2aadde36694a3a9f326eef6909&sub=F11DAA43DDE940EC962BB37D3D2BBEB2

用户注册流程：

1. 填写好表单，点击提交注册按钮，用elementUI的验证功能校验表单。
2. 校验通过后把表单数据发送到后台接口，请求注册，其中用户名和密码分别要进行编码和加密，这里采用crypto-js来加密，需要安装。注意cryptoJs.MD5(this.ruleForm.pwd).toString()不要忘记后面的.toString()

1this.$refs['ruleForm'].validate((value)=>{ if(!value) return; this.$axios.post('users/signup',{ username:encodeURIComponent(this.ruleForm.name), password:cryptoJs.MD5(this.ruleForm.pwd).toString(), // 用MD5加密密码 code:this.ruleForm.code, email:this.ruleForm.email }).then() })

1. 接口配置

import UserModel from '../dbs/models/user' import axios from './utils/axios' // 调登录接口验证时用

1. 接口收到表单信息，先通过解构赋值取出参数

const {username,password,code,email} = ctx.request.body;

1. 通过4步验证看是否达到注册要求，达不到则返回相应提示，不成功时body中返回的code都是-1，注意每次写完body后的return：
   1. 检验用户名是否被注册

const result = await UserModel.find({username}); if(result.length>0){ ctx.body={ code:-1, msg:'用户名已经被注册' } return }

• 1. 验证码是否为空

if (!code){ ctx.body={ code:-1, msg:'请输入验证码' } return }

• 1. 从存入redis的session中取出验证码看传来的是否正确

const saveCode = await Store.hget(`nodemail:${username}`,'code'); if(saveCode !== code){ ctx.body={ code:-1, msg:'验证码不正确' } return }

• 1. 从session中取出过期时间，比较验证码是否过期

const saveExpire = await Store.hget(`nodemail:${username}`, 'expire') if(new Date().getTime()>saveExpire){ ctx.body={ code:-1, msg:'验证码已过期，请重试' } return }

1. 通过以上4关，就可以将信息写入数据库了，注意是异步写入

const newUser = await UserModel.create({ username, password, email })

1. 判断写入结果，并调用登录接口再次验证（登录接口在后面写，所以这里可以先略过这个验证，调试完写好登录了再回头加上）注册是否成功，并返回信息

if(newUser){ const result = await axios.post('/users/signin',{username,password}); if(result.data&&result.data.code===0){ ctx.body={ code:0, msg:'注册成功！' } }else{ console.log('信息写入数据库但登录验证未成功',result.data.msg) ctx.body={ code:-1, msg:result.data.msg } } }else{ ctx.body={ code:-1, msg:'注册失败！' } }

1. 必须在页面配置mongoose，进行数据库连接

import mongoose from 'mongoose' import dbConfig from './dbs/config' …… // 在start()之前连接 mongoose.connect(dbConfig.dbs,{ useNewUrlParser:true })

1. 前端收到数据后写入error信息中展示出来。

.then(({status,data})=>{ if(status===200&&data!==0){ this.error = data.msg } })

 

说明

1. 注册数据写入数据库完成后，进行了一次登录验证，成功后才返回注册成功。