浅谈 Ant Design Pro
1、开门见山css
Ant Design Pro 是一套基于 React 技术栈的单页面应用，咱们提供的是前端代码和本地模拟数据的开发模式， 经过 Restful API 的形式和任何技术栈的服务端应用一块儿工做，技术组成主要是react+redux+dva+antd+fetch+roadhog，说白了就是基于React的一套脚手架，UI是 Ant Design ，框架是 Ant Design Pro ，脚手架安装完成，运行起来的样子：html
2、云里雾里前端
一、脚手架的安装步骤react
使用命令行工具git
$ npm install ant-design-pro-cli -g npm
$ mkdir my-project redux
$ cd my-project 浏览器
$ pro new
antd
$ npm startreact-router
二、目录结构分析
咱们已经为你生成了一个完整的开发框架，提供了涵盖中后台开发的各种功能和坑位，下面是整个项目的目录结构。
三、src文件夹 轻描淡写
而src中自己又包含着不少的子文件夹。
其中，咱们最经常使用的应该了routes，services，models以及components。
下面，咱们来依次了解一下这四个文件夹的做用。
- routes：每一个路由对应的页面组件文件。主要定义具体页面的基本结构和内容。
- services：用于与后台交互、发送请求等。
- models：用于组件的数据存储，接收请求返回的数据等。
- components：组件文件夹。每一个页面多是由一些组件组成的，对于一些相对通用的组件，建议将该组件写入components文件夹中，并在routes文件夹中的文件引入来使用。
3、疑难杂症
一、css样式的处理
Ant Design Pro 默认使用 less 做为样式语言，建议在使用前或者遇到疑问时学习一下 less 的相关特性。
用 less 写样式好像没什么改变，只是类名比较简单（实际项目中也是这样），js 文件的改变就是在设置 className 时，用一个对象属性取代了原来的字符串，属性名跟 less 文件中对应的类名相同，对象从 less 文件中引入。
使用：
编辑：
在上面的样式文件中，.title 只会在本文件生效，你能够在其余任意文件中使用同名选择器，也不会对这里形成影响。不过有的时候，咱们就是想要一个全局生效的样式呢？可使用 :global。
二、ant design pro数据流走向
common
- menu.js
- 主要设置导航栏的信息，如跳转连接和所显示的文字和图标。以下所示：
-
- router.js
这个文件很重要，里面涉及了路由，数据还有页面，主要将路由和页面关联，以及将数据和页面关联。以下所示：
从上面代码能够看出，一个页面能够关联多个数据，这个根据页面的需求来决定，只要是关联的数据均可以在页面中拿到。dynamicWrapper 函数所作的工做就是将页面与model关联起来，其中第二个参数就是model的文件名。
models
在第二部分框架的基本结构中就说了models是属于dva的，因此若是你以前就使用过dva的话，那这个框架就用起来很是驾轻就熟，model是dva的核心部分，ant-design-pro就是针对dva的一次最佳实践。下面看下model文件的主要结构：
- namespace：该字段就至关于model的索引，根据该命名空间就能够找到页面对应的model;
- effects： 处理全部的异步逻辑，将返回结果以Action的形式交给reducer处理；
- reducers：处理全部的同步逻辑，将数据返回给页面；
补充：在effects中调用了service中所封装的后台接口，该调用方式是ES6中的generator函数，该函数使得异步操做如同同步操做同样。call就至关于一个执行器，在call内部对generator函数进行了处理
routes
在routes中主要涉及两个操做，第一个就是如何拿到数据，第二个就是如何发送同步或异步请求来更新页面数据。
- 如何拿到数据
在该模块中，就是每一个路由所对应的页面，下面主要了解数据是如何在页面中取到的：
从上面的代码能够看到在页面中导入了dva框架，用dva的connect方法能够拿到全部的state，咱们只须要在页面中获取须要的state便可。拿到以后全部的数据都是以props的形式嵌入页面的，也就是咱们就像操做props来对待这些数据便可。
- 如何更新页面数据
在和model关联的页面中，都会给页面传入dispatch() 这个方法，该方法就是分发的意思，能够发出一个Action，Action是Redux中的概念，发出这个Action后就会找到页面所对应的model，而后作出相应的处理。以下：
dispatch中的参数就是一个Action。第一个type字段由两部分组成，前半部分是model的namespace（命名空间），后半部分是该Action的处理位置，对应model中的effects（处理异步逻辑）,或reducers（处理同步逻辑）。
services
这个模块中的逻辑相对比较简单，就是模仿一下后台接口的实现，对请求进行了进一步的封装。
在该层将request的结果返回给model层，放在async内部的函数都是同步的。
Mock
Mock的功能就是能够在本地模拟后台的行为，在框架中主要涉及到.roadhogrc.mock.js文件。若是开启代理的话，当发起请求时就会被代理到本地来处理，根据请求方式和URL就能够返回不一样的数据。
总结
浏览器输入路径->脚手架获取路径->经过common匹配路径(分级匹配)->加载layouts页面->加载routes页面，调用
dispatch()请求数据,加载->models模型接收，并调取services请求，并返回且封装->将请求到的参数传入components控件中->加载components控件，经过数据渲染，返回控件html。
大概流程就是这样，antd pro框架已经集成了dva请求框架，和react-router路由框架，开发须要的只是去common中添加新页面的path，去routers中新增页面，若是有可复用的页面控件的话还能够去components中封装起来，而后去models中新增长一个模型，services中增长一个访问路径。