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

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

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

在中间件中使用这三种方式，并且封装了callApi



我们将方法写在action中，callAPI就是我们请求的后端的数据

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

在我们的reducer中，我们会通过type暴露这些数据，并且返回我们的请求结果

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

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

在我们的文件中别忘了使用我们的这些方法

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

再说说我在这个数据中用到的方法吧
通过map循环数据,通过es7的Decorators语法拿到请求数据

如何求那些值呢

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

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

一次有趣的ant-design与后端数据交互的使用的更多相关文章

  1. Ant Design中根据用户交互展示不同的标签

    Ant Design中根据用户交互展示不同的标签 Ant Design使用的是React框架,那么我们先看代码: <Fragment> <a onClick={() => th ...

  2. 对GraphQL-BFF：微服务背景下的前后端数据交互方案的研究-------引用

    随着多终端.多平台.多业务形态.多技术选型等各方面的发展,前后端的数据交互,日益复杂. 同一份数据,可能以多种不同的形态和结构,在多种场景下被消费. 在理想情况下,这些复杂性可以全部由后端承担.前端只 ...

  3. 两种方法实现asp.net方案的前后端数据交互（aspx文件、html+ashx+ajax）

    一个HTML页面只能显示HTML代码信息,不能与数据库进行数据的交互.asp.net方案提供了网页与数据库交互的方法,这里举出两种:①aspx文件 ②ashx文件+ajax技术 一.创建数据库 这里以 ...

  4. vue-resource的使用，前后端数据交互

    vue-resource的使用,前后端数据交互 1:导入vue与vue-resource的js js下载:   https://pan.baidu.com/s/1fs5QaNwcl2AMEyp_kUg ...

  5. 前后端数据交互处理基于原生JS模板引擎开发

    json数据错误处理,把json文件数据复制到----> https://www.bejson.com/ 在线解析json 这样能直观的了解到是否是json数据写错,在控制台打断点,那里错误打那 ...

  6. web前后端数据交互

    前后端数据交互是每一名web程序员必须熟悉的过程,前后端的数据交互重点在于前端是如何获取后端返回的数据,毕竟后端一般情况下只需要将数据封装到一个jsonMap,然后return就完了.下面通过一个li ...

  7. 前端与后端数据交互的方式之ajax

    前端与后端数据交互的方式之Ajax 对于前端学习而言,CSS+HTML+JavaScript的学习在自我学习的情况下掌握也不是很难,但是想要实现前后端的数据交互在没有指导的情况下学习会是一头雾水.接下 ...

  8. 前后端数据交互利器--Protobuf

    Protobuf 介绍 Protocol Buffers(又名 protobuf)是 Google 的语言中立.平台中立.可扩展的结构化数据序列化机制. https://github.com/prot ...

  9. 前后端数据交互(八)——请求方法 GET 和 POST 区别

    WEB 开发同学一看 get 和 post 请求方法的区别,第一感觉都是 So easy! 学习ajax.fetch.axios时,发送网络请求携带参数时,都需要分别处理get和post的参数.所以我 ...

  10. vue 前后端数据交互问题解决

    先在vue项目中配置好路由组件路由 然后写相应组件 2 后端 写接口赔路由 第三  解决跨域问题 处理数据交互 这样前端就拿到了数据

随机推荐

  1. 利用Tarjan算法解决（LCA）二叉搜索树的最近公共祖先问题——数据结构

    相关知识:(来自百度百科)  LCA(Least Common Ancestors) 即最近公共祖先,是指在有根树中,找出某两个结点u和v最近的公共祖先. 例如: 1和7的最近公共祖先为5: 1和5的 ...

  2. GlusterFS分布式存储集群部署记录-相关补充

    接着上一篇Centos7下GlusterFS分布式存储集群环境部署记录文档,继续做一些补充记录,希望能加深对GlusterFS存储操作的理解和熟悉度. ======================== ...

  3. 分布式监控系统Zabbix--完整安装记录（7）-使用percona监控MySQL

    前面已经介绍了分布式监控系统Zabbix-3.0.3-完整安装记录(2)-添加mysql监控,但是没有提供可以直接使用的Key,太过简陋,监控效果不佳.要想更加仔细的监控Mysql,业内同学们都会选择 ...

  4. 小程序encryptedData

    准备知识: Base64编解码 AES算法.填充模式.偏移向量 session_key会话密钥,以及怎么存储和获取 以上3点对于理解解密流程非常重要. 根据官方文档,我梳理了大致的解密流程,如下: 小 ...

  5. 对象&内置对象& 对象构造 &JSON&__proto__和prototype

    原型是一个对象,其他对象可以通过它实现属性继承 原型链:每个对象都会在其内部初始化一个属性,就是__proto__,当我们访问一个对象的属性 时,如果这个对象内部不存在这个属性,那么他就会去__pro ...

  6. 腾讯QQ的商业模式

    近期听到许多关于腾讯QQ的报道,然后想到之前自己在QQ上遇到的一些问题,一瞬间感觉大脑的所有想法喷涌而出. 以前总觉得QQ是个很好的平台,我们可以通过QQ和自己的亲人朋友爱人聊天,有时候还可以在自己的 ...

  7. 结对编程 学习手记ver1.2

        团队成员: 226 高雅智 164刘浩然: 一 结对编程 辛辛苦苦搞了好久的时间,就是没有人家的快,明明算法都差不多,哎~~~ 结对的优势,在于双方互相督促,对于代码能贡献自己的能力,人多力量 ...

  8. 《Linux内核分析》课程第八周学习总结

    姓名:何伟钦 学号:20135223 ( *原创作品转载请注明出处*) ( 学习课程:<Linux内核分析>MOOC课程http://mooc.study.163.com/course/U ...

  9. js实现树形内容展示

    1.首先这里有一个demo,里边有封装好的js文件.地址:http://files.cnblogs.com/files/feifeishi/dtree.zip 2.直接上代码 <div styl ...

  10. 在Java中执行Tomcat中startup.bat

    问题:更改数据库时,需要重启Tomcat服务器,才能把更改后的数据加载到项目中.于是想每次更改数据库时,都调用Java方法,重启Tomcat 代码: Process process = Runtime ...