Skip to content

Commit 0094f44

Browse files
PanJiaChenPanJiaChen
committed
change login by username
1 parent d06d476 commit 0094f44

File tree

8 files changed

+109
-93
lines changed

8 files changed

+109
-93
lines changed

‎src/api/login.js

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
import fetch from 'utils/fetch';
22

3-
export function loginByEmail(email, password) {
3+
export function loginByUsername(username, password) {
44
const data = {
5-
email,
5+
username,
66
password
77
};
88
return fetch({
9-
url: '/login/loginbyemail',
9+
url: '/login/login',
1010
method: 'post',
1111
data
1212
});

‎src/assets/iconfont/iconfont.js

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/mock/index.js

Lines changed: 16 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,23 @@
1-
import Mock from 'mockjs';
2-
import loginAPI from './login';
3-
import articleAPI from './article';
4-
import article_tableAPI from './article_table';
5-
import remoteSearchAPI from './remoteSearch';
6-
1+
import Mock from 'mockjs'
2+
import loginAPI from './login'
3+
import articleAPI from './article'
4+
import article_tableAPI from './article_table'
5+
import remoteSearchAPI from './remoteSearch'
76

87
// 登录相关
9-
Mock.mock(/\/login\/loginbyemail/, 'post', loginAPI.loginByEmail);
10-
Mock.mock(/\/login\/logout/, 'post', loginAPI.logout);
8+
Mock.mock(/\/login\/login/, 'post', loginAPI.loginByUsername)
9+
Mock.mock(/\/login\/logout/, 'post', loginAPI.logout)
1110
Mock.mock(/\/user\/info\.*/, 'get', loginAPI.getInfo)
1211

13-
// // 文章相关
14-
Mock.mock(/\/article\/list/, 'get', articleAPI.getList);
15-
Mock.mock(/\/article\/detail/, 'get', articleAPI.getArticle);
16-
17-
// // table example相关
18-
Mock.mock(/\/article_table\/list/, 'get', article_tableAPI.getList);
19-
Mock.mock(/\/article_table\/p/, 'get', article_tableAPI.getPv);
12+
// 文章相关
13+
Mock.mock(/\/article\/list/, 'get', articleAPI.getList)
14+
Mock.mock(/\/article\/detail/, 'get', articleAPI.getArticle)
2015

21-
// // 搜索相关
22-
Mock.mock(/\/search\/user/, 'get', remoteSearchAPI.searchUser);
16+
// table example相关
17+
Mock.mock(/\/article_table\/list/, 'get', article_tableAPI.getList)
18+
Mock.mock(/\/article_table\/p/, 'get', article_tableAPI.getPv)
2319

20+
// 搜索相关
21+
Mock.mock(/\/search\/user/, 'get', remoteSearchAPI.searchUser)
2422

25-
export default Mock;
23+
export default Mock

‎src/mock/login.js

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -25,9 +25,9 @@ const userMap = {
2525
}
2626

2727
export default {
28-
loginByEmail: config => {
29-
const { email } = JSON.parse(config.body);
30-
return userMap[email.split('@')[0]];
28+
loginByUsername: config => {
29+
const { username } = JSON.parse(config.body);
30+
return userMap[username];
3131
},
3232
getInfo: config => {
3333
const { token } = param2Obj(config.url);

‎src/store/modules/user.js

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { loginByEmail, logout, getInfo } from 'api/login';
1+
import { loginByUsername, logout, getInfo } from 'api/login';
22
import { getToken, setToken, removeToken } from 'utils/auth';
33

44
const user = {
@@ -50,11 +50,11 @@ const user = {
5050
},
5151

5252
actions: {
53-
// 邮箱登录
54-
LoginByEmail({ commit }, userInfo) {
55-
const email = userInfo.email.trim();
53+
// 用户名登录
54+
LoginByUsername({ commit }, userInfo) {
55+
const username = userInfo.username.trim();
5656
return new Promise((resolve, reject) => {
57-
loginByEmail(email, userInfo.password).then(response => {
57+
loginByUsername(username, userInfo.password).then(response => {
5858
const data = response.data;
5959
setToken(response.data.token);
6060
commit('SET_TOKEN', data.token);

‎src/utils/validate.js

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,9 @@
33
*/
44

55
/* 是否是公司邮箱*/
6-
export function isWscnEmail(str) {
7-
const reg = /^[a-z0-9](?:[-_.+]?[a-z0-9]+)*@wallstreetcn\.com$/i;
8-
return reg.test(str.trim());
6+
export function isvalidUsername(str) {
7+
const valid_map = ['admin', 'editor']
8+
return valid_map.indexOf(str.trim()) >= 0;
99
}
1010

1111
/* 合法uri*/

‎src/views/dashboard/index.vue

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,6 @@
2121
...mapGetters([
2222
'name',
2323
'avatar',
24-
'email',
2524
'introduction',
2625
'roles'
2726
])

‎src/views/login/index.vue

Lines changed: 78 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -1,115 +1,123 @@
11
<template>
22
<div class="login-container">
3-
<el-form autoComplete="on" :model="loginForm" :rules="loginRules" ref="loginForm" label-position="left" label-width="0px"
4-
class="card-box login-form">
3+
<el-form class="card-box login-form" autoComplete="on" :model="loginForm" :rules="loginRules" ref="loginForm" label-position="left">
54
<h3 class="title">系统登录</h3>
6-
<el-form-item prop="email">
7-
<span class="svg-container"><icon-svg icon-class="jiedianyoujian"></icon-svg></span>
8-
<el-input name="email" type="text" v-model="loginForm.email" autoComplete="on" placeholder="邮箱"></el-input>
5+
6+
<el-form-item prop="username">
7+
<span class="svg-container svg-container_login">
8+
<icon-svg icon-class="yonghuming" />
9+
</span>
10+
<el-input name="username" type="text" v-model="loginForm.username" autoComplete="on" placeholder="邮箱" />
911
</el-form-item>
12+
1013
<el-form-item prop="password">
11-
<span class="svg-container"><icon-svg icon-class="mima"></icon-svg></span>
12-
<el-input name="password" type="password" @keyup.enter.native="handleLogin" v-model="loginForm.password" autoComplete="on"
13-
placeholder="密码"></el-input>
14+
<span class="svg-container">
15+
<icon-svg icon-class="mima" />
16+
</span>
17+
<el-input name="password" :type="pwdType" @keyup.enter.native="handleLogin" v-model="loginForm.password" autoComplete="on"
18+
placeholder="密码" />
19+
<span class='show-pwd' @click='showPwd'><icon-svg icon-class="yanjing" /></span>
1420
</el-form-item>
15-
<el-form-item>
16-
<el-button type="primary" style="width:100%;" :loading="loading" @click.native.prevent="handleLogin">
17-
登录
18-
</el-button>
19-
</el-form-item>
20-
<div class='tips'>admin账号为:[email protected] 密码随便填</div>
21-
<div class='tips'>editor账号:[email protected] 密码随便填</div>
21+
22+
<el-button type="primary" style="width:100%;margin-bottom:30px;" :loading="loading" @click.native.prevent="handleLogin">登录</el-button>
23+
24+
<div class='tips'>账号:admin 密码随便填</div>
25+
<div class='tips'>账号:editor 密码随便填</div>
2226
</el-form>
2327

2428
<el-dialog title="第三方验证" :visible.sync="showDialog">
2529
邮箱登录成功,请选择第三方验证
26-
<social-sign></social-sign>
30+
<social-sign />
2731
</el-dialog>
2832

2933
</div>
3034
</template>
3135

3236
<script>
33-
import { isWscnEmail } from 'utils/validate';
34-
import socialSign from './socialsignin';
37+
import { isvalidUsername } from 'utils/validate'
38+
import socialSign from './socialsignin'
3539
3640
export default {
3741
components: { socialSign },
3842
name: 'login',
3943
data() {
40-
const validateEmail = (rule, value, callback) => {
41-
if (!isWscnEmail(value)) {
42-
callback(new Error('请输入正确的合法邮箱'));
44+
const validateUsername = (rule, value, callback) => {
45+
if (!isvalidUsername(value)) {
46+
callback(new Error('请输入正确的用户名'))
4347
} else {
44-
callback();
48+
callback()
4549
}
46-
};
47-
const validatePass = (rule, value, callback) => {
50+
}
51+
const validatePassword = (rule, value, callback) => {
4852
if (value.length < 6) {
49-
callback(new Error('密码不能小于6位'));
53+
callback(new Error('密码不能小于6位'))
5054
} else {
51-
callback();
55+
callback()
5256
}
53-
};
57+
}
5458
return {
5559
loginForm: {
56-
email: 'admin@wallstreetcn.com',
57-
password: ''
60+
username: 'admin',
61+
password: '1111111'
5862
},
5963
loginRules: {
60-
email: [
61-
{ required: true, trigger: 'blur', validator: validateEmail }
62-
],
63-
password: [
64-
{ required: true, trigger: 'blur', validator: validatePass }
65-
]
64+
username: [{ required: true, trigger: 'blur', validator: validateUsername }],
65+
password: [{ required: true, trigger: 'blur', validator: validatePassword }]
6666
},
67+
pwdType: 'password',
6768
loading: false,
6869
showDialog: false
6970
}
7071
},
7172
methods: {
73+
showPwd() {
74+
if (this.pwdType === 'password') {
75+
this.pwdType = ''
76+
} else {
77+
this.pwdType = 'password'
78+
}
79+
},
7280
handleLogin() {
7381
this.$refs.loginForm.validate(valid => {
7482
if (valid) {
75-
this.loading = true;
76-
this.$store.dispatch('LoginByEmail', this.loginForm).then(() => {
77-
this.loading = false;
78-
this.$router.push({ path: '/' });
79-
// this.showDialog = true;
83+
this.loading = true
84+
this.$store.dispatch('LoginByUsername', this.loginForm).then(() => {
85+
this.loading = false
86+
this.$router.push({ path: '/' })
87+
// this.showDialog = true
8088
}).catch(() => {
81-
this.loading = false;
82-
});
89+
this.loading = false
90+
})
8391
} else {
84-
console.log('error submit!!');
85-
return false;
92+
console.log('error submit!!')
93+
return false
8694
}
87-
});
95+
})
8896
},
8997
afterQRScan() {
90-
// const hash = window.location.hash.slice(1);
91-
// const hashObj = getQueryObject(hash);
92-
// const originUrl = window.location.origin;
93-
// history.replaceState({}, '', originUrl);
98+
// const hash = window.location.hash.slice(1)
99+
// const hashObj = getQueryObject(hash)
100+
// const originUrl = window.location.origin
101+
// history.replaceState({}, '', originUrl)
94102
// const codeMap = {
95103
// wechat: 'code',
96104
// tencent: 'code'
97-
// };
98-
// const codeName = hashObj[codeMap[this.auth_type]];
105+
// }
106+
// const codeName = hashObj[codeMap[this.auth_type]]
99107
// if (!codeName) {
100-
// alert('第三方登录失败');
108+
// alert('第三方登录失败')
101109
// } else {
102110
// this.$store.dispatch('LoginByThirdparty', codeName).then(() => {
103-
// this.$router.push({ path: '/' });
104-
// });
111+
// this.$router.push({ path: '/' })
112+
// })
105113
// }
106114
}
107115
},
108116
created() {
109-
// window.addEventListener('hashchange', this.afterQRScan);
117+
// window.addEventListener('hashchange', this.afterQRScan)
110118
},
111119
destroyed() {
112-
// window.removeEventListener('hashchange', this.afterQRScan);
120+
// window.removeEventListener('hashchange', this.afterQRScan)
113121
}
114122
}
115123
</script>
@@ -119,7 +127,7 @@
119127
.tips {
120128
font-size: 14px;
121129
color: #fff;
122-
margin-bottom: 5px;
130+
margin-bottom: 10px;
123131
}
124132
125133
.login-container {
@@ -147,6 +155,12 @@
147155
.svg-container {
148156
padding: 6px 5px 6px 15px;
149157
color: #889aa4;
158+
vertical-align: middle;
159+
width: 30px;
160+
display: inline-block;
161+
&_login{
162+
font-size:20px;
163+
}
150164
}
151165
.title {
152166
font-size: 26px;
@@ -170,8 +184,13 @@
170184
border-radius: 5px;
171185
color: #454545;
172186
}
173-
.forget-pwd {
174-
color: #fff;
187+
.show-pwd{
188+
position: absolute;
189+
right: 10px;
190+
top: 7px;
191+
font-size: 16px;
192+
color: #889aa4;
193+
cursor: pointer;
175194
}
176195
}
177196
</style>

0 commit comments

Comments
 (0)