该笔记分为两部分，前面部分为官方文档介绍，后面为实际项目改造的历程

本文档不定时更新,你想要的在实战部分

如果你对react、dva等一些概念不是很清晰，建议先看以下概念：

react：https://www.runoob.com/react/react-tutorial.html
dva：https://dvajs.com/guide/concepts.html

最终效果

最终实现了增删改查、刷新、批量删除、分页功能，并集成了登录功能，如下图所示：

下图演示登录、增删改查
下图演示全字段搜索，分页

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

我们基于上述目标和提供了以下的典型模板，并据此构建了一套基于 React 的中后台管理控制台的脚手架，它可以帮助你快速搭建企业级中后台产品原型。

- Dashboard- 分析页- 监控页- 工作台
- 表单页- 基础表单页- 分步表单页- 高级表单页
- 列表页- 查询表格- 标准列表- 卡片列表- 搜索列表（项目/应用/文章）
- 详情页- 基础详情页- 高级详情页
- 结果- 成功页- 失败页
- 异常- 403 无权限- 404 找不到- 500 服务器出错
- 个人页- 个人中心- 个人设置
- 帐户- 登录- 注册- 注册成功

谁在使用

目前蚂蚁金服和阿里巴巴内部上百个项目正在尝试 Pro 的研发模式，如果你和你的组织使用了这个产品，欢迎到 Ant Design Pro Users 留言。

For 设计者

如果你是产品或设计师，你可以找到和 Pro 一一配套的 Axure/Sketch 设计资源，大幅度提升设计效率和沟通效率。

For 开发者

如果你是工程师，在接下来的文档中，我们将具体介绍如何使用这个脚手架。如果你是蚂蚁金服的内网用户，请直接跳到文档开始使用（蚂蚁金服用户）。

#前序准备
你的本地环境需要安装 node 和 git。我们的技术栈基于 ES2015+、React、UmiJS、dva、g2 和 antd，提前了解和学习这些知识会非常有帮助。

安装

从 GitHub 仓库中直接安装最新的脚手架代码。

$ git clone --depth=1 https://github.com/ant-design/ant-design-pro.git my-project -b v2
$ cd my-project

目录结构

我们已经为你生成了一个完整的开发框架，提供了涵盖中后台开发的各类功能和坑位，下面是整个项目的目录结构。

├── 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

本地开发

安装依赖。

npm install

如果网络状况不佳，可以使用 cnpm 进行加速。

npm start

启动完成后会自动打开浏览器访问 http://localhost:8000，你看到下面的页面就代表成功了。

首页截图

实战

关闭 mock

当本地开发完毕之后，如果服务器的接口满足之前的约定，那么只需要关闭 mock 数据或者代理到服务端的真实接口地址即可。

$ npm run start:no-mock

模拟动态菜单

先看效果图：

修改步骤：

在mpcky.io网站模拟一个菜单树，如图：
http://www.mocky.io/v2/5d831fb83400003322f4a212

[{"name": "分析页", "path": "analysis", "children": [{"name": "分析页1", "path": "analysis1", "children": [{"name": "分析页11", "path": "analysis11"}]}]}, {"name": "监控页", "path": "monitor"}, {"name": "工作台", "path": "workplace"}, {"name": "工作台1", "path": "workplace/1"}
]

修改src/services/api.js，加入这个请求，用于模拟后台获取菜单，如图：

export async function queryMenu() {return request(`http://www.mocky.io/v2/5d831fb83400003322f4a212`);
}

修改src/models/menu.js，增加import { queryMenu } from ‘@/services/api’;

import { queryMenu } from '@/services/api';

