群控系统服务端开发模式-应用开发-前端登录接口开发

一、修改验证方法

        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 --save

                c、引入日期组件

import moment from 'moment'

                d、修改登录请求，也就是登录请求前的参数传输

this.loginForm.login_time = moment().format('YYYY-MM-DD HH:MM:SS')this.loading = truethis.$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 loginlogin({commit}, userInfo) {    const {username, password, captcha_code, login_time} = userInfo    return 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} = response            commit('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    })}

三、提前说明

        其实到此还只是做好了登录，还没有做请求头及个人中心开发。明天将解决请求头的开发及个人中心开发并附带登录的所有源码。