ant design proV1.0的采坑之旅 (动态创建菜单、访问mock数据、富文本编辑器)

       最近公司做一个后台管理系统,犹豫半天还是想用ant design,后来发现他们有现成的脚手架 ant design pro ( github地址 ),果断拉代码下来运行起来。

一:ant design pro 项目目录结构和流程

整体目录大概长这个样子ant design proV1.0的采坑之旅 (动态创建菜单、访问mock数据、富文本编辑器)_第1张图片 

src里面是这样子ant design proV1.0的采坑之旅 (动态创建菜单、访问mock数据、富文本编辑器)_第2张图片

重要的就是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、接下来就应该根据定义的路由去构建菜单。

ant design proV1.0的采坑之旅 (动态创建菜单、访问mock数据、富文本编辑器)_第3张图片

可以看出是由父节点菜单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文件。

    ant design proV1.0的采坑之旅 (动态创建菜单、访问mock数据、富文本编辑器)_第4张图片

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 proV1.0的采坑之旅 (动态创建菜单、访问mock数据、富文本编辑器)_第5张图片

就是向服务器进行请求。

---------------------------------------------自此 整个流程结束---------------------------------------------------------

二、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/开头的GETPOST请求全部直接转发至‘你的服务器地址’  

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

 

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

你可能感兴趣的:(react+antdesign)