Ant Design Pro入门

小鱼儿 2024-03-30 12:42 96阅读 0赞

**目录**

一：了解Ant Design Pro

二：快速入门

--------------------

## 一：**了解****Ant Design Pro** ##

Ant Design Pro  是基于 Ant Design 的一个开箱即用的，企业级中后台前端 / 设计解决方案。

效果：

![c62603b28b4a4c7383c35f622b5f75d2.png][]

源码地址：https://github.com/ant-design/ant-design-pro

特性：

![2f8230cf49dd42eab00a84bc18d51ea4.png][]

## 二：**快速入门** ##

> **部署安装**

下载地址： https://github.com/ant-design/ant-design-pro

我们使用资料中提供的，已经下载好的文件： ant-design-pro-master.zip

> 第一步：将 ant-design-pro-master.zip 解压到任意目录，我的目录是 F:\\code

![e85d6103fa544beeac82579bf7c08bf0.png][]

Ant Design Pro提供的目录如下：

![19c0109b65d24863a710ca6159767b1b.png][]

![80050e5b27a1421598d0e9817942e8f3.png][]

> 第二步，导入项目到Idea中

![0256b92974954703a68c2770aa4715a6.png][]

![7ede2e04482048c8b5bf7444b25ff8af.png][]

![ee904bacca87431eaee8317971885220.png][]

> 第三步：进行初始化以及启动

>  *  tyarn install \#安装相关依赖 
>  *  tyarn start \#启动服务

测试：

![b7a0b0d5a8684e929ee77eaf80449c8f.png][]

可以看到，系统已经启动完成。

> **菜单和路由**

默认的菜单是不能直接投入到项目开发的，所以，我们需要搞清楚如何自定义菜单和路由。

在 pro 中，菜单和路由，在 router.confifig.js 配置文件中进行管理：

![eb4627437018477b985b725f467c7f28.png][]

打开router.confifig.js后，可以看出，pro提供了有2套路由（布局），分别是/user和/

![8f68cb062239484e88cc06d1317532bb.png][]

/user的布局：

![fec7dfe31bec4a9a8d66ec937f42b339.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',
    },
    ],
    },

测试：

![dd5d9e9f5b1544559106a135b49d4cdf.png][]

可以看出，新的菜单以及添加到页面中，只是显示的文字不对。那么文字在哪里配置呢？

其实，文字是在国际化文件中进行配置的：

![eeb6d19f06414a1e89835d45ee3e2e13.png][]

![ee262dd9916a4dfdbc392e17090d2907.png][]

新增配置如下：

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

进行测试：

![ea056e3435824c41a8fb2ea5b08cf8ab.png][]

发现，已经正常显示了。

> **新增页面**

上面我们添加了新的菜单，但是页面依然使用的是模板中的页面，那么如何新增页面呢？

所有的页面依然是保存的 src/pages 中，在 pages 目录下，以功能为单元创建目录，如：

![606d5cdd7d0c4088b8ae625f3ec17627.png][]

创建文件 NewAnalysis.js：

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

修改路由中的路径：

![009404e55ee64573803b76192eb1bdc1.png][]

测试：

![db730f03f7f34e2f8b13de8f5a572996.png][]

可以看到，一个新的页面就创建好了，并且已经加入到菜单中。

> **pro** **中的** **model** **执行流程**

在 pro 系统中， model 是如何执行的，下面我们以表格为例，探究下在 Pro 中的执行流程。

![f1e0eea2df8246d5b3b7bacc3de6b134.png][]

进入TableList.js代码进行查看：

生成表格的主要逻辑在这里：

![e6198e3d96404f1d911b4a0bfee47a19.png][]

在StandardTable中，使用Table组件生成表格，其中数据源是data：

![b68f9b27dc9b498cab3c543c654d09d7.png][]

TableList.js中，data数据从构造方法中获取到：

![2dcf84afd82e4027b2151e98e52f5014.png][]

this.props中的rule数据，是通过@connect()修饰器获取：需要注意的是：\{ rule, loading \}是解构表达式，从props中获取数据

![9b25ba73017d4bbcb6492cc6bce2e242.png][]

数据从model中获取，在models下的rule.js中：

![844c48592ef44c538c0c07c51ed63420.png][]

