一、修改验证方法
1、修改验证器
loginRules: {username: [{required: true, trigger: 'blur', validator: validateUsername}],password: [{required: true, trigger: 'blur', validator: validatePassword}],captcha_code: [{required: true, trigger: 'blur', validator: validateCode}]
}2、修改引入验证方式
import {validCode, validEmail, validPassword} from '@/utils/validate'3、修改验证方法
// 验证用户名是否合法
const validateUsername = (rule, value, callback) => {if (!validEmail(value)) {callback(new Error('请输入正确的账号'))} else {callback()}
}
// 验证密码是否合法
const validatePassword = (rule, value, callback) => {const pwRel = validPassword(value)if (pwRel !== true) {callback(new Error(pwRel))} else {callback()}
}
// 验证验证码是否合法
const validateCode = (rule, value, callback) => {if (!validCode(value)) {callback(new Error('请输入正确的验证码'))} else {callback()}
}二、修改登录方法
1、查看后端api登录接口，需要的参数
a、登录账号：username
b、登录密码：password
c、验证码值：captcha_code
d、登录时间：login_time
2、引入信息提示
a、在根目录下src文件夹下utils文件夹下添加信息提示文件并命名为message.js
b、添加三个方法(正确提示、警告提示、错误提示)
//信息提示
import message from 'element-ui'//正确信息
export function succ(msg) {message.Message.success({message: msg,type: 'success',duration: 1 * 1000})
}//警告信息
export function warn(msg) {message.Message.warning({message: msg,type: 'warning',duration: 2 * 1000})
}//错误信息
export function err(msg) {message.Message.error({message: msg,type: 'error',duration: 3 * 1000})
}3、开发登录接口
a、引入提示代码
import { succ, warn, err } from '@/utils/message'b、安装日期组件
npm install moment --savec、引入日期组件
import moment from 'moment'd、修改登录请求，也就是登录请求前的参数传输
this.loginForm.login_time = moment().format('YYYY-MM-DD HH:MM:SS')
this.loading = true
this.$store.dispatch('user/login', this.loginForm).then(() => {this.$router.push({path: this.redirect || '/', query: this.otherQuery})this.loading = false
}).catch(() => {this.loading = false
})
this.changeCode()e、修改登录方法
在根目录下src文件夹下store文件夹下modules文件夹下的user.js文件中，找到login方法，修改如下
// user login
login({commit}, userInfo) {const {username, password, captcha_code, login_time} = userInforeturn new Promise((resolve, reject) => {login({username: username.trim(),password: password.trim(),captcha_code: captcha_code.trim(),login_time: login_time.trim()}).then(response => {const {data} = responsecommit('SET_TOKEN', data.token)setToken(data.token)resolve()}).catch(error => {reject(error)})})
},f、修改请求函数
// 登录
export function login(data) {return request({url: '/login/do_login',method: 'post',data})
}三、提前说明
其实到此还只是做好了登录，还没有做请求头及个人中心开发。明天将解决请求头的开发及个人中心开发并附带登录的所有源码。
