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

最新推荐文章于 2024-04-24 14:44:27 发布
最新推荐文章于 2024-04-24 14:44:27 发布
阅读量249 收藏
点赞数
文章标签： ant design mysql
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_33669473/article/details/113714173
版权
本文介绍了一个使用Ant Design的Tabs组件展示新闻，并通过Redux Thunk中间件封装请求，实现与后端MySQL数据库交互的案例。详细讲解了如何在action中调用callAPI方法请求数据，以及在reducer中处理并返回请求结果的过程。
摘要由CSDN通过智能技术生成

最近有个需求是新闻时间排序与点击量排序，数据库中存储的新闻是按照时间顺序排序的，从后台数据中取出数据，在前端进行页面展示即可。

我用到了ant-design中的Tabs切换页,样式大概如下图。

be3f66f725efc35a259cd996f1118f16.png

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

当然在store里面有引用redux-thunk

9879998.html

3e570ca6f5bd86bd2abd01914470f5e5.png

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

ca869428caa75dc8836708be17fe20ad.png

![](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方法

b8ae1b75761ee3e42b056e298ee98a80.png

![](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)

ea13ae4b55a88e5dfbc7ec6a7ce81735.png

如何求那些值呢

8856d5710e9dd6adfe61a204f7b25f46.png

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

4bf0d3a98edfe46849db04cc91ca5859.png

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

db142e9c39f6589f7ac22e56c13a4aad.png

零茏
关注
ant design mysql_基于AntDesign开发的后端管理系统
weixin_31975689的博客
02-05 605
闲来无事，使用antdesign+koa开发了一套后台管理的demo，并借此机会整理下自己所学的知识，代码开放出来。有不足之处，希望大家指点。CLReactAntDesign介绍CLReactAntDesign是基于AntDesign2.0+开发的后端页面例子，整合react，react-router,react-redux，react-router-redux。进行页面状态控制实用fetch进行...
ant design mysql_【后台管理系统】—— Ant Design Pro组件使用（一）
weixin_36183945的博客
02-22 347
var qiniu = require('qiniu-js')import axios from'axios';import configs from'@/utils/env'import { message } from'antd';//七牛云上传，input， onchange事件export functionhandleImageUpload(file, type, resName) {//...
ant 入门6 连接Mysql
origin 专栏
05-28 316
一个.sql数据库脚本如何通过Ant构建到数据库中，例子是网上的，调试过程中遇到不少问题，记录如此： 你所需要的文件： ant.sql 测试用的文件，可以自己编写 mysql-connector-java-5.1.6-bin.jar 连接数据库驱动jar包 方法一 ant_script.xml [code="java"] [/code] 方法二 ...
ant mysql_ant 连接Mysql
weixin_30036289的博客
02-06 398
1. 2. 3. 4. 5. driver="com.mysql.jdbc.Driver"6. src="ant.sql"7. url="jdbc:mysql://localhost:3306/?autoReconnect=true"8. userid="root"9. ...
Excel导入导出（ant design+spring boot）
大帅的博客
11-15 1万+
1、运用ant design的upload组件，将Excel中的数据批量导入到数据库 upload组件的action往后台传递的是multipartfile类型，而使用jxl/poi方式读取文件要求文件类型为file，因此存在multipartfile转换file的过程。 转换方法为：将multipartfile转换为输入流(调用getInputStream())，然后直接读取；
Node+Vue3+mysql+ant design实现前后端分离——表格的添加、修改和删除
最新发布
qq_53541336的博客
04-24 892
在上一篇文章中，我们分享了如何运用NodeJS、Vue、MySQL以及其他技术来实现后台管理系统中的表格查询功能。今天，我们将继续探讨另外三个重要的功能实现原则。这些原则在构建后台管理系统时至关重要，同时还有导入和导出这两种功能也必不可少。关于导入和导出功能，我们会在下一次更新中详细介绍。下文中与上一篇文章重复的部分就不再进行详述，不懂的同学可以先看看上篇文章哦。
基于springboot，ant-design-vue-pro的简易后台管理系统.zip
02-24
在本项目中，ant-design-vue-pro作为前端界面，负责展示用户界面，与后端进行数据交互，通过axios等库发起HTTP请求获取或提交数据，实现用户操作的响应和页面动态更新。 **简易后台管理系统** 结合以上两部分，我们...
blog:个人博客（Golang + Ant Design Pro 4）
03-21
这里，我们关注的是使用Golang后端框架Gin与前端UI库Ant Design Pro 4的结合。这样的组合可以带来高效、美观且响应式的博客系统。 **Golang Gin框架** Golang是一种静态类型的、编译型的语言，以其简洁的语法、高效...
使用Vue+Django+Ant Design做一个留言评论模块的示例代码
11-20
在这个示例中，我们探讨如何使用Vue.js、Django和Ant Design构建一个留言评论模块。首先，我们将关注数据库设计，然后讨论后端接口的实现，最后提到前端展示和交互。 **1. 数据库设计** 留言模块的核心是留言表...
Ant学习例子2(用ant发布web项目，及连接数据库)
ZKLxuankai的专栏
11-21 3201
build.xml
ant design mysql_ant design layout 显示问题
weixin_36179777的博客
02-22 136
import React, { Component } from 'react';import { Layout, Menu, Icon } from 'antd';const { Header, Sider, Content } = Layout;import './App.css';class App extends Component {state = {collapsed: false,}...
vue3+node.js+mysql+ant design实现表格的查询功能
qq_53541336的博客
04-22 931
今日主要分享如何运用vue、nodejs、mysql及ant design构建表格数据查询功能，这也是众多项目开发者关注的问题。最关键在于前端与后端的协作，后端数据则通过nodejs编写。尽管涉及多项技术，看似复杂，但实际操作却并非困难。当然，首要条件是熟悉并掌握各项技术。
Ant Design UI组件之Select踩坑
weixin_34396103的博客
02-27 4753
Ant Design UI组件之Select踩坑 前言 在使用Ant design UI组件时总会遇到一些奇奇怪怪的问题，在本篇中将总结中在使用Select中几种容易常见的问题，持续更新 遇到的问题 在初始化Select值,如何根据value显示对应文本 实现代码如下 ... this.props.form.setFieldsVal...
极客react之Ant Design Pro系列快速入门（二）--登录与默认路径篇
gosenkle的专栏
08-13 1万+
登录 在启动篇中加载全局路由时有一句代码如下，方法返回路径和对应的界面 const routerData = getRouterData(app);   路由配置对象 const routerConfig = { '/': { component: dynamicWrapper(app, ['user', 'login'], () => i...
Ant Design介绍
yueguanyun的专栏
10-13 2万+
Ant Design介绍 在中台产品的研发过程中，会出现不同的设计规范和实现方式，但其中往往存在很多类似的页面和组件，给设计师和工程师带来很多困扰和重复建设，大大降低了产品的研发效率。我们（蚂蚁金服体验技术部）经过大量的项目实践和总结，沉淀出一个中台设计语言 Ant Design。旨在统一中台项目的前端 UI 设计，屏蔽不必要的设计差异和实现成本，解放设计和前端的研发资源。 Ant
AntDesign安装和环境配置
Top5软件工程硕士，先后在京东、字节从事多年Java后端开发、实时和离线大数据开发
09-10 1万+
1https://nodejs.org/en/下载node.js 并安装 一直点击next即可，可参考：Node.js安装及环境配置之Windows篇https://blog.csdn.net/qq_26562641/article/details/72235585 2 无需配置环境变量，cmd下输入：node --version 输出版本号则表示node.js安装成功，目前node...
ant design pro超详细入门教程
wwf1225的博客
01-03 3973
https://www.cnblogs.com/freely/p/10874297.html
一起玩react 10分钟带你入门ant-design-pro
热门推荐
一步一个脚印
01-02 3万+
前言这篇文章主要根据自己最近一个月从学习react到最近实际使用ant-design-pro，谈一谈自己的使用心得，个人见解有误的地方望大家指正！1、为什么要选择ant-design-pro？其实我来目前公司之前，公司前端技术栈是vue+vuex+elementui+axios，但是奈何公司前端利用vue做出来东西表现确实一般，更重要的是代码有点乱，用我自己的话说就是野路子太多（当然野路子多会很方便
基于React+Node+Ant Design+Mysql的一个后台管理系统
Limcong_1999的博客
04-11 797
这是我项目的一个Demo版本，稍加改动就可以成为一个框架去使用。 直接上链接：同校的你后台管理 里面有现成的sql文件，直接导入即可，里面的数据已经基本清空了，可以随意diy 里面有一个MysqlHelper是我自己写的一个mysql糖，当然了应用性不强只能写一些基本的增删改查。如果需要写复杂的sql语句只能使用里面的SQL方法。 后续将写出一个文档来解释这套框架的使用方法。 我只是一个...
ant design pro开发的中后台系统完整教程
项目中使用MySQL数据库进行数据存储，并提供了一个名为MP_V2的数据库文件供用户导入使用。开发者需要在自己的MySQL环境中创建MP_V2数据库，并导入提供的sql文件进行初始化。 4. Node.js版本控制 Node.js是一个基于...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值