后台管理系统Login 页面（部分）

重点了解：

validate

对整个表单进行校验的方法，参数为一个回调函数。该回调函数会在校验结束后被调用，并传入两个参数：是否校验成功和未通过校验的字段。若不传入回调函数，则会返回一个 promise

Function(callback: Function(boolean,

object))

required

是否必填，如不设置，则会根据校验规则自动生成

boolean

rules

表单验证规则

object

—

1.在最上层有三个div，第一个是给大的背景，第二个是给登录界面的上去样式，第三个div 是给图片

2.给最大的div ，login_container背景颜色及高度

3. 给登录界面的盒子响应的样式，宽高背景颜色等等

4.给头像图片样式

5.复制element 官网 , 并且给:model 命名：loginForm

6以下为方法：data（）{}

7.为methods的方法，如何axios 携带token ？sessionStorage.setItem("Authorization",Authorization)

思路：

1.在最上层有三个div，第一个是给大的背景，第二个是给登录界面的上去样式，第三个div 是给图片

 <div class="login_container"><div class="login_box"><!-- 头像 --><div class="avatar_box"><img src="../assets/logo.png" alt="" /></div><div>

2.给最大的div ，login_container背景颜色及高度

.login_container {background-color: #2b5b6b;height: 100%;
}

3. 给登录界面的盒子响应的样式，宽高背景颜色等等

.login_box {width: 450px;height: 300px;background: #fff;border-radius: 3px;position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);

4.给头像图片样式

  .avatar_box {height: 130px;width: 130px;border: 1px solid #eee;border-radius: 50%;padding: 10px;box-shadow: 0 0 10px #ddd;position: absolute;left: 50%;transform: translate(-50%, -50%);background-color: #fff;img {width: 100%;height: 100%;border-radius: 50%;background-color: #eee;}}
}

5.复制element 官网 , 并且给:model 命名：loginForm

：rules 命名为 loginFormRules

ref命名loginFormRef

注意：每个form 表单要给它相应的prop，和v-model 的双向绑定，

  <el-form:model="loginForm":rules="loginFormRules"ref="loginFormRef"class="login_form"><el-form-item prop="username"><el-input v-model="loginForm.username"></el-input></el-form-item><el-form-item prop="password"><el-input v-model="loginForm.password"></el-input></el-form-item><el-form-item><el-button type="primary" @click="login">提交</el-button><el-button type="info">重置</el-button></el-form-item></el-form>

6以下为方法：data（）{}

return 返回的为:model 命名的loginForm 里边写的是默认登录的数据

：rules 命名为 loginFormRules 的里边是判断语句

 data() {return {loginForm: {username: "admin",password: "123456",},loginFormRules: {username: [{ required: true, message: "用户名不能为空", trigger: "blur" },//判断长度{min: 2,max: 12,message: "用户名长度要在2到12个字符之间",trigger: "blur",},],password: [{ required: true, message: "密码不能为空", trigger: "blur" },{min: 6,max: 12,message: "密码长度要在6到16个字符之间",trigger: "blur",},],},};},

7.为methods的方法，如何axios 携带token ？sessionStorage.setItem("Authorization",Authorization)

  methods: {login() {this.$refs.loginFormRef.validate(async (valid) => {if (valid) {const { data: res } = await this.$http.post("Login", this.loginForm);console.log("res:", res);if (res.meta.status !== 200) return this.$message.error("登陆失败");this.$message.success("登陆成功");console.log(res.data.token);//window.sessionStorage.setItem("token", res.data.token);console.log(res.data.token);//将数据保存到sessionStoragewindow.sessionStorage.setItem("token", res.data.token);// this.$http.post("login", this.loginForm).then((res) => {//   console.log("res:", res);// });console.log(this.$route);this.$router.push("/home");console.log(this.$route);} else {console.log("格式不正确");}});},resetForm(formName) {this.$refs[formName].resetFields();},},

以下为整体代码：

<template><div class="login_container"><div class="login_box"><!-- 头像 --><div class="avatar_box"><img src="../assets/logo.png" alt="" /></div><div><el-form:model="loginForm":rules="loginFormRules"ref="loginFormRef"class="login_form"><el-form-item prop="username"><el-input v-model="loginForm.username"></el-input></el-form-item><el-form-item prop="password"><el-input v-model="loginForm.password"></el-input></el-form-item><el-form-item><el-button type="primary" @click="login">提交</el-button><el-button type="info">重置</el-button></el-form-item></el-form></div></div></div>
</template><script>
// @ is an alias to /src
// import HelloWorld from "@/components/HelloWorld.vue";export default {name: "Login",data() {return {loginForm: {username: "admin",password: "123456",},loginFormRules: {username: [{ required: true, message: "用户名不能为空", trigger: "blur" },//判断长度{min: 2,max: 12,message: "用户名长度要在2到12个字符之间",trigger: "blur",},],password: [{ required: true, message: "密码不能为空", trigger: "blur" },{min: 6,max: 12,message: "密码长度要在6到16个字符之间",trigger: "blur",},],},};},methods: {login() {this.$refs.loginFormRef.validate(async (valid) => {if (valid) {const { data: res } = await this.$http.post("Login", this.loginForm);console.log("res:", res);if (res.meta.status !== 200) return this.$message.error("登陆失败");this.$message.success("登陆成功");console.log(res.data.token);//window.sessionStorage.setItem("token", res.data.token);console.log(res.data.token);//将数据保存到sessionStoragewindow.sessionStorage.setItem("token", res.data.token);// this.$http.post("login", this.loginForm).then((res) => {//   console.log("res:", res);// });console.log(this.$route);this.$router.push("/home");console.log(this.$route);} else {console.log("格式不正确");}});},resetForm(formName) {this.$refs[formName].resetFields();},},components: {},
};
</script>
<style lang="less" scoped>
.login_container {background-color: #2b5b6b;height: 100%;
}
.login_box {width: 450px;height: 300px;background: #fff;border-radius: 3px;position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);.avatar_box {height: 130px;width: 130px;border: 1px solid #eee;border-radius: 50%;padding: 10px;box-shadow: 0 0 10px #ddd;position: absolute;left: 50%;transform: translate(-50%, -50%);background-color: #fff;img {width: 100%;height: 100%;border-radius: 50%;background-color: #eee;}}
}
.login_form {position: absolute;bottom: 0;width: 100%;padding: 0 20px;box-sizing: border-box;
}
.btns {display: flex;justify-content: flex-end;
}
</style>