一次有趣的ant-design与后端数据交互的使用

最近有个需求是新闻时间排序与点击量排序,数据库中存储的新闻是按照时间顺序排序的,从后台数据中取出数据,在前端进行页面展示即可。
我用到了ant-design中的Tabs切换页,样式大概如下图。
一次有趣的ant-design与后端数据交互的使用
其实这个项目里面最令我欣喜的是reducer中间件的封装,无需通过fetch请求数据这些,而是使用另外的封装中间件的方式
当然在store里面有引用redux-thunk
一次有趣的ant-design与后端数据交互的使用
一次有趣的ant-design与后端数据交互的使用

项目首先是使用了三种请求方式
一次有趣的ant-design与后端数据交互的使用

一次有趣的ant-design与后端数据交互的使用

在中间件中使用这三种方式,并且封装了callApi
一次有趣的ant-design与后端数据交互的使用

一次有趣的ant-design与后端数据交互的使用
一次有趣的ant-design与后端数据交互的使用
一次有趣的ant-design与后端数据交互的使用

我们将方法写在action中,callAPI就是我们请求的后端的数据
一次有趣的ant-design与后端数据交互的使用

![](https://img2018.cnblogs.com/blog/1037363/201810/1037363-20181030215504862-1545352272.png)

在我们的reducer中,我们会通过type暴露这些数据,并且返回我们的请求结果
一次有趣的ant-design与后端数据交互的使用

一次有趣的ant-design与后端数据交互的使用

不要忘记合并我们的reducer方法
一次有趣的ant-design与后端数据交互的使用

![](https://img2018.cnblogs.com/blog/1037363/201810/1037363-20181030215844812-1960971869.png)

在我们的文件中别忘了使用我们的这些方法
一次有趣的ant-design与后端数据交互的使用

![](https://img2018.cnblogs.com/blog/1037363/201810/1037363-20181030220118887-1234711062.png)

再说说我在这个数据中用到的方法吧
通过map循环数据,通过es7的Decorators语法拿到请求数据
一次有趣的ant-design与后端数据交互的使用

一次有趣的ant-design与后端数据交互的使用

如何求那些值呢

一次有趣的ant-design与后端数据交互的使用

我们要求的是展示最新的5条新闻

一次有趣的ant-design与后端数据交互的使用

接下来的是点击详情事件进入详情页

一次有趣的ant-design与后端数据交互的使用

上一篇:XmlSerializer 对象的Xml序列化和反序列化


下一篇:2014 Super Training #6 H Edward's Cola Plan --排序+二分