Antd-Pro 如何定义一个菜单并且mock数据到页面

• Antd-Pro介绍
• 前期准备
• 环境搭建
• 添加一个菜单
• 准备mock数据及配置
• 如何请求数据
• 最终的效果

1、Antd-Pro介绍

Ant Design Pro 是一个企业级中后台前端/设计解决方案，我们秉承 Ant Design 的设计价值观，致力于在设计规范和基础组件的基础上，继续向上构建，提炼出典型模板/业务组件/配套设计资源，进一步提升企业级中后台产品设计研发过程中的『用户』和『设计者』的体验。随着『设计者』的不断反馈，我们将持续迭代，逐步沉淀和总结出更多设计模式和相应的代码实现，阐述中后台产品模板/组件/业务场景的最佳实践，也十分期待你的参与和共建。

2、前期准备

Antd-pro的技术栈基于 ES2015+、React、dva、g2 和 antd，提前了解和学习这些知识会非常有帮助。官方的脚手架是基于dva-cli搭建的，所以了解dva是必须，否则很多代码是看不懂的，没有概念的自行百度去脑补一下。

3、环境搭建

从官方提供的git地址下载代码就可以了，用vscode打开代码。

• 配置好registry
• npm i 安装相关依赖

• npm run build 编译成功

npm start启动网站

4、添加一个菜单

• =》 pims-web/src/common/menu.js。  这个文件默认定义了菜单结构的json，我们加一个Demo1-节点类型的菜单。

  menu.js

  {     name:  'Demo1' ,     icon:  'user' ,     path:  'demo1' ,     authority:  'admin' ,     children: [       {         name:  '节点类型' ,         path:  'demo11' ,       }     ],   },

• =》pims-web/src/common/router.js。  router.js是负责整个工程的路由事件。[“factoryTypes”]，这个参数是我们新建的store，用来接收action的请求，这个是dva的特性，此处可以将我们的component与model绑定起来，实现state的更新和传递。

router.js

'/demo1/demo11' : {       component: dynamicWrapper(app, [ "factoryTypes" ], () =>  import ( '../routes/Demo1/demo11' )),     },

5、准备mock数据及配置

• =》pims-web/mock/api.js。 这个文件里面定义了很多常量，用来初始化一些通用的数据。对于整个系统来说，请求接口是复杂并且繁多的，为了处理大量模拟请求的场景，我们也可以在mock文件夹下单独新建一个mock文件，根据业务需求来mock数据。这里已工厂模型类型为例：

  api.js

  //罗凯——工厂模型类型 export  const  getFactoryTypes =  [{    key:  '0' ,    name:  '工厂' , }, {    key:  '1' ,    name:  '车间' , }, {    key:  '2' ,    name:  '工段' , }];     export  default  {    getNotice,    getActivities,    getFakeList,    getFactoryTypes, };

  
  我们定义了一个叫 getFactoryTypes的常量，初始化了三条数据。然后在export中将我们定义的常量输出。

• =》pims-web/.roadhogrc.mock.js。 添加代理请求，此处使用了roadhog的请求代理功能来处理代理请求，支持基于require动态分析的实时刷新，支持ES6语法。

  'GET /api/factoryTypes' : getFactoryTypes,

  当客户端（浏览器）发送请求，如：GET /api/factoryTypes，那么本地启动的 roadhog server 会跟此配置文件匹配请求路径以及方法，如果匹配到了，就会将请求通过配置处理，就可以像样例一样，你可以直接返回数据，也可以通过函数处理以及重定向到另一个服务器。

  尝试请求接口，浏览器正常返回数据，说明配置已经成功了。

  
  

• =》pims-web/src/services/api.js.。调用request模块将我们的接口封装成一个异步接口，并export。

export async function queryFactoryTypes() {