Skip to content

Commit 190a74c

Browse files
author
12345678
committed
代码回退
1 parent e6537e5 commit 190a74c

File tree

4 files changed

+40
-349
lines changed

4 files changed

+40
-349
lines changed

‎src/App.vue‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
<template>
22
<div id="app">
3+
<img src="./assets/logo.png">
34
<router-view/>
45
</div>
56
</template>
@@ -19,4 +20,4 @@ export default {
1920
color: #2c3e50;
2021
margin-top: 60px;
2122
}
22-
</style>
23+
</style>

‎src/router/index.js‎

Lines changed: 2 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import NotFound from '@/views/404'
77

88
Vue.use(Router)
99

10-
const router = new Router({
10+
export default new Router({
1111
routes: [
1212
// {
1313
// path: '/',
@@ -30,27 +30,4 @@ const router = new Router({
3030
component: NotFound
3131
}
3232
]
33-
})
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
33+
})

‎src/views/Home.vue‎

Lines changed: 27 additions & 241 deletions
Original file line numberDiff line numberDiff line change
@@ -1,254 +1,40 @@
11
<template>
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>
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>
799
</template>
8010
<script>
8111
import axios from 'axios'
8212
import mock from '@/mock/index.js'
8313
export default {
8414
name:'Home',
85-
data() {
86-
return {
87-
isCollapse: false,
88-
sysName: "劫",
89-
username: "冲击之刃",
90-
userAvatar: "",
91-
logo: "",
92-
activeIndex: '1'
93-
};
94-
},
9515
methods:{
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');
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+
})
13036
}
13137
}
13238
}
13339
</script>
13440
<style scoped lang='scss'>
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-
}
254-
</style>

0 commit comments

Comments
 (0)