Skip to content

Commit e6537e5

Browse files
author
12345678
committed
完善登录流程及构建主界面
1 parent 181c9a3 commit e6537e5

File tree

6 files changed

+350
-43
lines changed

6 files changed

+350
-43
lines changed

‎src/App.vue‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
<template>
22
<div id="app">
3-
<img src="./assets/logo.png">
43
<router-view/>
54
</div>
65
</template>

‎src/http/interface.js‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,11 @@
22

33
import axios from './axios'
44
//单独导出
5-
export const login=()=>{
5+
export const login=data=>{
66
return axios({
77
url:'/login',
8-
method:'get'
8+
method:'post',
9+
data
910
})
1011
}
1112
export const getUser=()=>{

‎src/mock/modules/login.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ export function login(){
44
return{
55
//isOpen:false,
66
url:'http://localhost:8080/login',
7-
type:'get',
7+
type:'post',
88
data:{
99
'msg':'success',
1010
'code':0,

‎src/router/index.js‎

Lines changed: 24 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import NotFound from '@/views/404'
77

88
Vue.use(Router)
99

10-
export default new Router({
10+
const router = new Router({
1111
routes: [
1212
// {
1313
// path: '/',
@@ -31,3 +31,26 @@ export default new Router({
3131
}
3232
]
3333
})
34+
35+
router.beforeEach((to, from, next) => {
36+
// 登录界面登录成功之后，会把用户信息保存在会话
37+
// 存在时间为会话生命周期，页面关闭即失效。
38+
let user = sessionStorage.getItem('user');
39+
if(to.path == '/login'){
40+
// 如果是访问登录界面，如果用户会话信息存在，代表已登录过，跳转到主页
41+
if(user){
42+
next({path:'/'})
43+
}else{
44+
next()
45+
}
46+
}else{
47+
// 如果访问非登录界面，且户会话信息不存在，代表未登录，则跳转到登录界面
48+
if(!user){
49+
next({path:'/'})
50+
}else{
51+
next()
52+
}
53+
}
54+
})
55+
56+
export default router

‎src/views/Home.vue‎

Lines changed: 240 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,42 +1,254 @@
11
<template>
2-
<div>
3-
<h4>Home Page</h4>
4-
<el-button type="primary" @click="testAxios()">测试axios调用</el-button>
5-
6-
<el-button type="warning" @click="getUser()">获取用户信息</el-button>
7-
<el-button type="danger" @click="getMenu()">获取菜单信息</el-button>
8-
</div>
2+
<el-row class="container">
3+
<el-col :span="24" class="header">
4+
<el-col :span="5" class="logo" :class="isCollapse?'logo-collapse-width':'logo-width'">
5+
<img :src="this.logo" /> {{isCollapse?sysName:sysName}}
6+
</el-col>
7+
<el-col :span="1">
8+
<div class="tools" @click.prevent="collapse">
9+
<i class="el-icon-menu"></i>
10+
</div>
11+
<!-- <i class="fa fa-align-justify"></i> -->
12+
</el-col>
13+
<el-col :span="13">
14+
<div class="hearNavBar">
15+
<el-menu :default-active="activeIndex" class="el-menu-demo" background-color="#4b5f6e" text-color="#fff"
16+
active-text-color="#ffd04b" mode="horizontal" @select="handleSelectHearNavBar">
17+
<el-menu-item index="1">首页</el-menu-item>
18+
<el-menu-item index="2">消息中心</el-menu-item>
19+
<el-menu-item index="3">订单管理</el-menu-item>
20+
</el-menu>
21+
</div>
22+
</el-col>
23+
<el-col :span="5" class="userinfo">
24+
<el-dropdown trigger="hover">
25+
<span class="el-dropdown-link userinfo-inner"><img :src="this.userAvatar" /> {{username}}</span>
26+
<el-dropdown-menu slot="dropdown">
27+
<el-dropdown-item>我的消息</el-dropdown-item>
28+
<el-dropdown-item>设置</el-dropdown-item>
29+
<el-dropdown-item divided @click.native="logout">退出登录</el-dropdown-item>
30+
</el-dropdown-menu>
31+
</el-dropdown>
32+
</el-col>
33+
</el-col>
34+
<el-col :span="24" class="main">
35+
<aside class="aside">
36+
<!--导航菜单-->
37+
<el-menu default-active="1-3" class="el-menu-vertical-demo" @open="handleopen" @close="handleclose" @select="handleselect" :collapse="isCollapse">
38+
<el-submenu index="1">
39+
<template slot="title">
40+
<i class="el-icon-location"></i>
41+
<span slot="title">导航一</span>
42+
</template>
43+
<el-menu-item index="1-1">选项1</el-menu-item>
44+
<el-menu-item index="1-2">选项2</el-menu-item>
45+
<el-menu-item index="1-3">选项3</el-menu-item>
46+
</el-submenu>
47+
<el-menu-item index="2">
48+
<i class="el-icon-menu"></i>
49+
<span slot="title">导航二</span>
50+
</el-menu-item>
51+
<el-menu-item index="3" disabled>
52+
<i class="el-icon-document"></i>
53+
<span slot="title">导航三</span>
54+
</el-menu-item>
55+
<el-menu-item index="4">
56+
<i class="el-icon-setting"></i>
57+
<span slot="title">导航四</span>
58+
</el-menu-item>
59+
</el-menu>
60+
</aside>
61+
<section class="content-container">
62+
<div class="grid-content bg-purple-light">
63+
<el-col :span="24" class="breadcrumb-container">
64+
<el-breadcrumb separator="/" class="breadcrumb-inner">
65+
<el-breadcrumb-item v-for="item in $route.matched" :key="item.path">
66+
{{ item.name }}
67+
</el-breadcrumb-item>
68+
</el-breadcrumb>
69+
</el-col>
70+
<el-col :span="24" class="content-wrapper">
71+
<transition name="fade" mode="out-in">
72+
<router-view></router-view>
73+
</transition>
74+
</el-col>
75+
</div>
76+
</section>
77+
</el-col>
78+
</el-row>
979
</template>
1080
<script>
1181
import axios from 'axios'
1282
import mock from '@/mock/index.js'
1383
export default {
1484
name:'Home',
85+
data() {
86+
return {
87+
isCollapse: false,
88+
sysName: "劫",
89+
username: "冲击之刃",
90+
userAvatar: "",
91+
logo: "",
92+
activeIndex: '1'
93+
};
94+
},
1595
methods:{
16-
testAxios(){
17-
axios.get('http://localhost:8080').then(function(res){
18-
alert(res.data);
19-
}).catch(function(res){
20-
alert(res)
21-
})
22-
},
23-
getUser(){
24-
axios.get('http://localhost:8080/user').then(function(res){
25-
alert(JSON.stringify(res.data));
26-
}).catch(function(res){
27-
alert(res);
28-
})
29-
},
30-
getMenu(){
31-
axios.get('http://localhost:8080/menu').then(function(res){
32-
alert(JSON.stringify(res.data));
33-
}).catch(function(res){
34-
alert(res);
35-
})
96+
handleopen() {
97+
console.log('handleopen');
98+
},
99+
handleclose() {
100+
console.log('handleclose');
101+
},
102+
handleselect(a, b) {
103+
console.log('handleselect');
104+
},
105+
handleSelectHearNavBar(key, keyPath) {
106+
console.log(key, keyPath)
107+
},
108+
//折叠导航栏
109+
collapse(){
110+
this.isCollapse=!this.isCollapse;
111+
},
112+
//退出登录
113+
logout(){
114+
var _this=this;
115+
this.$confirm('确认退出吗？','提示',{
116+
type:'warning'
117+
}).then(()=>{
118+
sessionStorage.removeItem('user');
119+
this.$router.push('/login');
120+
}).catch(()=>{});
121+
}
122+
},
123+
mounted(){
124+
this.sysName='暗影';
125+
// this.logo=require('@/assets/login.png');
126+
var user=sessionStorage.getItem('user');
127+
if(user){
128+
this.userName=user;
129+
// this.userAvatar=require('@/assets/user.png');
36130
}
37131
}
38132
}
39133
</script>
40134
<style scoped lang='scss'>
41-
135+
.container {
136+
position: absolute;
137+
top: 0px;
138+
bottom: 0px;
139+
left: 0px;
140+
right: 0px;
141+
width: 100%;
142+
.header {
143+
height: 60px;
144+
line-height: 60px;
145+
background: #4b5f6e;
146+
color: #fff;
147+
.userinfo {
148+
text-align: right;
149+
padding-right: 30px;
150+
float: right;
151+
.userinfo-inner {
152+
font-size: 20px;
153+
cursor: pointer;
154+
color: #fff;
155+
img {
156+
width: 40px;
157+
height: 40px;
158+
border-radius: 10px;
159+
margin: 10px 0px 10px 10px;
160+
float: right;
161+
}
162+
}
163+
}
164+
.logo {
165+
height: 60px;
166+
font-size: 22px;
167+
padding-left: 0px;
168+
padding-right: 0px;
169+
border-color: rgba(238, 241, 146, 0.5);
170+
border-right-width: 1px;
171+
border-right-style: solid;
172+
background: #4b5f6e;
173+
text-align: left;
174+
img {
175+
width: 40px;
176+
height: 40px;
177+
border-radius: 0px;
178+
margin: 10px 10px 10px 10px;
179+
float: left;
180+
}
181+
.txt {
182+
color: #fff;
183+
}
184+
}
185+
.logo-width {
186+
width: 230px;
187+
}
188+
.logo-collapse-width {
189+
width: 65px;
190+
}
191+
.tools {
192+
padding-left: 10px;
193+
padding-right: 10px;
194+
text-align: center;
195+
width: 40px;
196+
height: 60px;
197+
line-height: 60px;
198+
cursor: pointer;
199+
}
200+
.hearNavBar {
201+
background: #4b5f6e;
202+
padding: 0px 0px;
203+
width: 100%;
204+
height: 60px;
205+
line-height: 60px;
206+
font-size: 29px;
207+
cursor: pointer;
208+
}
209+
}
210+
.main {
211+
display: flex;
212+
position: absolute;
213+
top: 60px;
214+
bottom: 0px;
215+
overflow: hidden;
216+
aside {
217+
flex: 0 0 230px;
218+
width: 230px;
219+
.el-menu {
220+
height: 100%;
221+
text-align: left;
222+
}
223+
}
224+
.content-container {
225+
// background: #f1f2f7;
226+
flex: 1;
227+
// overflow-y: scroll;
228+
padding: 0px;
229+
.breadcrumb-container {
230+
height: 28px;
231+
background: #fff;
232+
border-color: rgba(38, 86, 114, 0.2);
233+
border-bottom-width: 1px;
234+
border-bottom-style: solid;
235+
background: rgba(99, 138, 161, 0.2);
236+
.breadcrumb-inner {
237+
padding-top: 5px;
238+
padding-bottom: 5px;
239+
padding-left: 5px;
240+
text-align: left;
241+
font-size: 18px;
242+
width: 100%;
243+
height: 100%;
244+
float: left;
245+
}
246+
}
247+
.content-wrapper {
248+
background-color: #fff;
249+
box-sizing: border-box;
250+
}
251+
}
252+
}
253+
}
42254
</style>

0 commit comments

Comments
 (0)