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


    最近有个需求是新闻时间排序与点击量排序,数据库中存储的新闻是按照时间顺序排序的,从后台数据中取出数据,在前端进行页面展示即可。
    我用到了ant-design中的Tabs切换页,样式大概如下图。

    其实这个项目里面最令我欣喜的是reducer中间件的封装,无需通过fetch请求数据这些,而是使用另外的封装中间件的方式
    当然在store里面有引用redux-thunk

    项目首先是使用了三种请求方式

    ![](https://img2018.cnblogs.com/blog/1037363/201810/1037363-20181030214152597-643589579.png)
    在中间件中使用这三种方式,并且封装了callApi ![](https://img2018.cnblogs.com/blog/1037363/201810/1037363-20181031215044212-402436421.png)
    ![](https://img2018.cnblogs.com/blog/1037363/201810/1037363-20181030214441303-552877183.png) ![](https://img2018.cnblogs.com/blog/1037363/201810/1037363-20181030214458122-479208407.png) ![](https://img2018.cnblogs.com/blog/1037363/201810/1037363-20181030214503677-1513281725.png)
    我们将方法写在action中,callAPI就是我们请求的后端的数据 ![](https://img2018.cnblogs.com/blog/1037363/201810/1037363-20181031215212387-148455378.png)
    ![](https://img2018.cnblogs.com/blog/1037363/201810/1037363-20181030215504862-1545352272.png)
    在我们的reducer中,我们会通过type暴露这些数据,并且返回我们的请求结果 ![](https://img2018.cnblogs.com/blog/1037363/201810/1037363-20181031215305490-1766090911.png)
    ![](https://img2018.cnblogs.com/blog/1037363/201810/1037363-20181030215719660-900920768.png)

    不要忘记合并我们的reducer方法

    ![](https://img2018.cnblogs.com/blog/1037363/201810/1037363-20181030215844812-1960971869.png)
    在我们的文件中别忘了使用我们的这些方法 ![](https://img2018.cnblogs.com/blog/1037363/201810/1037363-20181031215447337-1825589246.png)
    ![](https://img2018.cnblogs.com/blog/1037363/201810/1037363-20181030220118887-1234711062.png)
    再说说我在这个数据中用到的方法吧 通过map循环数据,通过es7的Decorators语法拿到请求数据 ![](https://img2018.cnblogs.com/blog/1037363/201810/1037363-20181031221534268-1407592676.png)
    如何求那些值呢
    我们要求的是展示最新的5条新闻
    接下来的是点击详情事件进入详情页
  • 相关阅读:
    jvm基本结构和解析
    多态的意思
    java中对象的简单解读
    double类型和int类型的区别
    python 解析xml文件
    win10不能映射Ubuntu共享文件
    Qt程序打包
    Ubuntu boot分区文件误删,系统无法启动,怎么解
    ubuntu Boot空间不够问题“The volume boot has only 5.1MB disk space remaining”
    Ubuntu 分辨率更改 xrandr Failed to get size of gamma for output default
  • 原文地址:https://www.cnblogs.com/smart-girl/p/9879998.html
Copyright © 2020-2023  润新知