ant design入门_ant design pro 入门(1)

本文介绍如何使用React框架结合AntDesign UI库搭建后台管理系统。包括新增页面、路由配置、组件创建及数据请求流程等关键步骤。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

之前没有接触过react。新工作需要用react框架,另外配合ant design ui框架来实现一个后台管理系统的编写,上周学习了它提供的各个组件并试着去编写了一些页面,大致有了了解。‘

鉴于网上没有很好的文章很好的讲解一下这个框架,同时也是自己对最近的一个总结。

前期的克隆工程以及npm start就略过了,还有各个文件夹的用途就不用说了,资料有得.我主要想说一下新添加一个页面并从服务端获得数据进行渲染

1、添加一个路由

首先在src/common/menu.js里面添加一个数据配置,结果如下,

295fe4d56e87?tt_from=weixin

另外在menu.js中添加一个路由

295fe4d56e87?tt_from=weixin

配置路由

,这样页面中就会出现一个效果

295fe4d56e87?tt_from=weixin

2. 在指定文件夹下新建一个组件,这样route就可以进行访问了

根据上图的路由指向../routes/group/student/mine,我需要在/routes/group/student/ 中新建一个mine.js文件。可以先写一个简单的页面(没有任何数据来源这是一个展示hello world之类的,再次略过),展示我的代码

295fe4d56e87?tt_from=weixin

稍微讲解一下吧看下面

295fe4d56e87?tt_from=weixin

链接了一个mine model,因为

295fe4d56e87?tt_from=weixin

这里声明了一下是在mine model层里面的

295fe4d56e87?tt_from=weixin

connect之后this.props就会添加一个dispatch属性,这里就可以进行请求了

295fe4d56e87?tt_from=weixin

这里的是在请求完毕后就会返回一个mined对象,里面有一个对象叫做mineData属相值,当然这个名字是自定义的,你也可以写你定义的不过后面返回数据的时候也要相应进行更改,切记切记切记

3 编写model层

因为用到了mine这个model,所以在src/models文件夹下新建一个mine.je进行事件的管理,派发以及返回

295fe4d56e87?tt_from=weixin

具体暂时还没天明白这里面各个函数的意思,大致意思明白的,namespace命名空间,state是所有的状态数据,effect是事件的一个派发接收,reduce是返回一个想要的数据格式,这里面用到了一个getMIneData是在另一个页面中用到的,同样的在相应文件夹下service新建一个mine.js

4 service层

295fe4d56e87?tt_from=weixin

这里返回一个函数,并且函数里面就行了请求并写了请求接口这样就可以在.roadhogrc.mock.js里面进行编写一个假数据

5 数据

295fe4d56e87?tt_from=weixin

接口请求

295fe4d56e87?tt_from=weixin

这里运用的一个组件

295fe4d56e87?tt_from=weixin

返回数据

6 验证数据

295fe4d56e87?tt_from=weixin

在这里进行一个数据的打印

295fe4d56e87?tt_from=weixin

在控制台里面看到了数据

295fe4d56e87?tt_from=weixin

页面中也看到了效果

至此,就有了一个大致的了解

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值