关于Banner制作有感（antD+react）

做一个项目思路要清晰。明白自己需要哪些组件，每个组建之间的关系是怎样的，要怎么关联起来。
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函数就可以用拿到后台的数据。

接下来是组件里面，组件的话需要定义自己需要用到的函数，以及引用antD里面的组件，这样会让自己的代码较为简洁，并且可以更加清晰。
这种东西需要多熟悉代码才可以的，多看代码才知道该怎么写，每天进步一点点就好。

特别值得注意的是，每一个组件对应的状态，应给怎么控制，一定要将它们的状态对应起来。要学会用console.log打印自己想要打印出来的值，然后才能够清楚怎么获取它，并且怎么把它传到该传的位置上。另外，在组件里面dispatch参数的时候，一定要看清楚API里面的对应字段的类型，比如是一个数组，就不能直传一个字符串回去。所以认真阅读API也是很关键的。还有很多东西需要学，所以需要继续加油。由于之前自己学的东西没有那么多，所以进度很慢，所以就慢慢来，看看别人的代码，实现别人实现的功能，然后慢慢的就会成长到别人的程度。慢慢得就会变得厉害了。思路很重要，不清楚的时候可以在本子上面写写画画，然后理出一条路子。写代码上手就会很快了。
另外很重要的一点就是使用别人家的组件一定要认真阅读人家的API，然后自己要设定什么样的格式就要通过这些API来修改。

关于Banner制作有感（antD+react）相关推荐

antd react table 嵌套子表格例子
antd react table 嵌套子表格例子 import { Button, TableColumnsType } from 'antd'; import { Badge, Dropdown, ...
【CSS】课程网站 Banner 制作 ② ( Banner 栏版心盒子测量 | Banner 版心盒子模型左侧导航栏代码示例 )
文章目录一.Banner 栏版心盒子测量 1.测量版心元素尺寸 2.课程表测量二.Banner 版心盒子模型左侧导航栏代码示例 1.HTML 标签结构 2.CSS 样式 3.展示效果一.Bann ...
html5动画 banner 制作工具
html5和css3.0 的出现可以很方便的实现很多网页酷炫的效果,再次给大家推荐一个在线动画 banner 制作工具 html5maker 希望对大家有用. 官网: http://html5mak ...
antd + react model自定义footer_更骚的create-react-app开发环境配置craco
背景使用 CRA 脚手架创建的项目,如果想要修改编译配置,通常可能会选择 npm run eject 弹出配置后魔改.但是,eject 是不可逆操作,弹出配置后,你将无法跟随官方的脚步去升级项目的 ...
antd+react ---手机号校验(流程中使用)
一.背景:前端框架 react+antd 1.在form表单中输入手机号校验,并且当校验通过时,则允许表单提交数据,,未通过,则阻止该表单提交数据 ,参考 antd API ,部分代码如下: { ...
ANTD react 手机号(验证码)登陆 + 账号登陆(图形验证码)
这种页面可能是大家常用的,但重写比较费时间,之前没有搜到完整的,在这里自己总结一下,方面复用代码: <LoginFormformRef={formRef} ...
antd + react model自定义footer_使用ESLint+Prettier规范React+Typescript项目
项目开发过程中,大多数时候我们使用别人搭建好的脚手架编写代码,是项目的参与者.对于一些细节往往被忽略了.其中代码检测本身是一类非常简单的配置,但涉及不同框架和语言组合使用的时候,可能比想象中要困难,本 ...
简单banner制作
简单做了一个banner,效果不是很好,主要温习了蒙版知识和滤镜的使用,其中使用(图像 > 调整 > 照片滤镜, 可以让图片融合得更协调,另外图片上添加斜线做背景,这些小技巧在做bann ...
【CSS】课程网站 Banner 制作 ① ( Banner 栏测量 | Banner 盒子模型代码 | 代码示例 )
文章目录一.Banner 栏测量 1.盒子模型尺寸测量 2.背景测量切图二.Banner 盒子模型代码 1.HTML 标签结构 2.CSS 样式 3.显示效果绘制下图矩形框内容 : 一.Bann ...

关于Banner制作有感（antD+react）

关于Banner制作有感（antD+react）相关推荐

最新文章

热门文章