ant design proV1.0的采坑之旅 （动态创建菜单、访问mock数据、富文本编辑器）
最近公司做一个后台管理系统，犹豫半天还是想用ant design，后来发现他们有现成的脚手架 ant design pro ( github地址 )，果断拉代码下来运行起来。
一：ant design pro 项目目录结构和流程
整体目录大概长这个样子
src里面是这样子
重要的就是mock文件和src文件咯，mock文件里面主要是用来本地构建请求返回的假数据（不是从服务器返回的数据），src则是存放整个项目相关的文件，接下来就重点讲解一下。
common：只有menu.js和router.js 前者是定义的菜单列表，这是因为ant design pro项目是写死的菜单列表 后面会讲如何动态构建菜单。后者是定义的整个项目的路由列表（也就是你访问每一个页面的路径都需要提前在这里定义好。）。
component：封装的一些基础UI组件（小零件）
layouts : ant design pro项目一些公共的组件比如：头部、尾部、构建菜单这些
routes：UI 组件（也就是每个路由对应的页面组件文件）
models：容器组件（用于组件的数据存储，接收请求返回的数据等）
services：请求服务器的接口列表、用于与后台交互、发送请求等
utils：封装的一些工具
index.js :整个项目的入口 有使用dva（小女子还没研究过，后面会深入研究。）
router.js：整个项目的路由入口 会有权限判断 （自己把utils文件下面几个文件的代码好好读一遍就能知道个大概了）
那么我们就可以好好捋一捋整个流程了
1、首先你要访问用户列表，那你就必须先去common文件夹下的router.js文件里面定义
也就是将‘/userManage/userlist’这个路由指向routes文件夹下的User/list页面。而其中dynamicWrapper方法则是将该页面与models文件夹下的user、login关联。只有关联后，页面才能访问models的数据。（我自己尝试后得知其他页面关联了的models也能访问。也就是路由A关联了user 路由B关联device 那么A页面也是能访问device的，B页面是能访问user的，但是如果都没关联customer，那A、B都是没法访问customer的，搞不懂为何这么设计！！）
2、接下来就应该根据定义的路由去构建菜单。
可以看出是由父节点菜单path+子节点菜单path组合而成
3、点击菜单的时候是不是就跳转到了‘../routes/User/list’页面呢？
进入页面的时候 是不是就应该请求列表数据？前面已经数过了 routes里面是纯UI组件，只负责页面展示，那么要展示的数据以及要提交给服务器的数据都必须向models去请求，或者提交给models去处理。两者要交互必须先connect起来。这样在UI组件就可以通过this.props拿到models的数据。
@connect(({ user, loading }) => ({
user,
loading: loading.models.system,
}))
第一个user表示的是user这个model,也就是当前页面要访问那几个models都必须这么先关联起来。loading是来自dva,可以监听models的状态。然后在页面就可以开始请求。
componentDidMount() {
this.props.dispatch({ //dispatch相当于触发一个action
type: 'user/userListfetch',// models文件夹下user文件里面effects下面的*userListfetch方法
payload: data // 提交的参数
});
}
3、然后我们再跟踪到models文件夹下的user文件。
namespace：表示改models的名称，
state：表示这个models下存储的数据，
effects：主要接收UI组件发送过来的action，
reducers：数据处理，存储到state.
*fetch(_, { call, put }) {
const response = yield call(queryUsers); // 请求services文件夹
yield put({ // 请求成功后 执行 reducers里面的save方法
type: 'save',
payload: response,
});
},
save(state, action) {
return {
...state,
list: action.payload, // 把请求的结果放到state的list里面
};
},
这样 在routes/user/list里面打印 this.props就一定是这样的结构
{
user:{ // user对应的就是namespace
list:[....] ,// ....表示请求拿到的值
currentUser: {...},
menuData: [....],
}
........// 还有其他属性 来自dva或者ant design pro自己封装的东西 比如form、loading、routerData等等
}
4、继续跟踪到services文件夹下
就是向服务器进行请求。
---------------------------------------------自此 整个流程结束---------------------------------------------------------
二、Ant Design Pro使用技巧之mock数据地址改为服务器地址
第一步：package.json里面加一行
"start": "cross-env ESLINT=none roadhog dev",
"start:no-proxy": "cross-env NO_PROXY=true ESLINT=none roadhog dev", // 表示配置代理服务器的启动方式
第二步：.roadhogrc.mock.js文件
// 是否禁用代理
const noProxy = process.env.NO_PROXY === 'true';
// 将所有以/api/开头的GET和POST请求全部直接转发至‘你的服务器地址’
export default noProxy ? { 'GET /api/*': '你的服务器地址','POST /api/*': '你的服务器地址' } : delay(proxy, 1000);
第三步、启动
npm start : 不适用代理服务器 请求mock数据
npm run -r start:no-proxy ：使用代理服务器 请求服务器数据
三、动态创建菜单
https://www.jianshu.com/p/50c0047e2448 这篇别人的文章里面已经讲的很清楚了，直接下载github上的代码即可。
四、富文本编辑器
因为项目所需的富文本编辑器比较简单，纠结了很久选择了react-draft-wysiwyg（支持把编辑器内容转化成html、json等格式，也支持将html、json等格式的数据转化成文本内容。）使用方法也很简单，跟着官网的几个demo走就可以了。
五：ant design pro 路由详解
暂时就这么多，以上全都是个人见解，有错误的地方希望大家指正，谢谢！！！