1、client/src/views下新建login.vue文件
<template>
<div class="login">
<section class="form_container">
<div class="manage_tip">
<span class="title">在线后台管理系统</span>
<el-form
:model="loginUser"
:rules="rules"
ref="loginForm"
label-width="60px"
class="loginForm"
>
<el-form-item label="邮箱" prop="email">
<el-input v-model="loginUser.email" placeholder="请输入email"></el-input>
</el-form-item>
<el-form-item label="密码" prop="password">
<el-input type="password" v-model="loginUser.password" placeholder="请输入密码"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" class="submit_btn" @click="submitForm('loginForm')">登录</el-button>
</el-form-item>
<div class="tiparea">
<p>
还没有账号?现在
<router-link to="/register">注册</router-link>
</p>
</div>
</el-form>
</div>
</section>
</div>
</template>
<script>
export default {
name: "login",
components: {},
data() {
return {
loginUser: {
email: "",
password: "",
},
rules: {
email: [
{
type: "email",
required: true,
message: "邮箱格式不正确",
trigger: "blur"
}
],
password: [
{
required: true,
message: "密码不能为空",
trigger: "blur"
},
{
min: 6,
max: 30,
message: "长度在6到30之间",
trigger: "blur"
}
]
}
};
},
methods: {
submitForm(formName) {
this.$refs[formName].validate(valid => {
if (valid) {
this.$axios
.post("/api/users/login", this.loginUser)
.then(res => {
console.log(res);
})
.catch(err => {
console.log(err);
});
// 登录成功,跳转
this.$router.push('/index');
} else {
console.log("error submit!!");
return false;
}
});
}
}
};
</script>
<style scoped>
.login {
position: relative;
width: 100%;
height: 100%;
background: url(../assets/bg.jpg) no-repeat center center;
background-size: 100% 100%;
}
.form_container {
width: 370px;
height: 210px;
position: absolute;
top: 10%;
left: 34%;
padding: 25px;
border-radius: 5px;
text-align: center;
}
.form_container .manage_tip .title {
font-family: "Microsoft YaHei";
font-weight: bold;
font-style: 26px;
color: #fff;
}
.loginForm {
margin-top: 20px;
background-color: #fff;
padding: 20px 40px 20px 20px;
border-radius: 5px;
box-shadow: 0px 5px 10px #cccc;
}
.submit_btn {
width: 100%;
}
.tiparea{
text-align: right;
font-size: 12px;
color: #333;
}
.tiparea p a{
color: #409eff;
}
</style>
2、设置路由
在client/src/router.js里面
-
引入:
import Login from './views/Login'
-
设置路径
{
path:'/login',
name:'login',
component:Login
}
3、修改login.vue
- 把token进行处理,存储到localstorage里面
submitForm(formName) {
this.$refs[formName].validate(valid => {
if (valid) {
this.$axios
.post("/api/users/login", this.loginUser)
.then(res => {
// token
const {token} = res.data;
// 存储到localstorage
localStorage.setItem("eleToken",token);
// 登录成功,跳转
this.$router.push('/index');
})
.catch(err => {
console.log(err);
});
} else {
console.log("error submit!!");
return false;
}
});
}
-
测试token
打开浏览器,进入login页,进入开发者模式,打开localstorage,输入正确的邮箱和密码后点击登录,发现存入localstorage成功。
下一节会对token进行过期处理。
网友评论