一：了解Ant Design Pro

二：快速入门

一：了解Ant Design Pro

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

效果：

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

特性：

二：快速入门

部署安装

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

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

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

Ant Design Pro提供的目录如下：

第二步，导入项目到Idea中

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

tyarn install #安装相关依赖

tyarn start #启动服务

测试：

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

菜单和路由

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

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

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

/user的布局：

接下来，我们先重点关注，/路由

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',
},
],
},

测试：

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

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

新增配置如下：

'menu.new': 'New Dashboard',

'menu.new.analysis': 'New 分析页',

'menu.new.monitor': 'New 监控页',

'menu.new.workplace': 'New 工作台',

进行测试：

发现，已经正常显示了。

新增页面

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

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

创建文件 NewAnalysis.js：

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

修改路由中的路径：

测试：

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

pro中的model执行流程

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

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

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

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

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

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

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

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

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

queryRule是在/services/api中进行了定义：

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

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

Ant Design Pro入门相关推荐

Ant Design Pro入门之简介
Ant Design Pro入门了解Ant Design Pro Ant Design Pro 是基于Ant Design的一个开箱即用的,企业级中后台前端/设计解决方案. 效果: 源码地址:htt ...
Ant Design pro入门教程
Ant Design pro入门教程最近公司再开项目又要用antd 这次刚好给大家写一个入门安装教程 ( v5 typescript版本 ) 这套模板使用了react框架为基础哦 1. 准备环境 ...
Ant Design Pro入门之部署安装
部署安装下载地址:https://github.com/ant-design/ant-design-pro 我们使用资料中提供的,已经下载好的文件:ant-design-pro-master.zip ...
ant design pro入门踩坑：删除页面文件报错
前提:用ant design pro新增注册页,没有显示在菜单,在项目Page文件夹删除原因:配置路由没有删总结: 手动删除页面需要删1.Page目录下的页面文件 2.src/Page/.umi/ ...
Ant Design Pro入门教程安装框架
介绍一下Ant Design Pro,说白了就是基于React的一套脚手架,UI是 Ant Design ,框架是 Ant Design Pro 脚手架安装完成,运行起来的样子: 下面我们来看看怎么安 ...
Ant Design Pro入门介绍
官方文档地址:https://pro.ant.design/zh-CN 应用介绍: Ant Design Pro是一个企业级中后台前端/设计解决方案,基于React的中后台管理控制台的脚手架.能帮助我 ...
后端工程师入门Ant Design Pro
本文适用于后端程序员入门ant design pro,基于官方文档,不探讨底层,仅为实用,效果预览:https://preview.pro.ant.design/dashboard/analysis ...
ant design pro模板_Ant Design Pro入门教程，安装，运行（V5 Typescript版）
[前言] 找了很多Admin模板,最后还是看中了AntDesignPro这个阿里巴巴开源的Admin框架,长这样(还行吧,目前挺主流的): 该套模板是使用了React开发框架作为基础,AntDesig ...
Ant Design Pro V4 入门到实战手册【2020】
前言第一章初识 Ant Design Pro 1. 调整 Ant Design Pro 基本配置 2. 浅析 Ant Design Pro 工作流程第二章布局和路由 1. 复杂页面布局的&qu ...

Ant Design Pro入门

一：了解Ant Design Pro

二：快速入门

Ant Design Pro入门相关推荐

最新文章

热门文章