发表于： 2019-12-03 23:57:02
0 1110
今天完成的事情：做方案设计，后台Login页面和Home页的制作
明天计划的事情：
遇到的问题：
地区选择的三层联动选择使用V - Distpicker发现效果不是很好，明天手动写一下
收获：
<template>
<el-card class="login_box">
<!-- 标题 -->
<div class="loginTitle">萝卜多后台管理</div>
<el-form
ref="loginFormRef"
:rules="loginFormRules"
:model="loginForm"
label-width="0px"
class="login_form"
>
<!-- 登录名 -->
<el-form-item prop="name">
<el-input v-model="loginForm.name" prefix-icon="el-icon-user" />
</el-form-item>
<!-- 密码 -->
<el-form-item prop="pwd">
<el-input v-model="loginForm.pwd" prefix-icon="el-icon-lock" type="pwd" />
</el-form-item>
<!-- 按钮 -->
<el-form-item class="btns">
<el-button type="primary" @click="login" class="loginBtn">登录</el-button>
</el-form-item>
</el-form>
</el-card>
</template>
<script>
// import qs from "qs";
export default {
data() {
return {
errorMessage:'',
// 这是登录表单数据绑定对象
loginForm: {
name: "admin",
pwd: "123456"
},
// 这是表单验证数据
loginFormRules: {
name: [
// 验证用户名
{ required: true, message: "请输入用户名", trigger: "blur" },
{ min: 3, max: 10, message: "长度在 3 到 10 个字符", trigger: "blur" }
],
pwd: [
// 验证密码
{ required: true, message: "请输入用户名", trigger: "blur" },
{ min: 6, max: 15, message: "长度在 6 到 15 个字符", trigger: "blur" }
]
}
};
},
// 生命周期 - 创建完成（访问当前this实例）
created() {},
// 生命周期 - 挂载完成（访问DOM元素）
mounted() {},
methods: {
login() {
this.$refs.loginFormRef.validate(valid => {
if (!valid) return;
this.$api.login(this.loginForm).then(res => {
console.log(res);
if (res.code === 0) {
window.sessionStorage.setItem("token", "token");
this.$store.userName = res.data.manager.name
this.$store.userRole = res.data.role.name
this.$router.push("/welcome");
}else {
this.$message(res.message)
}
});
// this.$axios
// .post("/api/a/login", qs.stringify(this.loginForm))
// .then(res => {
// console.log(res.data);
// if (res.data.code === 0) {
// window.sessionStorage.setItem("token", "token");
// // this.$router.push("/welcome");
// }
// });
});
}
}
};
返回列表
评论