前端开发必做功能以及需求

本文详细介绍了前端开发中表单的增、删、改、查等基本功能的实现过程,包括使用axios发送网络请求、表单信息的回填与验证、搜索功能、Tab切换筛选以及添加新信息的操作。同时强调了组件化开发和代码组织的重要性,以提高代码的可维护性。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

开发经常做的一些功能需求 (希望对于像我这样的前端小白有帮助,加油各位朋友

一、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文件,还有其他组件,切记不要写在一起,后期难维护。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值