vue项目（2）--elem 表单验证、路由配置、登录逻辑

路由配置

elem表单验证

• html结构
  el-form中 ref是表单id rule是导出函数的验证规则 model是绑定的数据。
  el-form-item label 是名字 prop是父子间传值传给子组件，也就是把rule中的规则传给他,制定了校验规则名
  el-input 不说明了，
  this.$refs[formName].validate是组件封装好的函数，表单验证通过是true 否则false

<template>
<div class="login-container">
<!-- ref 相当于 id，:model 表单数据对象, label-width 表单域标签的的宽度 -->
<el-form
:rules="rules"
ref="form"
:model="form"
label-width="80px"
class="login-form"
>
<h2 class="login-title">管理系统</h2>
<el-form-item label="帐号" prop="username">
<el-input v-model="form.username" placeholder="请输入帐号"></el-input>
</el-form-item>
<el-form-item label="密码" prop="password">
<el-input
type="password"
v-model="form.password"
placeholder="请输入密码"
></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm('form')">登录</el-button>
<!-- 必须传表单名字-->
</el-form-item>
</el-form>
</div>
</template>
<script>
export default {
data() {
return {
form: {},
// 表单校验
rules: {
username: [
// 对应el-form-item 的 prop 值
{ required: true, message: "请输入有效帐号", trigger: "blur" }
],
password: [
{ required: true, message: "请输入有效密码", trigger: "blur" }
]
}
};
},
methods: {
// 注意：按钮上调用的函数名要一致 submitForm
submitForm(formName) {
this.$refs[formName].validate(valid => {
if (valid) {
alert("submit!");
} else {
console.log("error submit!!");
return false;
}
});
}
}
};
</script>

esaymock添加数据

登录逻辑

this.$refs[formName].validate(valid => {
if (valid) {
login(this.form.username, this.form.password).then(response => {
const resp = response.data;
console.log(
resp.code,
resp.message,
resp.data.token,
resp.code === 2000
);
if (resp.flag) {
// 通过，获取用户信息 异步请求
getUserInfo(resp.data.token).then(response => {
// 存入session中
const respUser = response.data;
if (respUser.flag) {
// 将信息保存到浏览器的 localStorage 中
localStorage.setItem(
"mgx-msm-user",
JSON.stringify(respUser.data)
); // 方便后面重新验证
localStorage.setItem("mgx-msm-token", resp.data.token); // 前往首页
this.$router.push("/");
} else {
// 获取信息失败, 弹出警告
this.$message({
message: respUser.message,
type: "warning"
});
}
});
} else {
// 未通过,弹出警告
this.$message({
message: resp.message,
type: "warning"
});
}
});
} else {
console.log("error submit!!");
return false;
}
});