ant design pro 入门(1)

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

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

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

1、添加一个路由

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


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


配置路由

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


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

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


稍微讲解一下吧看下面



链接了一个mine model,因为


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


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


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

3 编写model层

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


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

4 service层

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

5 数据


接口请求


这里运用的一个组件


返回数据

6 验证数据

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


在控制台里面看到了数据


页面中也看到了效果

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

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,908评论 18 139
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 173,237评论 25 708
  • 从未见过爱情的舍利子吗? 翻开这一只金匣吧。 看到这本书的第一时间,我在想这本书为何取名为《匣心记》呢?在我的...
    汪星人爱星辰阅读 984评论 0 48
  • 操作元素的class列表和内联样式是数据绑定的一个常见需求,因为它们都是属性,所以可用v-bind处理,通过表达式...
    JunChow520阅读 1,540评论 1 1