image.png
React 通过 JSX 提供灵活的组件化开发，将 HTML 与 JavaScript 逻辑结合，使开发更直观。其虚拟 DOM 和 Fiber 架构提升性能，通过高效的差异对比和异步渲染，使复杂应用更流畅。
React 拥有庞大的生态系统和社区支持，丰富的第三方库和工具（如 Redux、React Router）以及广泛的企业采用（如 Facebook、Netflix）推动其发展。Create React App 简化项目初始化，内置现代开发配置。React Developer Tools 提供强大调试功能，React Native 扩展技术栈到移动端，Hooks API 推动函数式编程，使代码更简洁和可重用。
React系列系列：
前端React系列一: React简介
前端React系列二: create-react-app简介
前端React系列三: TypeScript简介
前端React系列四：Ant Design简介
前端React系列五：React+CRA+TS+Ant Design高效开发前端
前端React系列六：ant-design-pro简介
前端React系列七：ant-design-pro架构
前端React系列八：ant-design-pro辅助开发命令
前端React系列九：Umi简介
前端React系列十：Umi环境变量
前言
前文介绍了，如何结合React+CRA+TS+Ant Design高效地开发前端，但是对于习惯了基于开源解决方案进行开发的人来说，从零开始构建，肯定费时费力。
本文就来介绍一个开源的解决方案Ant Design Pro ，它是基于 Ant Design 和 React 的企业级中后台前端/设计解决方案，它封装了许多常用的中后台页面和功能，适合快速构建企业级应用。
Ant Design Pro 是基于 Ant Design 和 umi 的封装的一整套企业级中后台前端/设计解决方案，致力于在设计规范和基础组件的基础上，继续向上构建，提炼出典型模板/业务组件/配套设计资源，进一步提升企业级中后台产品设计研发过程中的『用户』和『设计者』的体验。
1. 主要特性
它提供了一套开箱即用的管理系统框架，帮助开发者快速构建中后台应用。
- 丰富的页面模板：
Ant Design Pro 提供了多种常用页面模板，帮助开发者快速搭建中后台应用。- 登录/注册页面：用于用户认证。
- 仪表盘：展示关键数据和统计信息。
- 列表页面：展示和操作数据列表。
- 详情页面：展示单个数据项的详细信息。
- 编辑页面：提供数据的增删改查功能。
- 强大的布局系统：
支持多种布局方案，方便开发者根据需求调整页面布局。Ant Design Pro 支持多种布局方案，包括顶部导航、侧边导航、混合导航等。开发者可以根据需求选择或自定义布局。 - 权限管理：
内置权限管理机制，通过配置权限模型，可以实现基于角色的访问控制。结合路由和菜单配置，可以轻松实现不同角色的权限管理。 - 国际化支持：
内置国际化解决方案，支持多语言切换。使用 react-intl 进行国际化配置。开发者可以通过配置语言包，实现多语言切换。 - 最佳实践：
Ant Design Pro 包含了很多企业级应用开发的最佳实践，如代码规范、目录结构、状态管理、网络请求、Mock 数据等。 - 高度可定制：
提供丰富的配置选项，允许开发者根据项目需求进行自定义。
2. 创建项目
可以通过官方提供的脚手架工具 @ant-design/pro-cli 来快速创建一个 Ant Design Pro 项目：
安装pro-cli
npm i @ant-design/pro-cli -g
创建项目springboot_frontend_adp
pro create springboot_frontend_adp
安装过程中，会咨询安装simple 还是complete版本。
- simple： 为基础模板，只提供了框架操作的基本内容，
- complete： 包含了所有块，不适合作为基础模板进行二次开发。
? 🚀 Full or a simple scaffold? (Use arrow keys)
❯ simple
complete
我这里为了体验更多的功能，选了complete。
4. 目录结构
创建完毕后，会在当前目录下生成项目目录springboot_frontend_adp。进入该目录，就能看到一个典型的 Ant Design Pro 项目目录结构：
springboot_frontend_adp
├── config
├── mock
├── public
├── src
│ ├── assets
│ ├── components
│ ├── e2e
│ ├── layouts
│ ├── locales
│ ├── models
│ ├── pages
│ ├── services
│ ├── utils
│ ├── app.tsx
│ ├── global.less
│ ├── global.ts
│ ├── defaultSettings.ts
│ └── typings.d.ts
├── tests
├── .eslintrc.js
├── .gitignore
├── .prettierrc.js
├── config.ts
├── jest.config.js
├── tsconfig.json
├── package.json
└── yarn.lock
5. 运行项目
在创建项目后，可以使用以下命令运行项目：
cd springboot_frontend_adp
yarn
yarn start
即可进行编译运行了，完成时，会有如下提示
info - [MFSU] restore cache
╔════════════════════════════════════════════════════╗
║ App listening at: ║
║ > Local: http://localhost:8000 ║
ready - ║ > Network: http://192.168.1.3:8000 ║
║ ║
║ Now you can open browser with the above addresses↑ ║
╚════════════════════════════════════════════════════╝
5. Uncaught Error解决
按提示，在浏览器中打开: http://localhost:8000
如不出意外，你打开的页面，一直加载，然后提示异常，按F12，会看到以下路由信息错误。
Uncaught Error: Absolute route path "/*" nested under path "/user" is not valid. An absolute child route path must start with the combined path of all its parent routes.
Error
解决办法
根据提示
Absolute route path "/*" nested under path "/user" is not valid.
感觉是"/user" 下的route path "/"除了问题，我们尝试注释掉它试试看看，到文件config/routees.ts 中找到 /user 下的子路由 / ，并注释掉
export default [
{
path: '/user',
layout: false,
routes: [
{
path: '/user/login',
layout: false,
name: 'login',
component: './user/login',
},
{
path: '/user',
redirect: '/user/login',
},
{
name: 'register-result',
icon: 'smile',
path: '/user/register-result',
component: './user/register-result',
},
{
name: 'register',
icon: 'smile',
path: '/user/register',
component: './user/register',
},
//就是这里，把它注释掉
// {
// component: '404',
// path: '/*',
// },
],
},
……
注释后，自动编译更新，会自动刷新页面，即可正常运行
image.png
总结
Ant Design Pro 提供了一套完善的解决方案，帮助开发者快速构建企业级中后台应用。它不仅包含了丰富的 UI 组件和页面模板，还提供了完善的权限管理和国际化支持，使其成为中后台系统开发的利器。无论是初学者还是有经验的开发者，都可以从 Ant Design Pro 中受益，快速构建高质量的应用。
网友评论