关于Banner制作有感(antD+react)

本文分享了使用AntD和React开发Banner组件的经验,强调了项目思路清晰的重要性。详细介绍了如何组织代码,包括List组件的使用、Redux请求函数的编写、接口设计以及组件状态管理。同时指出,理解组件状态控制、善用console.log调试、阅读API文档以及代码复用是提高开发效率的关键。

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

做一个项目思路要清晰。明白自己需要哪些组件,每个组建之间的关系是怎样的,要怎么关联起来。
banner这个界面主要用了List组件来排版。

models里面写redux请求函数,
service里面写对应接口函数。
routes里面写对应的组件,当然一些方法都是封装好的。并且由于第一次实现,所以有些代码会有很多冗余。例如编辑和新建的modal框本来可以复用,可是由于自己不知道该怎么控制modal框的visible,因为对应的父组件传过来的值自组件只能引用,不能返回修改父组件的值,所以就会有些不顺畅,因此用了最笨的办法实现了这两个modal框。每个页面重复了很多代码。后期可优化,但现在我的能力还不行。modal框的visible可以通过model里面的reducers函数来控制,并且需要用到监听,所以需要把redux用的很熟才可以。

先来说接口吧:接口的话对应增删改查四个。create,remove,update,query。
创建需要用到’POST’并且要有请求体body的。由于这是针对同一个用户,所以这个获取的登录的id是从localStorage里面拿到seller的id,然后就可以往这个接口里面传数据。
删除需要本条数据的 ID :通过同样的方式获取到数据的id就可以删除本条数据。
更新数据 也需要回传当前条数据的 id :并且把修改忠厚的数据一并会传到PUT就可以更新数据。
获取数据 只需要GET调用这个接口就好,然后在组件加载的时候componentDidMount然后dispatch,获取数据的请求。也可以在models里面写subscriptions,通过监听,然后更新数据。

现在来说models,
models有四个重要的东西。namespace,函数的名字,state,对应的状态,effects,这个是发送异步请求的,reducers,这是同步操作的函数。

effects里面有对应的发送请求的函数,query,create,update,remove,获取到数据之后通过reducers函数来处理自己想要的数据,然后存储在state里面,然后组件里面通过connect函数就可以用拿到后台的数据。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值