React快速入门 - Ant Design Pro入门(4)

本是古典何须时尚 2023-10-12 14:15 68阅读 0赞

# Ant Design Pro入门 #

## 1）Ant Design Pro ##

Ant Design Pro 是基于Ant Design的一个开箱即用的，企业级中后台前端/设计解决方案。  
![在这里插入图片描述][369be574a605490d8ce3b5f77c6e4d93.png]  
[源码地址][Link 1]：https://github.com/ant-design/ant-design-pro

![在这里插入图片描述][06c7a89e71c34df7a2e026965b5ca80a.png]

## 2）部署安装 ##

[下载地址][Link 1]：https://github.com/ant-design/ant-design-pro  
我们使用资料中提供的，已经下载好的文件：ant-design-pro-master.zip

> 第一步：将ant-design-pro-master.zip解压到任意目录，我的目录是F:\\code  
> ![在这里插入图片描述][2886ca040e4b4faeb8318711a59d0c54.png]  
> Ant Design Pro提供的目录如下：  
> ├── config \# umi 配置，包含路由，构建等配置  
> ├── mock \# 本地模拟数据  
> ├── public  
> │ └── favicon.png \# Favicon  
> ├── src  
> │ ├── assets \# 本地静态资源  
> │ ├── components \# 业务通用组件  
> │ ├── e2e \# 集成测试用例  
> │ ├── layouts \# 通用布局  
> │ ├── models \# 全局 dva model  
> │ ├── pages \# 业务页面入口和常用模板  
> │ ├── services \# 后台接口服务  
> │ ├── utils \# 工具库  
> │ ├── locales \# 国际化资源  
> │ ├── global.less \# 全局样式  
> │ └── global.js \# 全局 JS  
> ├── tests \# 测试工具  
> ├── README.md  
> └── package.json  
> 第二步，导入项目到Idea中  
> ![在这里插入图片描述][c75db86cb0e348878176f0467bacd2c0.png]  
> ![在这里插入图片描述][ddf77469d0264fb7be0b4e3a12fab570.png]  
> ![在这里插入图片描述][4146317e284f4c9880c6d26774e8bdfa.png]

> 第三步：进行初始化以及启动
> 
> > tyarn install \#安装相关依赖  
> > tyarn start \#启动服务

![在这里插入图片描述][85c74260434b489fafbad750ccdb4b5e.png]

## 3）菜单和路由 ##

默认的菜单是不能直接投入到项目开发的，所以，我们需要搞清楚如何自定义菜单和路由。  
在pro中，菜单和路由，在router.config.js配置文件中进行管理：  
![在这里插入图片描述][37e84e6bd2914cfba9d212b7b80ffec3.png]  
打开router.config.js后，可以看出，pro提供了有2套路由（布局），分别是/user和/  
![在这里插入图片描述][fc727fa2e33b46909d429c2048c3b238.png]  
/user的布局：  
![在这里插入图片描述][b874e42182514c699c46bfb4fab7bd2a.png]  
接下来，我们先重点关注，/路由：