修改src/models/menu.js，改为网络请求获取菜单，如图：

    *getMenuData({ payload }, {call, put }) {// const { routes, authority, path } = payload;// const originalMenuData = memoizeOneFormatter(routes, authority, path);// console.log("originalMenuData",originalMenuData);// const menuData = filterMenuData(originalMenuData);const menuData = yield call(queryMenu);console.log("menuData",menuData);const breadcrumbNameMap = memoizeOneGetBreadcrumbNameMap(menuData);console.log("breadcrumbNameMap",breadcrumbNameMap);yield put({type: 'save',payload: { menuData, breadcrumbNameMap },});},},

这时候再刷新页面，有动态菜单了，可以随时修改模拟请求，菜单也随着变化，嘻嘻

后台获取动态菜单

后台获取动态菜单和模拟动态菜单操作一样，只需要将请求路径改为真实的后端路径，并返回一个菜单树

新增一个组件

在src/components路径下，新建一个目录 MartinCRUD，然后在该目录下新建 index.js，内容为如下，这样就新增了一个名为MartinCRDU的组件

import React, { createElement } from 'react';
import { Table } from 'antd';class MartinCRUD extends React.PureComponent {render() {const columns = [{title: 'Full Name',width: 100,dataIndex: 'name',key: 'name',fixed: 'left',},{title: 'Age',width: 100,dataIndex: 'age',key: 'age',fixed: 'left',},{ title: 'Column 1', dataIndex: 'address', key: '1' },{ title: 'Column 2', dataIndex: 'address', key: '2' },{ title: 'Column 3', dataIndex: 'address', key: '3' },{ title: 'Column 4', dataIndex: 'address', key: '4' },{ title: 'Column 5', dataIndex: 'address', key: '5' },{ title: 'Column 6', dataIndex: 'address', key: '6' },{ title: 'Column 7', dataIndex: 'address', key: '7' },{ title: 'Column 8', dataIndex: 'address', key: '8' },{title: 'Action',key: 'operation',fixed: 'right',width: 100,render: () => <a>action</a>,},];const data = [{key: '1',name: 'John Brown',age: 32,address: 'New York Park',},{key: '2',name: 'Jim Green',age: 40,address: 'London Park',},];return <Table columns={columns} dataSource={data} scroll={{x: 1300}}/>;}
}export default MartinCRUD;

新增一个页面

在src/pages下，新建一个目录 Table,，然后在该目录下新建 Table.js，内容为如下，这样就新增了一个名为Table的页面

import React from 'react';
import MartinCRUD from "@/components/MartinCRUD";const Table = () => (<MartinCRUD />
);export default Table;

目前新增的页面还无法生效，需要修改config/router.config.js，加上该页面的路由信息，如图

  {name: 'table',icon: 'highlight',path: '/table',routes: [{path: '/table/table',name: 'table',component: './Table/Table',},],},

到这里，访问浏览器：http://localhost:8000/table/table，就可以看到新增的页面，如图

自定义国际化

所有国际化配置，都在src/locales目录下，目前共有四种国际化配置，现在新增一个自定义国际化配置

在src/locales/zh-CN下新建button.js,内容为

export default {'app.table.curd.add': '新增','app.table.curd.delete': '删除','app.table.curd.update': '修改','app.table.curd.batch.delete': '批量删除',
}

修改src/locales/zh-CN.js，引入button.js,

import button from './zh-CN/button';

在src/locales/zh-CN.js末尾加上button

  ...button,

按照上面步骤，修改其他三种国际化
最后在js里面直接使用自定义的国际化配置即可，如图

  <Button type="primary" onClick={this.setAgeSort}>{formatMessage({ id: 'app.table.curd.add' })}</Button><Button type="primary" onClick={this.clearFilters}>{formatMessage({ id: 'app.table.curd.batch.delete' })}</Button>

最终效果如图，注意左上角两个按钮的变化

最终效果

最终实现了增删改查、刷新、批量删除、分页功能，并集成了登录功能，如下图所示：

下图演示登录、增删改查
下图演示全字段搜索，分页

有任何问题，可以随时沟通我

ant design pro V2 学习笔记相关推荐

ant design pro v2 - 权限控制
同步语雀地址:https://www.yuque.com/chenzilong/nigxcx/qtv5n3 github地址:https://github.com/rodchen-king/ant-d ...
23 版本以上的v4包_Ant Design Pro V2升级到V4 小结
前言前不久接手过一个历史悠久的项(shi)目(shan),技术栈之复杂(混乱)令我潸然泪下:你甚至可以在一个项目里使用前端三大框架(Angular1, Vue, React). 三份的代码,本应该给 ...
ant design pro模板_Ant Design Pro 学习笔记
学习笔记摘要介绍 Ant Design Pro 是一个基于Ant Design搭建起来的模板项目.它提供了两个主要布局:BasicLayout.UserLayout,在布局基础上制作了20多个基础页 ...
使用Ant Design Pro，一个企业级开箱即用的中后台前端
#目录 ** 此文仅是个人自学理解的学习笔记,若有不对之处敬请指导更正,谢谢! ** 文章目录 @[toc] Ant Design Pro 了解知识储备安装使用方法一:clone 实践 ESli ...
ant design pro（一）安装、目录结构、项目加载启动【原始、以及idea开发】
一.概述 1.1.脚手架概念编程领域中的"脚手架(Scaffolding)"指的是能够快速搭建项目"骨架"的一类工具.例如大多数的React项目都有src,p ...
Ant Design Pro+Electron+electron-builder实现React应用脱离浏览器，桌面安装运行
学习参考: electron-api-demos 我以下的方式,其实并把Ant Design Pro文件打包到生成的安装包里,所以,安装包=Ant Design Pro+Electron环境 ant- ...
Ant Design Pro v4 is Here
Ant Design Pro v4 is Here 距离 Pro 的上个版本发布已经过去了 8 个月,Pro 也进行了许多的迭代,但是大部分更新仍然以修复 bug 为主.在此期间我们遇到了许多使用 P ...
design php 如何使用ant_Ant Design Pro如何调用接口 | Ant Design Pro渲染数据绑定数据...
Ant Design Pro如何调用接口 | Ant Design Pro渲染数据绑定数据 Ant Design Pro我发现网上的资料好少,而且版本基本都是1.0的,我现在是2.0版本,好多地方都 ...
ant design pro模板_ant design pro 当中改变ant design 组件的样式和数据管理
ant design pro 简介官网简介 Ant Design Pro 是一个企业级中后台前端/设计解决方案,我们秉承 Ant Design 的设计价值观,致力于在设计规范和基础组件的基础上,继续 ...

ant design pro V2 学习笔记

最终效果

谁在使用

For 设计者

For 开发者

安装

目录结构

本地开发

首页截图

实战

关闭 mock

模拟动态菜单

后台获取动态菜单

新增一个组件

新增一个页面

自定义国际化

最终效果

ant design pro V2 学习笔记相关推荐

最新文章

热门文章