zoukankan      html  css  js  c++  java
  • 一次有趣的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条新闻
    接下来的是点击详情事件进入详情页
  • 相关阅读:
    数据库知识扩展
    数据库遇到的问题——mysql在线修改表结构大数据表的风险与解决办法归纳
    数据库遇到的问题——事务操作时中断导致锁表
    java中常见的内存泄露的例子
    数据库设计中常见表结构分析
    索引失效的7种情况
    DWZ 自定义异常及后台校验2-a链接弹出框
    DWZ 自定义异常及后台校验
    Excl中的数据转换成SQL脚本(含日期写法)
    SpringAop (二)
  • 原文地址:https://www.cnblogs.com/smart-girl/p/9879998.html
Copyright © 2011-2022 走看看