admin-antd-reactAppearance
与服务端交互
前端请求流程
在 admin-antd-react-vite 中，一个完整的前端 UI 交互到服务端处理流程是这样的：
- UI 组件交互操作；
- 调用统一管理的
store.ts；(此步可以省略，可以直接进行下步调用service.ts) store.ts调用service.tsapi 请求函数；- 使用封装的
@/utils/request.ts发送请求； - 获取服务端返回；
- 更新 data；
request.ts
@/utils/request.ts 是基于 Axios 的封装，便于统一处理 POST，GET 等请求参数，请求头，以及错误提示信息等。 它封装了全局 request拦截器、response拦截器、统一的错误处理、统一做了超时处理、baseURL设置等。
一个表单提交例子：
// @/pages/pagesample/form/basic/service.ts
import request from '@/utils/request';
import { FormDataType } from './data.d';
export async function createData(params: FormDataType): Promise<any> {
return request({
url: '/pages/form',
method: 'POST',
data: params,
});
}
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
// @/pages/pagesample/form/basic/index.tsx
import { useState } from 'react';
import { Button, Card, Checkbox, DatePicker, Form, Input, message, Radio, Select } from 'antd';
import { FormDataType } from './data.d';
import { createData } from './service';
const formItemLayout = {
labelCol: {
xs: { span: 24 },
sm: { span: 7 },
},
wrapperCol: {
xs: { span: 24 },
sm: { span: 12 },
md: { span: 10 },
},
};
const submitFormLayout = {
wrapperCol: {
xs: { span: 24, offset: 0 },
sm: { span: 10, offset: 7 },
},
};
function App() {
const [form] = Form.useForm();
const onReset = () => {
form.resetFields();
};
const [loading, setLoading] = useState<boolean>(false);
const onFinish = async (values: FormDataType) => {
setLoading(true);
try {
await createData(values);
message.success('提交成功');
onReset();
} catch (error: any) {
console.log(error);
}
setLoading(false);
};
return (
<div className='layout-main-conent'>
<Card bordered={false}>
<Form
/* hideRequiredMark */
name='basic'
form={form}
onFinish={onFinish}
>
<Form.Item
{...formItemLayout}
label='标题：'
name='title'
rules={[
{
required: true,
message: '必填',
},
]}
>
<Input placeholder='请输入' />
</Form.Item>
<Form.Item
{...formItemLayout}
label='起止日期'
name='date'
rules={[
{
required: true,
message: '必填',
},
]}
>
<DatePicker.RangePicker
style={{ width: '100%' }}
placeholder={['开始日期', '截止日期']}
onChange={(value, string) => {
console.log(value, string);
}}
/>
</Form.Item>
<Form.Item
{...formItemLayout}
label='下拉选择'
name='select'
rules={[
{
required: true,
message: '请选择',
},
]}
>
<Select placeholder='请选择' allowClear>
<Select.Option value='1'>select1</Select.Option>
<Select.Option value='2'>select2</Select.Option>
<Select.Option value='3'>select3</Select.Option>
</Select>
</Form.Item>
<Form.Item {...formItemLayout} label='单选按钮1' name='radio1'>
<Radio.Group>
<Radio value='a'>item 1</Radio>
<Radio value='b'>item 2</Radio>
<Radio value='c'>item 3</Radio>
</Radio.Group>
</Form.Item>
<Form.Item
{...formItemLayout}
label='单选按钮2'
name='radio2'
rules={[{ required: true, message: '请选择' }]}
>
<Radio.Group>
<Radio.Button value='a'>item 1</Radio.Button>
<Radio.Button value='b'>item 2</Radio.Button>
<Radio.Button value='c'>item 3</Radio.Button>
</Radio.Group>
</Form.Item>
<Form.Item {...formItemLayout} label='复选框' name='checkbox'>
<Checkbox.Group>
<Checkbox value='A' style={{ lineHeight: '32px' }}>
A
</Checkbox>
<Checkbox value='B' style={{ lineHeight: '32px' }} disabled>
B
</Checkbox>
<Checkbox value='C' style={{ lineHeight: '32px' }}>
C
</Checkbox>
<Checkbox value='D' style={{ lineHeight: '32px' }}>
D
</Checkbox>
<Checkbox value='E' style={{ lineHeight: '32px' }}>
E
</Checkbox>
<Checkbox value='F' style={{ lineHeight: '32px' }}>
F
</Checkbox>
</Checkbox.Group>
</Form.Item>
<Form.Item {...formItemLayout} label='备注' name='remark'>
<Input.TextArea style={{ minHeight: 32 }} placeholder='请输入' rows={4} />
</Form.Item>
<Form.Item {...submitFormLayout}>
<Button type='primary' htmlType='submit' loading={loading}>
提交
</Button>
<Button htmlType='button' onClick={onReset} style={{ marginLeft: 8 }}>
重置
</Button>
</Form.Item>
</Form>
</Card>
</div>
);
}
export default App;
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
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
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
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173