考试系统：修改密码、试卷列表页面这节继续来写修改密码页面，还有试卷列表页面：
首先是修改密码的页面 src/pages/UpdatePassword：
import { Button, Form, Input, message } from 'antd';
import { useForm } from 'antd/es/form/Form';
import './index.css';
import { useCallback } from 'react';
import { Link, useNavigate } from 'react-router-dom';
export interface UpdatePassword {
email: string;
captcha: string;
password: string;
confirmPassword: string;
}
const layout1 = {
labelCol: { span: 6 },
wrapperCol: { span: 18 }
}
export function UpdatePassword() {
const [form] = useForm();
const navigate = useNavigate();
const onFinish = async (values: UpdatePassword) => {
console.log(values);
}
const sendCaptcha = async function () {
console.log('send captcha')
}
return <div id="updatePassword-container">
<h1>考试系统</h1>
<Form
form={form}
{...layout1}
onFinish={onFinish}
colon={false}
autoComplete="off"
>
<Form.Item
label="用户名"
name="username"
rules={[
{ required: true, message: '请输入用户名!' },
]}
>
<Input />
</Form.Item>
<Form.Item
label="邮箱"
name="email"
rules={[
{ required: true, message: '请输入邮箱!' },
{ type: "email", message: '请输入合法邮箱地址!'}
]}
>
<Input />
</Form.Item>
<div className='captcha-wrapper'>
<Form.Item
label="验证码"
name="captcha"
rules={[{ required: true, message: '请输入验证码!' }]}
>
<Input />
</Form.Item>
<Button type="primary" onClick={sendCaptcha}>发送验证码</Button>
</div>
<Form.Item
label="密码"
name="password"
rules={[{ required: true, message: '请输入密码!' }]}
>
<Input.Password />
</Form.Item>
<Form.Item
label="确认密码"
name="confirmPassword"
rules={[{ required: true, message: '请输入确认密码!' }]}
>
<Input.Password />
</Form.Item>
<Form.Item
{...layout1}
label=" "
>
<Button className='btn' type="primary" htmlType="submit">
修改
</Button>
</Form.Item>
</Form>
</div>
}
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
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
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
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
css 部分如下：
#updatePassword-container {
width: 400px;
margin: 100px auto 0 auto;
text-align: center;
}
#updatePassword-container .btn {
width: 100%;
}
#updatePassword-container .captcha-wrapper {
display: flex;
justify-content: flex-end;
}
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
跑起来是这样的：
然后再调用下后端接口。
在 interfaces 添加这两个接口：
export async function updatePasswordCaptcha(email: string) {
return await userServiceInstance.get('/user/update_password/captcha', {
params: {
address: email
}
});
}
export async function updatePassword(data: UpdatePassword) {
return await userServiceInstance.post('/user/update_password', data);
}
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
更改密码页面里调用下：
const sendCaptcha = async function () {
const address = form.getFieldValue('email');
if(!address) {
return message.error('请输入邮箱地址');
}
try {
const res = await updatePasswordCaptcha(address);
if(res.status === 201 || res.status === 200) {
message.success('发送成功');
}
} catch(e: any) {
message.error(e.response?.data?.message || '系统繁忙，请稍后再试');
}
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15
发送验证码接口的调用逻辑和注册时一模一样。
更改密码接口的调用逻辑也和注册差不多：
const onFinish = async (values: UpdatePassword) => {
if(values.password !== values.confirmPassword) {
return message.error('两次密码不一致');
}
try {
const res = await updatePassword(values);
if(res.status === 201 || res.status === 200) {
message.success('密码修改成功');
setTimeout(() => {
navigate('/login');
}, 1500);
}
} catch(e: any) {
message.error(e.response?.data?.message || '系统繁忙，请稍后再试');
}
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
测试下：
填入邮箱，点击发送验证码。
提示发送成功。
邮箱里也收到了这个验证码。
然后填入新密码，点击修改密码按钮：
提示修改成功，然后会跳到登录页面。
在登录页面用新密码登录，提示登录成功。
这样，修改密码功能的前后端就都完成了。
然后来写试卷列表页面。
添加一个 ExamList 组件
pages/ExamList/index.tsx
export function ExamList() {
return <div>ExamList</div>
}
1
2
3
2
3
看下问卷星的列表页面：
修改 pages/ExamList/index.tsx
import { Button } from "antd";
import "./index.scss";
export function ExamList() {
return <div id="ExamList-container">
<div className="header">
<h1>考试系统</h1>
</div>
<div className="body">
<div className="operate">
<Button type="primary">新建试卷</Button>
</div>
<div className="list">
<div className="item">
<p>语文试卷</p>
<div className="btns">
<Button className="btn" type="primary" style={{background: 'darkblue'}}>发布</Button>
<Button className="btn" type="primary" style={{background: 'green'}}>编辑</Button>
<Button className="btn" type="primary" style={{background: 'darkred'}}>删除</Button>
</div>
</div>
<div className="item">
<p>数学试卷</p>
<div className="btns">
<Button className="btn" type="primary" style={{background: 'darkblue'}}>发布</Button>
<Button className="btn" type="primary" style={{background: 'green'}}>编辑</Button>
<Button className="btn" type="primary" style={{background: 'darkred'}}>删除</Button>
</div>
</div>
</div>
</div>
</div>
}
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
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
写下 index.scss
#ExamList-container{
.header{
height: 80px;
border-bottom: 1px solid #aaa;
line-height: 80px;
}
h1{
margin:0;
}
.body{
.operate {
padding: 20px;
}
.list {
.item {
min-height: 100px;
border: 1px solid #000;
padding: 20px;
margin-bottom: 20px;
.btns {
.btn {
margin: 10px;
}
}
}
}
}
}
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
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
安装用到的 sass 包：
npm install --save-dev sass
1
看下效果：
然后在 interfaces/index.tsx 调用 /exam/list 接口：
const examServiceInstance = axios.create({
baseURL: 'http://localhost:3002/',
timeout: 3000
});
export async function examList() {
return await examServiceInstance.get('/exam/list');
}
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
但是这个接口需要登录，拿到 token 里的 userId，用来查询考试列表。
携带 header 的通用逻辑可以放在 axios 的 interceptor 里做。
并且接口返回 token 的 header 更新本地 token 的逻辑。
const examServiceInstance = axios.create({
baseURL: 'http://localhost:3002/',
timeout: 3000
});
const requestInterceptor = function (config: InternalAxiosRequestConfig) {
const accessToken = localStorage.getItem('token');
if(accessToken) {
config.headers.authorization = 'Bearer ' + accessToken;
}
return config;
}
examServiceInstance.interceptors.request.use(requestInterceptor)
const responseIntercepor = (response: AxiosResponse) => {
const newToken = response.headers['token'];
if(newToken) {
localStorage.setItem('token', newToken);
}
return response;
}
const responseErrorIntercepor = async (error: any) => {
if(!error.response) {
return Promise.reject(error);
}
let { data } = error.response;
if (data.statusCode === 401) {
message.error(data.message);
setTimeout(() => {
window.location.href = '/login';
}, 1500);
} else {
return Promise.reject(error);
}
}
examServiceInstance.interceptors.response.use(
responseIntercepor,
responseErrorIntercepor
)
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
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
这段逻辑就是在每次发请求之前，在 header 里加上 authorization，带上 token。
当响应的 header 带有 token，就更新本地 token。
如果返回的是 401 的状态码，就提示错误，跳转登录页。
在后端 exam 微服务开启跨域：
然后在 ExamList 页面调用下：
import { Button, message } from "antd";
import "./index.scss";
import { useEffect, useState } from "react";
import { examList } from "../../interfaces";
interface Exam {
id: number
name: string
isPublish: boolean
isDelete: boolean
content: string
}
export function ExamList() {
const [list, setList] = useState<Array<Exam>>();
async function query() {
try {
const res = await examList();
if(res.status === 201 || res.status === 200) {
setList(res.data)
}
} catch(e: any){
message.error(e.response?.data?.message || '系统繁忙，请稍后再试');
}
}
useEffect(() => {
query()
}, []);
return <div id="ExamList-container">
<div className="header">
<h1>考试系统</h1>
</div>
<div className="body">
<div className="operate">
<Button type="primary">新建试卷</Button>
</div>
<div className="list">
{
list?.map(item => {
return <div className="item">
<p>{item.name}</p>
<div className="btns">
<Button className="btn" type="primary" style={{background: 'darkblue'}}>{item.isPublish ? '停止' : '发布' }</Button>
<Button className="btn" type="primary" style={{background: 'green'}}>编辑</Button>
<Button className="btn" type="primary" style={{background: 'darkred'}}>删除</Button>
</div>
</div>
})
}
</div>
</div>
</div>
}
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
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
测试下：
这样，试卷列表就展示出来了。
案例代码在小册仓库：
# 总结
这节我们实现了修改密码、试卷列表这两个页面。
添加了 axios 的拦截器来实现 token 自动携带和刷新 token，并且在接口返回 401 的时候跳转登录页。
下节我们继续来做试卷相关功能。