这两天看花裤衩大大的手摸手系列,使用vue+element+vuex+axios实现了一个后台模板(项目地址),在阅读源码的过程中收益匪浅,以下做一些笔记。(由于是学习大大项目的思想,所以略去了很多大大的代码)。
这里只是做一个登陆页面,然后能提交数据给后台并能接收数据,暂时没有做路由守卫同跳转。
首先配置并安装好好所需要的main.js
import Vue from 'vue'
import App from './App'
import router from './router' //路由
import './assets/styles/reset.css'//初始化css样式
Vue.config.productionTip = false
import Element from 'element-ui' //引入element-ui
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(Element)
import store from '@/store/index' //vuex
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
store,
components: { App },
template: '<App/>'
})
配置路由router/index.js
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
component: () => import('@/views/login/index'),
hidden: true
},
]
})
登陆页面:views/login/index.vue
1、这里自定义校验规则,在el-form里定义:rules
并传入约定的验证规则,并将 Form-Item 的 prop 属性设置为需校验的字段名,然后在data里声明规则,这里定义表单都是必须填写,当鼠标失去焦点,即鼠标点了其他地方会触发,校验器为自定义行数,自定义函数最后调用callback()。如:
data(){
const validateUsername = (rule,value,callback)=>{..some code... callback();}
const validatePassword= (rule,value,callback)=>{..some code... callback();}//自定义校验规则,传入3个参数value表示要校验的数据。
return {
loginRules:{
username: [{required:true,trigger:'blur',validator:validateUsername}],//这里表示必填表单,失去焦点时触发,检验器为:validateUsername
password: [{required:true,trigger:'blur',validator:validatePassword}]
},
}
}
2、当点击按钮是做两个工作,一是判断表单是否已经完成校验,二是发送请求。这里为了方便存储并调用用户信息,使用vuex管理用户状态,使用this.$store.dispatch(这里现在main.js配置好store)方法传给vuex的actions。
在methods里通过 this.$refs.loginForm.validate(valid=>{})
校验表单是否验证正确,若 验证正确valid=true,若验证失败valid=false
代码如下:
<template>
<div class="login-container">
<el-form :model="loginForm" :rules="loginRules" ref="loginForm" class="login-form" auto-complate="on">
<div class="title-container">
<h3 class="title">后台登录</h3>
</div>
<el-form-item prop="username">
<el-input
v-model="loginForm.username"
placeholder="用户名"
name="username"
type="text"
auto-complete="on"
/>
</el-form-item>
<el-form-item prop="password">
<el-input
v-model="loginForm.password"
placeholder="密码"
name="password"
type="text"
auto-complete="on"
/>
</el-form-item>
<el-form-item>
<el-button type="primary" style="width:100%;margin-bottom:30px;" @click.native.prevent="handleLogin">登录</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
export default {
data(){
cons