vue后台管理系统-登录

在程序应用组件App.vue中添加Login组件引入Login遵循esModule规范 import 并在暴露的接口中注册login组件，在views文件夹下创建Login.vue文件，若要导入字体图标样式在main中导入

el-form：定义label-width表单域标签的宽度

el-form-item：label 定义标签文本内容

el-button：type 类型

el-input 定义提示信息placeholder

提交校验 v-model 绑定el-input数据通常为了方便给一个命名空间打点使用，在el-form-item props接收命名空间

在下面script暴露接口暴露静态数据data(){return }中返回校验对象中包含账户和密码，并定义rules校验规则对象例如require：true是必填的 validator是校验方法

校验方法可以复用将其提出来单独创建一个校验方法文件，我们将其命名为validate.js文件在Login.vue文件中import引用用于validator做校验方法的

登录校验就是给el-input绑定点击事件，点击事件的方法定义在暴露接口的methods当中定义，为 el-form 定义ref 并命名，点击事件传递ref的名称，执行methods当中的方法

methods中方法获取ref对应的组件执行validate方法其中有一个valida对象，如果为真，因为异步接口对应store里面的异步消息队列actions，发送请求使用axios ，所以需要在main中引入axios并安装axios ，要安装到原型中 Vue.prototype = $http 但是我们是在store中发送异步消息，所以就是this.$store.dispatch(消息名称，传递消息)而不是直接this.$http,所以要store中订阅消息actions login(store, username)不能直接修改要发送请求，但是Store不是组件他没有axios，所以要引入axios，发送消息，判断状态码，发送同步消息并将login作为一个同步的语法将其改为同步的语法 async和await书写，没有login的接口直接假数据发送请求在同步消息中订阅 '更新名字'(state, username)第一个表示静态数据，所以要在state中定义username 在订阅中将state.username = username，登录之后我们希望跳转到首页去去就可以使用v-if和v-else在login和home首页组件中了，在router的入口文件中暴露接口 router实例化对象定义路由规则 path 为/ component: Home,引入Home.vue,并在App.vue中使用router-view路由占位符实现单页面应用程序，可以根据$store里面的静态数据state里面的username来判断显隐。但是这就出现一个问题他不能保持住状态

<template>
    <div class="login-view">
        
        <div class="form-container">
            
            
            
            <el-form :model="formData" :rules="rules" ref="form">
                <el-form-item prop="username">
                    <el-input placeholder="请输入用户名:" v-model="formData.username" prefix-icon="iconfont icon-yonghu">el-input>
                el-form-item>
                <el-form-item prop="password">
                    <el-input type="password" placeholder="请输入密码" v-model="formData.password" prefix-icon="iconfont icon-mima">el-input>
                el-form-item>
                <el-form-item class="btns">
                    <el-button type="success" @click="login('form')">登录el-button>
                el-form-item>
            el-form>
        div>
    div>
template>

import {username, password} from '@t/validate.js'
export default {    

    // 定义静态数据
    data() {
        return {
            // 校验对象
            formData: {
                username:'admin',
                password:'a123'
            },
            // 校验规则
            rules: {
                // 用户名
                username:[{trigger: 'blur', validator: username}],
                // 密码
                password:[{trigger: 'blur', validator: password}],
            }
        }
    },
    methods: {
        login(name) {
            // 获取组件
            this.$refs[name].validate(valid => {
                if(valid) {
                    // 发送请求
                    this.$store.dispatch('login', this.formData.username)
                }
            })

        }
    }
}

validate文件
// 暴露接口
export function username(obj, value, cb) {
    // console.log(111, arguments);
    // 用户名是4-8位字母数字下划线
    if (!/^\w{4,8}$/.test(value)) return cb(new Error(' 用户名是4-8位字母数字下划线'))

    // 成功也要执行cb
    cb();
}


// 暴露接口
export function password(obj, value, cb) {
    // 密码要包含字母和数字
    if(!/^[a-z].*[0-9]$|^[0-9].*[a-z]$/.test(value)) return cb(new Error('密码要包含字母和数字线'));

    // 验证通过
    cb();

}


// 暴露接口重复密码
export function repeat(oldPsw, type, obj, value, cb) {
    // console.log(arguments);
    // 判断是否输入内容
    if (!value) return cb(new Error('密码不能为空'));

    // 判断两次输入的密码是否一致
    if (oldPsw !== value) return cb(new Error('您两次输入的密码不一致'));

    // 执行成功
    cb();
}

store的index.html

// 引入Vue 
import Vue from 'vue';
// 引入vuex
import Vuex, {Store} from 'vuex';
// 引入axios
import axios from 'axios';
//安装
Vue.use(Vuex);

// 引入message
import {Message} from 'element-ui';

// 暴露接口
export default new Store({
    // 静态数据
    state:{
        // 用户名
        username: ''
    },
    // 同步消息队列
    mutations:{
        // 订阅消息
        updateUsername(state, username) {
            state.username = username;
        }
    },
    // 异步消息队列
    actions:{
        // 订阅消息
        async login(store, username) {
            
            // 发送消息
            let {data: res} = await axios.post('/login', {username}) 
            
            // 判断状态码
            if(res.errno) return Message({type: 'warning', message: res.msg })
            // 提交一个同步消息
            store.commit('updateUsername', username);

        },
        // 订阅消息
        async userInfo(store) {
            // 发送请求
           let {data: res} = await axios.get('/admin/userInfo');// 判断状态码
           if(res.errno) return Message({type: 'warning', message: res.msg })
           // 提交一个同步消息
           store.commit('updateUsername', res.data);


        }
    }

})

后台管理项目杂记

vue后台管理系统-登录

相关

标签