考试系统：答题页面写完了答卷的后端部分，这节来写下前端页面。
在问卷星里，编辑完试卷后，点击发布后，会生成链接和二维码：
打开链接就可以答题了：
答完点提交会立刻判卷，给出分数，还可以查看正确答案和解析：
这节我们来实现这部分功能。
首先给编辑按钮加上跳转编辑器的链接：
<Link to={`/edit/${item.id}`}>编辑</Link>
1
试下效果：
跳转成功，id 也是对的。
我们编辑下，点击保存：
加个返回按钮：
<Button type="default">
<Link to="/">返回</Link>
</Button>
1
2
3
2
3
编辑完，点击保存，然后返回列表页就好了。
然后生成考试链接：
用 Popover 加个考试连接按钮。
<Popover content={window.location.origin + '/exam/' + item.id} trigger="click">
<Button type="default">
考试链接
</Button>
</Popover>
1
2
3
4
5
2
3
4
5
复制这个链接打开就是试卷。
当然，我们还没实现这个路由。
加一下：
{
path: "exam/:id",
element: <Exam />,
},
1
2
3
4
2
3
4
然后实现下这个组件：
pages/Exam/index.tsx
import { useParams } from "react-router-dom";
export function Exam() {
let { id } = useParams();
return <div>
Exam: {id}
</div>
}
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
这个页面要做的事情就是拿到 json，根据 json 渲染表单：
然后点击提交的时候保存答卷。
先渲染下 json：
import { useEffect, useState } from "react";
import { useParams } from "react-router-dom";
import { Question } from "../Edit";
import { examFind } from "../../interfaces";
import { Button, Checkbox, Input, message, Radio } from "antd";
import './index.scss';
export function Exam() {
let { id } = useParams();
const [json, setJson] = useState<Array<Question>>([])
async function query() {
if(!id) {
return;
}
try {
const res = await examFind(+id);
if(res.status === 201 || res.status === 200) {
try{
setJson(JSON.parse(res.data.content))
} catch(e) {}
}
} catch(e: any){
message.error(e.response?.data?.message || '系统繁忙，请稍后再试');
}
}
useEffect(() => {
query();
}, [])
function renderComponents(arr: Array<Question>) {
return arr.map(item => {
let formComponent;
if(item.type === 'radio') {
formComponent = <Radio.Group>
{
item.options?.map(option => <Radio value={option}>{option}</Radio>)
}
</Radio.Group>
} else if(item.type === 'checkbox') {
formComponent = <Checkbox.Group options={item.options} />
} else if(item.type === 'input'){
formComponent = <Input/>
}
return <div className="component-item" key={item.id}>
<p className="question">{item.question}</p>
<div className="options">
{formComponent}
</div>
</div>
})
}
return <div className="exam-container">
{renderComponents(json)}
<Button type="primary" className="btn">提交</Button>
</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
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
index.scss
.exam-container {
width: 800px;
margin: 30px auto;
.component-item {
margin: 20px;
line-height: 40px;
font-size: 20px;
}
.btn {
width: 300px;
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
请求 examFind 接口，拿到 json 之后调用 renderComponents 渲染。
加上一个提交按钮。
看下效果：
然后做下点击提交按钮的处理。
我们按照这种格式来保存答卷：
[
{
id: 1,
answer: 'xxx'
},
{
id: 2,
answer: 'yyy'
}
]
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
每个元素对应一道题的答案，id 是题目 id，answer 是答案。
interfaces/index.tsx 加一下提交答案的接口：
const answerServiceInstance = axios.create({
baseURL: 'http://localhost:3003/',
timeout: 3000
});
answerServiceInstance.interceptors.request.use(requestInterceptor)
answerServiceInstance.interceptors.response.use(
responseIntercepor,
responseErrorIntercepor
)
export async function answerAdd(data: { examId: number, content: string}) {
return await answerServiceInstance.post('/answer/add', data);
}
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
这里调用答案微服务的接口需要单独创建一个 axios 的实例。
然后在页面调用下：
加一个 state 来存储 answer 数组，拿到 json 的时候初始化 answers 数组。
然后表单 onChange 的时候修改 answers 数组元素。
点击提交的时候，打印下：
import { useEffect, useState } from "react";
import { useParams } from "react-router-dom";
import { Question } from "../Edit";
import { examFind } from "../../interfaces";
import { Button, Checkbox, Input, message, Radio } from "antd";
import './index.scss';
export function Exam() {
let { id } = useParams();
const [json, setJson] = useState<Array<Question>>([])
const [answers, setAnswers] = useState<Array<{ id: number, answer: string}>>([]);
async function query() {
if(!id) {
return;
}
try {
const res = await examFind(+id);
if(res.status === 201 || res.status === 200) {
try{
const content = JSON.parse(res.data.content);
setJson(content)
setAnswers(content.map((item: {id: number}) => {
return {
id: item.id
}
}));
} catch(e) {}
}
} catch(e: any){
message.error(e.response?.data?.message || '系统繁忙，请稍后再试');
}
}
useEffect(() => {
query();
}, [])
function setAnswer(id: number, value: string) {
setAnswers(answers.map(item => {
return item.id === id ? {
id,
answer: value
} : item
}))
}
function renderComponents(arr: Array<Question>) {
return arr.map((item) => {
let formComponent;
if(item.type === 'radio') {
formComponent = <Radio.Group onChange={(e) => {
setAnswer(item.id, e.target.value)
}}>
{
item.options?.map(option => <Radio value={option}>{option}</Radio>)
}
</Radio.Group>
} else if(item.type === 'checkbox') {
formComponent = <Checkbox.Group options={item.options} onChange={(values) => {
setAnswer(item.id, values.join(','))
}}/>
} else if(item.type === 'input'){
formComponent = <Input onChange={(e) => {
setAnswer(item.id, e.target.value)
}}/>
}
return <div className="component-item" key={item.id}>
<p className="question">{item.question}</p>
<div className="options">
{formComponent}
</div>
</div>
})
}
return <div className="exam-container">
{renderComponents(json)}
<Button type="primary" className="btn" onClick={() => {
console.log(answers)
}}>提交</Button>
</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
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
试下效果：
接下来只要调用下新建答卷的接口就好了。
const addAnswer = useCallback(async function () {
if(!id) {
return;
}
try {
const res = await answerAdd({
examId: +id,
content: JSON.stringify(answers)
});
if(res.status === 201 || res.status === 200) {
try{
message.success('提交成功');
navigate('/res/' + res.data.id);
} catch(e) {}
}
} catch(e: any){
message.error(e.response?.data?.message || '系统繁忙，请稍后再试');
}
}, [answers]);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
测试下：
提交成功，跳转的链接也是对的。
看下返回的响应：
保存的答案也是对的。
案例代码在小册仓库：
# 总结
这节实现了答题页面。
编辑完考试可以生成链接，打开链接答题后就会保存提交的答案。
渲染试卷 json 的逻辑和预览时一样。
表单 onChange 的时候修改 answers 状态，当点击提交的时候调用接口保存答卷。
这样从新建考试，编辑试卷，到答题提交答案的流程就完成了。