vue实战之vue后台管理系统（二）之登录页面
Login.vue页面
elementUI
Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库.
element官网：http://element-cn.eleme.io/#/zh-CN
elementUI的快速使用：http://element-cn.eleme.io/#/zh-CN/component/quickstart
登录页面代码分析（Login.vue）
<template>
<el-form :model="ruleForm2" :rules="rules2" ref="ruleForm2" label-position="left" label-width="0px" class="demo-ruleForm login-container">
<h3 class="title">系统登录h3>
<el-form-item prop="account">
<el-input type="text" v-model="ruleForm2.account" auto-complete="off" placeholder="账号">el-input>
el-form-item>
<el-form-item prop="checkPass">
<el-input type="password" v-model="ruleForm2.checkPass" auto-complete="off" placeholder="密码">el-input>
el-form-item>
<el-checkbox v-model="checked" checked class="remember">记住密码el-checkbox>
<el-form-item style="width:100%;">
<el-button type="primary" style="width:100%;" @click.native.prevent="handleSubmit2" :loading="logining">登录el-button>
el-form-item>
el-form>
template>
import { requestLogin } from '../api/api';
//import NProgress from 'nprogress'
export default {
data() {
return {
logining: false,
ruleForm2: {
account: 'admin',
checkPass: '123456'
},
rules2: {
account: [
{ required: true, message: '请输入账号', trigger: 'blur' },
//{ validator: validaePass }
],
checkPass: [
{ required: true, message: '请输入密码', trigger: 'blur' },
//{ validator: validaePass2 }
]
},
checked: true
};
},
methods: {
handleReset2() {
this.$refs.ruleForm2.resetFields();
},
handleSubmit2(ev) {
var _this = this;
this.$refs.ruleForm2.validate((valid) => {
if (valid) {
//_this.$router.replace('/table');
this.logining = true;
//NProgress.start();
var loginParams = { username: this.ruleForm2.account, password: this.ruleForm2.checkPass };
requestLogin(loginParams).then(data => {
this.logining = false;
//NProgress.done();
let { msg, code, user } = data;
if (code !== 200) {
this.$message({
message: msg,
type: 'error'
});
} else {
sessionStorage.setItem('user', JSON.stringify(user));
this.$router.push({ path: '/table' });
}
});
} else {
console.log('error submit!!');
return false;
}
});
}
}
}
:model 表单数据对象 用于绑定数据（即date与绑定的model同名的data数据）
还需要在对应的表单中，确定赋值（v-model=“ruleForm2.checkPass”），即可。
prop 传入 Form 组件的 model 中的字段
rules 表单验证规则
rules2: {
account: [
{ required: true, message: '请输入账号', trigger: 'blur' },
//{ validator: validaePass }
],
checkPass: [
{ required: true, message: '请输入密码', trigger: 'blur' },
//{ validator: validaePass2 }
]
},
参数说明：required 是否必填，如不设置，则会根据校验规则自动生成；message:是提示的内容；trigger：是什么事件触发。
这段代码的含义：当输入为空的情况下，当对应的输入框失去焦点时，会显示报错信息（即message的内容）。
ref 被用来给元素或者子组件注册引用信息。是vue中的属性，el中没得，相关文档：https://www.cnblogs.com/xumqfaith/p/7743387.html
label-position 表单域标签的位置，如果值为 left 或者 right 时，则需要设置 label-width
auto-complete on 默认。规定启用自动完成功能。off 规定禁用自动完成功能。
http://www.w3school.com.cn/tags/att_input_autocomplete.asp
@click.native.prevent vue 里面所有键盘事件都是需要加.native才能生效，如果在当前按钮之前绑定过键盘点击事件，后面的按钮都需要加.native才能生效。prevent是阻止冒泡。
loading 加载数据时显示效果
表单验证： this.$refs.ruleForm2.validate((valid)=>{.....}); //不是特别理解
验证form上的添加的表单验证是否正确。
if (valid) {
//_this.$router.replace('/table');
this.logining = true; //显示加载数据效果
//NProgress.start();
var loginParams = { username: this.ruleForm2.account, password: this.ruleForm2.checkPass }; //读取表单数据
requestLogin(loginParams).then(data => { //请求数据
this.logining = false; //关闭数据加载效果
//NProgress.done();
let { msg, code, user } = data; //读取返回的值
if (code !== 200) { //返回码为200时，报错
this.$message({
message: msg,
type: 'error'
});
} else { //否则（即返回码为200时）
sessionStorage.setItem('user', JSON.stringify(user));
this.$router.push({ path: '/table' });
}
});
} else {
console.log('error submit!!');
return false;
}
关于sessionStorage： https://www.cnblogs.com/polk6/p/5512979.html
sessionStorage是HTML5新增的会话存储对象，用于保存保存同一窗口（标签页的数据），在关闭窗口或标签页的时候会删除这些数据。
sessionStorage.setItem(string key, string value) 该方法接受一个键名(key)和值(value)作为参数，将键值对添加到存储中；如果键名存在，则更新其对应的值。value的值必须是字符串，如果不是也会自动转换成字符串。
sessionStorage也可存储Json对象：存储时，通过JSON.stringify()将对象转换为字符串格式；读取时，通过JSON.parse()将字符串转换回对象。
$router.push 编程式导航，同
编程式导航：https://router.vuejs.org/zh/guide/essentials/navigation.html