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 路由详解

 

暂时就这么多，以上全都是个人见解，有错误的地方希望大家指正，谢谢！！！