项目准备
ant design pro vue官网 组件参考文档
1
2
3
4
| $ git clone --depth=1 https://github.com/sendya/ant-design-pro-vue.git my-project
$ cd my-project
$ yarn install
$ yarn run serve
|
登录功能
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
| <a-form
id="formLogin"
class="user-layout-login"
ref="formLogin"
:form="form"
@submit="handleSubmit"
layout="vertical"
>
<a-form-item label="用户名">
<a-input
size="small"
type="text"
placeholder="账户: admin"
v-decorator="[
'username',
{rules: [{ required: true, message: '请输入用户名' }, { validator: handleUsernameOrEmail }], validateTrigger: 'change'}
]"
>
<a-icon slot="prefix" type="user" :style="{ color: 'rgba(0,0,0,.25)' }"/>
</a-input>
</a-form-item>
<a-form-item label="密码">
<a-input
size="small"
type="password"
autocomplete="false"
placeholder="密码: admin"
v-decorator="[
'password',
{rules: [{ required: true, message: '请输入密码' }], validateTrigger: 'blur'}
]"
>
<a-icon slot="prefix" type="lock" :style="{ color: 'rgba(0,0,0,.25)' }"/>
</a-input>
</a-form-item>
<a-form-item>
<a-button
size="small"
type="primary"
htmlType="submit"
class="login-button"
:loading="state.loginBtn"
:disabled="state.loginBtn"
>登陆</a-button>
</a-form-item>
</a-form>
|
1
2
3
4
5
| data () {
return {
form: this.$form.createForm(this)
}
}
|
methods 中获取表单的字段并传给后端验证
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| handleSubmit (e) {
validateFields(validateFieldsKey, { force: true }, (err, values) => {
if (!err) {
<!-- values是校验后的表单各个字段 -->
Login(values)
.then((res) => this.loginSuccess(res))
.catch(err => this.requestFailed(err))
.finally(() => {
state.loginBtn = false
})
} else {
setTimeout(() => {
state.loginBtn = false
}, 600)
}
})
},
|
src/api/login.js 定义后端api登录校验接口
1
2
3
4
5
6
7
| export function login (parameter) {
return axios({
url: '接口地址',
method: 'post',
data: parameter
})
}
|
调用登录api，更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
| const user = {
state: {
token: '',
name: '',
welcome: '',
avatar: '',
roles: [],
info: {}
},
mutations: {
SET_TOKEN: (state, token) => {
state.token = token
},
SET_NAME: (state, { name, welcome }) => {
state.name = name
state.welcome = welcome
},
SET_AVATAR: (state, avatar) => {
state.avatar = avatar
},
SET_ROLES: (state, roles) => {
state.roles = roles
},
SET_INFO: (state, info) => {
state.info = info
}
},
actions: {
Login ({ commit }, userInfo) {
return new Promise((resolve, reject) => {
login(userInfo).then(response => {
if (response.success) {
Vue.ls.set(ACCESS_TOKEN, '4291d7da9005377ec9aec4a71ea837f', 7 * 24 * 60 * 60 * 1000)
<!-- 需要校验码，没有校验码进不去系统 -->
commit('SET_TOKEN', '4291d7da9005377ec9aec4a71ea837f')
<!--
把用户名保存到state中,使用如下方式调用
computed: {
...mapState({
name: (state) => state.user.name
})
}
-->
commit('SET_NAME', { name: response.detail.username, welcome: welcome() })
resolve('登录成功')
} else {
resolve('用户名或密码错误')
}
}).catch(error => {
reject(error)
})
})
}
}
|
后端api返回验证结果后跳转到系统主页，欢迎弹窗。
1
2
3
4
5
6
7
8
9
10
11
| loginSuccess (res) {
if (res === '登录成功') {
this.$router.push({ name: 'Analysis' }, () => {
console.log('onComplete')
this.$notification.success({
message: '欢迎',
description: `${timeFix()}，欢迎回来`
})
})
}
}
|
