一次有趣的ant-design与后端数据交互的使用
最近有个需求是新闻时间排序与点击量排序，数据库中存储的新闻是按照时间顺序排序的，从后台数据中取出数据，在前端进行页面展示即可。
我用到了ant-design中的Tabs切换页,样式大概如下图。
其实这个项目里面最令我欣喜的是reducer中间件的封装，无需通过fetch请求数据这些，而是使用另外的封装中间件的方式
当然在store里面有引用redux-thunk
)
项目首先是使用了三种请求方式
在中间件中使用这三种方式，并且封装了callApi
我们将方法写在action中，callAPI就是我们请求的后端的数据
在我们的reducer中，我们会通过type暴露这些数据，并且返回我们的请求结果
不要忘记合并我们的reducer方法
在我们的文件中别忘了使用我们的这些方法
再说说我在这个数据中用到的方法吧
通过map循环数据,通过es7的Decorators语法拿到请求数据
一次有趣的ant-design与后端数据交互的使用的更多相关文章
- Ant Design中根据用户交互展示不同的标签
Ant Design中根据用户交互展示不同的标签 Ant Design使用的是React框架,那么我们先看代码: <Fragment> <a onClick={() => th ...
- 对GraphQL-BFF：微服务背景下的前后端数据交互方案的研究-------引用
随着多终端.多平台.多业务形态.多技术选型等各方面的发展,前后端的数据交互,日益复杂. 同一份数据,可能以多种不同的形态和结构,在多种场景下被消费. 在理想情况下,这些复杂性可以全部由后端承担.前端只 ...
- 两种方法实现asp.net方案的前后端数据交互（aspx文件、html+ashx+ajax）
一个HTML页面只能显示HTML代码信息,不能与数据库进行数据的交互.asp.net方案提供了网页与数据库交互的方法,这里举出两种:①aspx文件 ②ashx文件+ajax技术 一.创建数据库 这里以 ...
- vue-resource的使用，前后端数据交互
vue-resource的使用,前后端数据交互 1:导入vue与vue-resource的js js下载: https://pan.baidu.com/s/1fs5QaNwcl2AMEyp_kUg ...
- 前后端数据交互处理基于原生JS模板引擎开发
json数据错误处理,把json文件数据复制到----> https://www.bejson.com/ 在线解析json 这样能直观的了解到是否是json数据写错,在控制台打断点,那里错误打那 ...
- web前后端数据交互
前后端数据交互是每一名web程序员必须熟悉的过程,前后端的数据交互重点在于前端是如何获取后端返回的数据,毕竟后端一般情况下只需要将数据封装到一个jsonMap,然后return就完了.下面通过一个li ...
- 前端与后端数据交互的方式之ajax
前端与后端数据交互的方式之Ajax 对于前端学习而言,CSS+HTML+JavaScript的学习在自我学习的情况下掌握也不是很难,但是想要实现前后端的数据交互在没有指导的情况下学习会是一头雾水.接下 ...
- 前后端数据交互利器--Protobuf
Protobuf 介绍 Protocol Buffers(又名 protobuf)是 Google 的语言中立.平台中立.可扩展的结构化数据序列化机制. https://github.com/prot ...
- 前后端数据交互(八)——请求方法 GET 和 POST 区别
WEB 开发同学一看 get 和 post 请求方法的区别,第一感觉都是 So easy! 学习ajax.fetch.axios时,发送网络请求携带参数时,都需要分别处理get和post的参数.所以我 ...
- vue 前后端数据交互问题解决
先在vue项目中配置好路由组件路由 然后写相应组件 2 后端 写接口赔路由 第三 解决跨域问题 处理数据交互 这样前端就拿到了数据
随机推荐
- MariaDB 安装与启动 过程记录
1. 安装之前的准备工作 rpm -qa |grep mysql rpm -qa |grep mariadb 按照查出来的软件包使用 yum remove 全部卸载,当然也可以 yum remov ...
- Mongodb主从复制/ 副本集/分片集群介绍
前面的文章介绍了Mongodb的安装使用,在 MongoDB 中,有两种数据冗余方式,一种 是 Master-Slave 模式(主从复制),一种是 Replica Sets 模式(副本集). Mong ...
- Python自动化运维工具-Fabric部署及使用总结
使用shell命令进行复杂的运维时,代码往往变得复杂难懂,而使用python脚本语言来编写运维程序,就相当于开发普通的应用一样,所以维护和扩展都比较简单,更重要的是python运维工具fabric能自 ...
- 回溯法解n皇后问题
#include<bits/stdc++.h> using namespace std; int n,sum; int c[100]; void search(int cur){ if(c ...
- 代码规范与复审2——个人博客作业week
一.关于编程规范的重要性论证 1.不支持. 1)编程规范有利于自己提高编程效率和编程质量.编码是程序员的职责,一个好的信息技术产品必然有高质量的代码,高质量的代码首先 一点它必须遵守某种编程规范.如果 ...
- android开发之图表
在这里使用的插件为Mpchart,只以折线图为例.首先需要导入
- 福州大学软件工程1816 | W班 作业成绩排名汇总
评分链接 第一次作业--准备篇 第二次作业--个人项目实战 第三次作业--原型设计(结对第一次) 第四次作业--团队展示(团队) 第五次作业--项目选题报告(团队) 第六次作业--结对第2次作业--W ...
- Vue.directive注册指令
指令定义函数提供了几个钩子函数(可选): vue指令的生命周期 bind: 只调用一次,指令第一次绑定到元素时调用,用这个钩子函数可以定义一个在绑定时执行一次的初始化动作. inserted: 被绑定 ...
- Angular $cookieStore简单应用
angular.module('cookieStoreExample', ['ngCookies']) .controller('ExampleController', ['$cookieStore' ...
- Freemarker空值判断
freemarker中显示某对象使用${name}. 但如果name为null,freemarker就会报错.如果需要判断对象是否为空: <#if name??> …… </#if& ...