Skip to content

Commit 7085aa1

Browse files
SunQQQSunQQQ
committed
登录后修改当前用户名
1 parent e116519 commit 7085aa1

File tree

3 files changed

+88
-73
lines changed

3 files changed

+88
-73
lines changed

‎src/App.vue‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,8 +17,9 @@
1717
}
1818
},
1919
mounted: function () {
20-
/*如果有token则加载首页，如果没有则加载登录页*/
20+
// 如果有token则加载首页，如果没有则加载登录页
2121
var UserData = window.localStorage.getItem("SQBlog");
22+
2223
if (!UserData) {
2324
this.$router.push({
2425
name: 'LoginPage',

‎src/components/LoginPage.vue‎

Lines changed: 74 additions & 70 deletions
Original file line numberDiff line numberDiff line change
@@ -1,83 +1,87 @@
11
<template>
2-
<div class="LoginContent">
3-
<el-form ref="form" :model="form" label-width="80px">
4-
<div style="text-align: center"><h2>sunq's blog 管理后台</h2></div>
5-
<el-form-item label="账号">
6-
<el-input v-model="form.CnName"></el-input>
7-
</el-form-item>
8-
<el-form-item label="密码">
9-
<el-input v-model="form.PassWord"></el-input>
10-
</el-form-item>
11-
<div style="text-align: center">
12-
<el-button type="primary" @click="OnLogin()">登录</el-button>
13-
<!--<el-button type="primary" @click="OnRegist()">注册</el-button>-->
14-
</div>
15-
</el-form>
16-
</div>
2+
<div class="LoginContent">
3+
<el-form ref="form" :model="form" label-width="80px">
4+
<div style="text-align: center"><h2>sunq's blog 管理后台</h2></div>
5+
<el-form-item label="账号">
6+
<el-input v-model="form.CnName"></el-input>
7+
</el-form-item>
8+
<el-form-item label="密码">
9+
<el-input v-model="form.PassWord"></el-input>
10+
</el-form-item>
11+
<div style="text-align: center">
12+
<el-button type="primary" @click="OnLogin()">登录</el-button>
13+
<!--<el-button type="primary" @click="OnRegist()">注册</el-button>-->
14+
</div>
15+
</el-form>
16+
</div>
1717
</template>
1818

1919
<script>
20-
import axios from 'axios'
21-
import { Loading } from 'element-ui'
20+
import axios from 'axios'
21+
import {Loading} from 'element-ui'
2222
23-
export default {
24-
name: "LoginPage",
25-
data:function () {
26-
return{
27-
form:{
28-
CnName : '游客',
29-
PassWord:'亲，github求个赞'
30-
}
23+
export default {
24+
name: "LoginPage",
25+
data: function () {
26+
return {
27+
form: {
28+
CnName: '游客',
29+
PassWord: '亲，github求个赞'
3130
}
31+
}
32+
},
33+
methods: {
34+
OnLogin: function () {
35+
var That = this;
36+
var AjaxLoading = Loading.service({fullscreen: true});
37+
axios.post('/api/UserReadOne', {
38+
CnName: this.form.CnName,
39+
PassWord: this.form.PassWord,
40+
UserType: 'Admin'
41+
}).then(function (response) {
42+
AjaxLoading.close();
43+
if (response.data.status == '0') {
44+
That.$message({
45+
message: '登录成功',
46+
type: 'success'
47+
});
48+
window.localStorage.setItem("SQBlog", JSON.stringify(response.data.data));
49+
window.localStorage.setItem("SQBlogUser", That.form.CnName);
50+
That.$router.push({name: 'Article'});
51+
52+
// 登录成功后，调用菜单组件注册的方法，修改菜单组件的用户名
53+
That.bus.$emit('changeUser', That.form.CnName);
54+
} else if (response.data.status == '1') {
55+
That.$message.error('账号或密码错误');
56+
}
57+
}).catch(function (error) {
58+
});
3259
},
33-
methods:{
34-
OnLogin:function () {
35-
var That = this;
36-
var AjaxLoading = Loading.service({ fullscreen: true });
37-
axios.post('/api/UserReadOne',{
38-
CnName: this.form.CnName,
39-
PassWord: this.form.PassWord,
40-
UserType: 'Admin'
41-
}).then(function (response) {
42-
AjaxLoading.close();
43-
if (response.data.status == '0') {
44-
That.$message({
45-
message: '登录成功',
46-
type: 'success'
47-
});
48-
window.localStorage.setItem("SQBlog",JSON.stringify(response.data.data));
49-
window.localStorage.setItem("SQBlogUser",That.form.CnName);
50-
That.$router.push({name:'Article'});
51-
}else if(response.data.status == '1'){
52-
That.$message.error('账号或密码错误');
53-
}
54-
}).catch(function (error) {
55-
});
56-
},
57-
OnRegist:function () {
58-
var That = this;
59-
axios.post('/api/UserCreate',{
60-
CnName: this.form.CnName,
61-
PassWord: this.form.PassWord,
62-
UserType: 'Admin'
63-
}).then(function (response) {
64-
if (response.data.status == '200') {
65-
That.$message({
66-
message: '注册成功',
67-
type: 'success'
68-
});
69-
}
70-
}).catch(function (error) {
71-
});
72-
}
60+
OnRegist: function () {
61+
var That = this;
62+
axios.post('/api/UserCreate', {
63+
CnName: this.form.CnName,
64+
PassWord: this.form.PassWord,
65+
UserType: 'Admin'
66+
}).then(function (response) {
67+
if (response.data.status == '200') {
68+
That.$message({
69+
message: '注册成功',
70+
type: 'success'
71+
});
72+
}
73+
}).catch(function (error) {
74+
});
7375
}
7476
}
77+
}
7578
</script>
7679

7780
<style scoped lang="less">
78-
@import "../assets/css/base.less";
79-
.LoginContent{
80-
width: 600px;
81-
margin: 12rem auto 0;
82-
}
81+
@import "../assets/css/base.less";
82+
83+
.LoginContent {
84+
width: 600px;
85+
margin: 12rem auto 0;
86+
}
8387
</style>

‎src/components/TopBar.vue‎

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -91,11 +91,21 @@
9191
},
9292
mounted:function () {
9393
var That = this;
94-
// 这个参数是平级组件间传值
94+
95+
// 切换路由后，各组件会修改菜单高亮。这个参数是平级组件间传值
9596
this.bus.$on('Topbar',function (data) {
9697
That.MenuHighLight = data.MenuHighLight;
9798
});
98-
That.userName = window.localStorage.getItem("SQBlogUser");
99+
100+
// 初始化菜单时，从localstorage中获取用户名
101+
if(window.localStorage.getItem("SQBlogUser")){
102+
That.userName = window.localStorage.getItem("SQBlogUser");
103+
}
104+
105+
// 注册修改用户名方法，登录成功时登录组件会通过这个方法修改用户名
106+
this.bus.$on('changeUser',function (user) {
107+
That.userName = user;
108+
});
99109
}
100110
}
101111
</script>

0 commit comments

Comments
 (0)