routes: [
    // dashboard
    {
         path: '/', redirect: '/dashboard/analysis' },
    {
        
    path: '/dashboard',
    name: 'dashboard',
    icon: 'dashboard',
    routes: [
    {
        
    path: '/dashboard/analysis', //请求路径
    name: 'analysis',
    component: './Dashboard/Analysis', //组件位置
    },
    {
        
    path: '/dashboard/monitor',
    name: 'monitor',
    component: './Dashboard/Monitor',
    },
    {
        
    path: '/dashboard/workplace',
    name: 'workplace',
    component: './Dashboard/Workplace',
    },
    ],
    },

所以，可以得出结论，菜单是有路由的配置生成的。  
接下来进行实验，新增一个路由：

// new
    {
        
    path: '/new',
    name: 'new',
    icon: 'user',
    routes: [
    {
        
    path: '/new/analysis',
    name: 'analysis',
    component: './Dashboard/Analysis',
    },
    {
        
    path: '/new/monitor',
    name: 'monitor',
    component: './Dashboard/Monitor',
    },
    {
        
    path: '/new/workplace',
    name: 'workplace',
    component: './Dashboard/Workplace',
    },
    ],
    },

测试：![在这里插入图片描述][e6c60fc010034c3598c6b394d8b709c3.png]  
可以看出，新的菜单以及添加到页面中，只是显示的文字不对。那么文字在哪里配置呢？  
其实，文字是在国际化文件中进行配置的：  
![在这里插入图片描述][6ff69d9e587d4619a2dbd9261857c43e.png]  
![在这里插入图片描述][672f3c67a1c546c6b6d31626fd3980ac.png]  
新增配置如下：

'menu.new': 'New Dashboard',
    'menu.new.analysis': 'New 分析页',
    'menu.new.monitor': 'New 监控页',
    'menu.new.workplace': 'New 工作台',

进行测试：  
![在这里插入图片描述][734177b53e91483c92aeeb1e3a2e47c9.png]

## 4）新增页面 ##

上面我们添加了新的菜单，但是页面依然使用的是模板中的页面，那么如何新增页面呢？  
所有的页面依然是保存的src/pages中，在pages目录下，以功能为单元创建目录，如：  
![在这里插入图片描述][235c86cb686f4881ae2d7b084dd58eb2.png]  
创建文件 NewAnalysis.js：

import React from 'react';
    class NewAnalysis extends React.Component {
        
    	render() {
        
    		return (
    			<div>NewAnalysis</div>
    		);
    	}
    	}
    export default NewAnalysis;

修改路由中的路径：  
![在这里插入图片描述][acffac93e0634b28853f58e6e985e811.png]  
测试：  
![在这里插入图片描述][ea25713f70e14f48a245edef505ab136.png]  
可以看到，一个新的页面就创建好了，并且已经加入到菜单中。

## 5）pro中的model执行流程 ##

在pro系统中，model是如何执行的，下面我们以表格为例，探究下在Pro中的执行流程。  
![在这里插入图片描述][63af699f99ca468f9f01fae7d30acff1.png]  
进入TableList.js代码进行查看：  
生成表格的主要逻辑在这里：  
![在这里插入图片描述][d07654d9e7a8493aa872724c09023bcc.png]  
在StandardTable中，使用Table组件生成表格，其中数据源是data：  
![在这里插入图片描述][3631258fecb744b99b77ba8511c89a63.png]  
TableList.js中，data数据从构造方法中获取到：  
![在这里插入图片描述][f6e58321d43f4d199b856428deb27528.png]  
this.props中的rule数据，是通过@connect()修饰器获取： 需要注意的是：\{ rule, loading \}是解构表达式，从  
props中获取数据  
![在这里插入图片描述][4bd1bc6361284bfbade0a84bb5a45531.png]  
数据从model中获取，在models下的rule.js中：  
![在这里插入图片描述][051c1bc969c3491799d66a9e82d6ba3c.png]  
在TableList.js中，组件加载完成后进行加载数据:

![在这里插入图片描述][8d6b04d9d64a4086be590373b7e9ef92.png]  
在rule.js中，进行加载数据：  
![在这里插入图片描述][15676cfcb266440887288720e9e3b070.png]  
queryRule是在/services/api中进行了定义：  
![在这里插入图片描述][7dffab5e2f57493381e8b80d70d18c16.png]  
数据的mock是在mock/rule.js中完成  
![在这里插入图片描述][edf904d5b98f4699b758fd12f6e695c2.png]  
这就是整个数据的加载、更新流程。

[369be574a605490d8ce3b5f77c6e4d93.png]: https://img-blog.csdnimg.cn/369be574a605490d8ce3b5f77c6e4d93.png
[Link 1]: https://github.com/ant-design/ant-design-pro
[06c7a89e71c34df7a2e026965b5ca80a.png]: https://img-blog.csdnimg.cn/06c7a89e71c34df7a2e026965b5ca80a.png
[2886ca040e4b4faeb8318711a59d0c54.png]: https://img-blog.csdnimg.cn/2886ca040e4b4faeb8318711a59d0c54.png
[c75db86cb0e348878176f0467bacd2c0.png]: https://img-blog.csdnimg.cn/c75db86cb0e348878176f0467bacd2c0.png
[ddf77469d0264fb7be0b4e3a12fab570.png]: https://img-blog.csdnimg.cn/ddf77469d0264fb7be0b4e3a12fab570.png
[4146317e284f4c9880c6d26774e8bdfa.png]: https://img-blog.csdnimg.cn/4146317e284f4c9880c6d26774e8bdfa.png
[85c74260434b489fafbad750ccdb4b5e.png]: https://img-blog.csdnimg.cn/85c74260434b489fafbad750ccdb4b5e.png
[37e84e6bd2914cfba9d212b7b80ffec3.png]: https://img-blog.csdnimg.cn/37e84e6bd2914cfba9d212b7b80ffec3.png
[fc727fa2e33b46909d429c2048c3b238.png]: https://img-blog.csdnimg.cn/fc727fa2e33b46909d429c2048c3b238.png
[b874e42182514c699c46bfb4fab7bd2a.png]: https://img-blog.csdnimg.cn/b874e42182514c699c46bfb4fab7bd2a.png
[e6c60fc010034c3598c6b394d8b709c3.png]: https://img-blog.csdnimg.cn/e6c60fc010034c3598c6b394d8b709c3.png
[6ff69d9e587d4619a2dbd9261857c43e.png]: https://img-blog.csdnimg.cn/6ff69d9e587d4619a2dbd9261857c43e.png
[672f3c67a1c546c6b6d31626fd3980ac.png]: https://img-blog.csdnimg.cn/672f3c67a1c546c6b6d31626fd3980ac.png
[734177b53e91483c92aeeb1e3a2e47c9.png]: https://img-blog.csdnimg.cn/734177b53e91483c92aeeb1e3a2e47c9.png
[235c86cb686f4881ae2d7b084dd58eb2.png]: https://img-blog.csdnimg.cn/235c86cb686f4881ae2d7b084dd58eb2.png
[acffac93e0634b28853f58e6e985e811.png]: https://img-blog.csdnimg.cn/acffac93e0634b28853f58e6e985e811.png
[ea25713f70e14f48a245edef505ab136.png]: https://img-blog.csdnimg.cn/ea25713f70e14f48a245edef505ab136.png
[63af699f99ca468f9f01fae7d30acff1.png]: https://img-blog.csdnimg.cn/63af699f99ca468f9f01fae7d30acff1.png
[d07654d9e7a8493aa872724c09023bcc.png]: https://img-blog.csdnimg.cn/d07654d9e7a8493aa872724c09023bcc.png
[3631258fecb744b99b77ba8511c89a63.png]: https://img-blog.csdnimg.cn/3631258fecb744b99b77ba8511c89a63.png
[f6e58321d43f4d199b856428deb27528.png]: https://img-blog.csdnimg.cn/f6e58321d43f4d199b856428deb27528.png
[4bd1bc6361284bfbade0a84bb5a45531.png]: https://img-blog.csdnimg.cn/4bd1bc6361284bfbade0a84bb5a45531.png
[051c1bc969c3491799d66a9e82d6ba3c.png]: https://img-blog.csdnimg.cn/051c1bc969c3491799d66a9e82d6ba3c.png
[8d6b04d9d64a4086be590373b7e9ef92.png]: https://img-blog.csdnimg.cn/8d6b04d9d64a4086be590373b7e9ef92.png
[15676cfcb266440887288720e9e3b070.png]: https://img-blog.csdnimg.cn/15676cfcb266440887288720e9e3b070.png
[7dffab5e2f57493381e8b80d70d18c16.png]: https://img-blog.csdnimg.cn/7dffab5e2f57493381e8b80d70d18c16.png
[edf904d5b98f4699b758fd12f6e695c2.png]: https://img-blog.csdnimg.cn/edf904d5b98f4699b758fd12f6e695c2.png