开发经常做的一些功能需求 (希望对于像我这样的前端小白有帮助,加油各位朋友)
一、form表单的增、删、改、查
增:表单的增就是点击上面的 Add / Create 按钮创建一条表单数据。思路以及操作:这里点击一般是弹出一个Moudul 模太框或者跳转一个新的页面,点击跳转过去填好对应的信息,然后点击提交,这里主要是把填的信息传给后端,所以,在点击提交按钮是是发送一个网络请求代码段如下:
const onSubmit = values => {
return axios({
url: '接口',
method: 'POST',
data: {
//入参,就是你填写的参数
status: 1,
...values,
},
})
.then(() => {
Message.success('Success');
})
.catch(err => {
Message.error(err.message);
});
};
删:我们通常也会删除表单的信息。思路以及操作:删除主要是根据对应表单的 ID 进行删除,只要点击删除按钮发送网路请求时,把对应的ID传给后端,删除时一般会有一个弹框,问确定是否删除。代码段如下:
<Button
text
disabled={!record.status}
onClick={() => {
这里是一个弹框在里面进行网络请求拆开也可以
Dialog.confirm({
title: 'Scheduled Sending',
content: '对应的文本提示语',
onOk: async () => {
const result: any = await axios({
url: '删除接口',
method: 'POST',
data: {
//入参传入ID
id: record.id,
},
});
const { error } = result.data;
if (error) {
Message.error(error);
} else {
submit();
}
},
});
}}
>
删除
</Button>
改:表单的改也是根据对应的ID进行修改的。思想以及操作:首先当点击修改按钮的时候页面会跳转,这时你可以在你的点击这个按钮Button 里面的herf 传参对应的ID,例如href={`跳转页面的网址?operate=edit&id=${id}`},把对应的ID拼接在后面,就可以点击按钮跳转到对应的页面进行修改,这里还涉及一个表单信息的回填问题,可以看看组件库form表单的API,然后就是提交信息,和前面提交一样,和后端讨论需要什么字段(奶妈级别解释字段:字段就是form表单已经一些组件的 name 属性,我们前端的 name 属性就是和后端的给我们的字段一样,两者一定要一样)就传什么字段就可以了,代码段如下:
const getMessageData = id => {
return axios({
url: '接口',
method: 'GET',
data: {
id,
},
}).then((res: any) => {
const { data } = res;
form.setValues({
//这个就是信息回填,这里使用的不是antdesing组件作为参考
sellerAllLimit: data.sellerAllLimit,
sellerLimit: data.sellerLimit,
scenarioSellerLimit: data.scenarioSellerLimit,
startDate: moment.tz(data.startDate, currentTimeZone).format('YYYY-MM-DD HH:mm:ss'),
endDate: moment.tz(data.endDate, currentTimeZone).format('YYYY-MM-DD HH:mm:ss'),
remarks: data.remarks,
});
});
};
//由于一点进来页面就要渲染,所以放在生命周期里面,监听[id]变化
useEffect(() => {
//这里判断是否存在ID原因是,当你点击修改的表单的时候需要信息回填,但是当你点击表单创建也就是所谓的增,是不需要回填的,所以在这里进行一个判断需不需要回填信息
if (id) {
getMessageData(id);
}
}, [id]);
查:表单所谓的查就是表单上面的搜索功能。思路以及操作:搜索功能就Button组件里面有一个onClick 属性,在 onClick 里面添加一个网络请求函数,在里面调用误区(写函数就行,不用+(),例如:submit 而不是 submit()),点击的时候触发网络请求,这时候也是需要传参,一般就是搜索框对应的字段,(具体看后端需要什么字段)
二、表单上面的搜索功能,根据搜索对应的内容显示下面的表单的数据内容 就是调用接口传参数点击事件里面调用这个方法

三、表单上面的Tab切换功能,根据对应的切换对下面的表单进行筛选相应的数据
切换功能:切换筛选主要使用的 Select 这个组件进行筛选,里面有一个 onChange 当你点击这Select 是调用onChange 函数,这里有几个选项就会有几个字断,把对应的字段传过去。代码段如下:注接口没有写 这里不是使用的 antdsing 组件库
const statusOptions = [
//这里的value的0和1是后端需要这样定义的字段
{ label: 'Active', value: 1 },
{ label: 'Inactive', value: 0 },
];
<FormItem>
<Select
name="type"
defaultValue={messageOptions[0].value}
autoWidth
dataSource={messageOptions}
style={{ width: 160 }}
onChange={submit}
/>
</FormItem>
四、表单上面的添加表单信息功能,点击相应的按钮跳转页面或者弹框,创建新的信息
注意事项:在开发过程中,要学会组件化开发,把模块细分,例如网络请求自己创建一个文件service.ts文件,还有其他组件,切记不要写在一起,后期难维护。
本文详细介绍了前端开发中表单的增、删、改、查等基本功能的实现过程,包括使用axios发送网络请求、表单信息的回填与验证、搜索功能、Tab切换筛选以及添加新信息的操作。同时强调了组件化开发和代码组织的重要性,以提高代码的可维护性。

被折叠的 条评论
为什么被折叠?



