Skip to content

Commit a9a0e79

Browse files
coderlwcoderlw
committed
login已完成
1 parent 70fe4e0 commit a9a0e79

File tree

6 files changed

+192
-103
lines changed

6 files changed

+192
-103
lines changed

‎package-lock.json

Lines changed: 79 additions & 81 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212
"core-js": "^3.6.5",
1313
"element-ui": "^2.15.6",
1414
"vue": "^2.6.11",
15-
"vue-router": "^3.2.0"
15+
"vue-router": "^3.0.7"
1616
},
1717
"devDependencies": {
1818
"@vue/cli-plugin-babel": "~4.5.0",

‎src/assets/img/heima.png

5.83 KB
Loading

‎src/components/Home.vue

Lines changed: 89 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,101 @@
11
<template>
2-
<div>
3-
Home
2+
<div class="home-container">
3+
<el-container class="home-container">
4+
<el-header height="75px">
5+
<div class="logo">
6+
<img src="~assets/img/heima.png" alt="">
7+
<span class="title">黑马电商管理系统</span>
8+
</div>
9+
<span type="info" class="out" @click="loginOut">退出</span>
10+
</el-header>
11+
<el-container>
12+
<el-aside width="200px">
13+
<el-menu default-active="2" background-color="#1a1f26" text-color="#fff" active-text-color="#ffd04b">
14+
<el-submenu index="1">
15+
<!-- 一级菜单 -->
16+
<template slot="title">
17+
<i class="el-icon-location"></i>
18+
<span>导航一</span>
19+
</template>
20+
<el-menu-item index="1-1"><i class="el-icon-location"></i>选项1</el-menu-item>
21+
<el-menu-item index="1-2"><i class="el-icon-location"></i>选项2</el-menu-item>
22+
</el-submenu>
23+
<el-submenu index="1">
24+
<!-- 一级菜单 -->
25+
<template slot="title">
26+
<i class="el-icon-location"></i>
27+
<span>导航二</span>
28+
</template>
29+
<el-menu-item index="1-1">选项1</el-menu-item>
30+
<el-menu-item index="1-2">选项2</el-menu-item>
31+
</el-submenu>
32+
<el-submenu index="1">
33+
<!-- 一级菜单 -->
34+
<template slot="title">
35+
<i class="el-icon-location"></i>
36+
<span>导航三</span>
37+
</template>
38+
<el-menu-item index="1-1">选项1</el-menu-item>
39+
<el-menu-item index="1-2">选项2</el-menu-item>
40+
</el-submenu>
41+
<el-submenu index="1">
42+
<!-- 一级菜单 -->
43+
<template slot="title">
44+
<i class="el-icon-location"></i>
45+
<span>导航四</span>
46+
</template>
47+
<el-menu-item index="1-1">选项1</el-menu-item>
48+
<el-menu-item index="1-2">选项2</el-menu-item>
49+
</el-submenu>
50+
</el-menu>
51+
</el-aside>
52+
<el-main>Main</el-main>
53+
</el-container>
54+
</el-container>
455
</div>
556
</template>
657

758
<script>
859
export default {
960
name: 'Home',
10-
61+
methods: {
62+
loginOut() {
63+
window.sessionStorage.clear();
64+
this.$router.push('/login');
65+
this.$message.success('退出成功');
66+
}
67+
}
1168
};
1269
</script>
1370

1471
<style scoped>
72+
.home-container {
73+
height: 100%;
74+
}
75+
.el-header {
76+
display: flex;
77+
justify-content: space-between;
78+
align-items: center;
79+
background-color: #1668c5;
80+
}
81+
82+
.logo {
83+
display: flex;
84+
align-items: center;
85+
}
86+
.title {
87+
line-height: 30px;
88+
font-size: 25px;
89+
color: #fff;
90+
padding-left: 10px;
91+
}
92+
.out {
93+
color: #fff;
94+
}
95+
.el-aside {
96+
background-color: #1a1f26;
97+
}
98+
.el-main {
99+
background-color: #eaedf1;
100+
}
15101
</style>

‎src/components/Login.vue

Lines changed: 15 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -5,9 +5,9 @@
55
<img src="../assets/img/avatar.png" alt="" />
66
</div>
77
<div class="login_form">
8-
<el-form :modle="loginForm" :rules="loginFormRules" ref="loginFormRef">
8+
<el-form :model="loginForm" :rules="loginFormRules" ref="loginFormRef">
99
<el-form-item prop="username">
10-
<el-input v-model="loginForm.username" prefix-icon="iconfont icon-yonghu" @blur="aaa"></el-input>
10+
<el-input v-model="loginForm.username" prefix-icon="iconfont icon-yonghu"></el-input>
1111
</el-form-item>
1212
<el-form-item prop="password">
1313
<el-input v-model="loginForm.password" prefix-icon="iconfont icon-tianchongxing-" type="password"></el-input>
@@ -29,43 +29,40 @@ export default {
2929
return {
3030
// 表单中的数据绑定对象
3131
loginForm: {
32-
username: '123',
33-
password: 'aaaa'
32+
username: 'admin',
33+
password: '123456'
3434
},
3535
// 表单中的验证规则对象
3636
loginFormRules: {
3737
username: [
38-
{ required: true, message: '请输入活动名称', trigger: 'blur' },
39-
{ min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
38+
{ required: true, message: '请输入用户名', trigger: 'blur' },
39+
{ min: 3, max: 10, message: '长度在3到10个字符', trigger: 'blur' }
4040
],
4141
password: [
4242
{ required: true, message: '请输入密码', trigger: 'blur' },
43-
{ min: 3, max: 10, message: '密码长度为3到12个字符串', trigger: 'blur' }
43+
{ min: 3, max: 12, message: '密码长度为3到12个字符串', trigger: 'blur' }
4444
]
4545
}
4646
}
4747
},
4848
methods: {
4949
login() {
5050
this.$refs.loginFormRef.validate(async (valid) => {
51-
console.log(valid);
5251
if (!valid) return;
53-
const { data } = await this.$axios.post('/login', this.loginForm);
54-
console.log(data);
55-
if (data.meta.status !== 200) return this.$message.error('登录失败，请重新登录');
52+
const { data: res } = await this.$axios.post('/login', this.loginForm);
53+
console.log(res);
54+
if (res.meta.status !== 200) return this.$message.error('登录失败，请重新登录');
5655
this.$message.success('恭喜你,登陆成功~');
57-
56+
window.sessionStorage.setItem("token", res.data.token);
57+
this.$router.push('/home');
5858
})
5959
},
6060
resetLoginForm() {
6161
this.$refs.loginFormRef.resetFields();
6262
},
63-
aaa(e) {
64-
console.log(this.loginForm.username);
65-
this.loginForm.username = e.target.value;
66-
this.$router.push('/home')
67-
}
68-
}
63+
64+
},
65+
6966
};
7067
</script>
7168

‎src/main.js

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,14 @@ Vue.prototype.$message = message;
1818

1919
Vue.use(ElementUI)
2020
Vue.config.productionTip = false
21+
// 导航守卫控制登录权限
22+
router.beforeEach((to, form, next) => {
23+
if (to.path === '/login') return next();
24+
const tokenStr = window.sessionStorage.getItem('token');
25+
if (!tokenStr) return next('/login');
26+
next();
27+
})
28+
2129

2230
new Vue({
2331
router,

0 commit comments

Comments
 (0)