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

一、修改验证方法

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

三、提前说明

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