在TableList.js中，组件加载完成后进行加载数据:

![8db129e798fc4b1d888aa8265a2d42de.png][]

在rule.js中，进行加载数据：

![0a8d751640f3487385cb71463a098ef4.png][]queryRule是在/services/api中进行了定义：

![f998df8df3d94952913c480374033a42.png][]

数据的mock是在mock/rule.js中完成。

![c191b291d1e74973bd5d778b8a8dc690.png][]

这就是整个数据的加载、更新流程。

![d8147d4e102c4f568e45f3bcb11f8009.jpeg][]

[c62603b28b4a4c7383c35f622b5f75d2.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/e8a3c0085c6f42b6b0c6f6b9e1892da2.png
[2f8230cf49dd42eab00a84bc18d51ea4.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/d34c705a723842fe9533075e86466827.png
[e85d6103fa544beeac82579bf7c08bf0.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/2d3a670674fd491da6333c36e3a89ef8.png
[19c0109b65d24863a710ca6159767b1b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/ca1b1c8b2074496099ade4f705514bb8.png
[80050e5b27a1421598d0e9817942e8f3.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/e6ecd45702624223a94033c6cd05c9f6.png
[0256b92974954703a68c2770aa4715a6.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/bdd385718521425faf05d46d51ebf612.png
[7ede2e04482048c8b5bf7444b25ff8af.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/eb6b726e090145618f2c31535c6faff4.png
[ee904bacca87431eaee8317971885220.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/e4d8f103af114cacbec3f6d4feb9e7aa.png
[b7a0b0d5a8684e929ee77eaf80449c8f.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/bb0b1044d5a14c0da4f54d1b053ef028.png
[eb4627437018477b985b725f467c7f28.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/19b8ff2e43e848558bb1254b4ac6c6c0.png
[8f68cb062239484e88cc06d1317532bb.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/14f743cec92041c49e4f623a23bf4a26.png
[fec7dfe31bec4a9a8d66ec937f42b339.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/4e92a22472bc463bb230e13304541f2a.png
[dd5d9e9f5b1544559106a135b49d4cdf.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/e4d38752aaf24c45bbe76cc3751889d2.png
[eeb6d19f06414a1e89835d45ee3e2e13.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/1bf15ff88ec64369810e64020b66253f.png
[ee262dd9916a4dfdbc392e17090d2907.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/480870a2baad47bb8604ba5697b21983.png
[ea056e3435824c41a8fb2ea5b08cf8ab.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/f8e0c49045d5479796c55bc8e07def5f.png
[606d5cdd7d0c4088b8ae625f3ec17627.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/05d371489c2e48cd89d37ff0c21d3d5b.png
[009404e55ee64573803b76192eb1bdc1.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/b9b86619ebb34dd5aa09d8ed00ffeede.png
[db730f03f7f34e2f8b13de8f5a572996.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/da979ca9b0414134acc6987d17902a4c.png
[f1e0eea2df8246d5b3b7bacc3de6b134.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/60b6f9ae0fe8408e9b0b97d04c525a13.png
[e6198e3d96404f1d911b4a0bfee47a19.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/5ccbdec37f0040a38500fc8fc0031c38.png
[b68f9b27dc9b498cab3c543c654d09d7.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/83cb66714ecd452187d3b79f828cb3fb.png
[2dcf84afd82e4027b2151e98e52f5014.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/400a1ffd73ad48c1842da8af375f0ba5.png
[9b25ba73017d4bbcb6492cc6bce2e242.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/e6cfebc75cbe404bae23326e92c50eff.png
[844c48592ef44c538c0c07c51ed63420.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/deba468d3bde4694816f1c8c001e556c.png
[8db129e798fc4b1d888aa8265a2d42de.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/b3a432c6d873417788a1b7d530ee72ad.png
[0a8d751640f3487385cb71463a098ef4.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/813c5c26880a4ac1b0271ab36277ae76.png
[f998df8df3d94952913c480374033a42.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/fc825943da644bfebbe9236752d6ed03.png
[c191b291d1e74973bd5d778b8a8dc690.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/0c74cb856ac04059a291de817cdab07d.png
[d8147d4e102c4f568e45f3bcb11f8009.jpeg]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/570dda0692104c049fe2a5a1ebf19116.jpeg