Ant Design Pro (中后台系统)教程

时间:2023-03-09 05:35:11
Ant Design Pro (中后台系统)教程

一、概念:https://pro.ant.design/docs/getting-started-cn(官方网站)

  1、Ant Design Pro 是什么:  https://www.cnblogs.com/freely/p/10874297.html

     Ant Design Pro 是一套开箱即用的中台前端/设计解决方案,是一个开发 中后台 系统的 脚手架。类似 vue-cli 一样,创建项目后,各种webpack配置、路由配置等,都已经弄好,直接开发就可以了。

  2、Ant Design Pro 相关的技术栈: react+redux+dva+antd+fetch+roadhog

     主要还是dva比较难理解,fetch 就 另外一种 ajax

二、安装:  两种安装方法

  扩展介绍:官网教程中 安装用到了  npm create umi  命令。   npm create 命令是什么呢,create 是 install 的别名。   https://zhuanlan.zhihu.com/p/77454212

       但是经过实践,个人感觉是调用 npx install umi,然后在调用git命令。

  方法一:按照官网的步骤:

    npm create umi     //
cd create // 安装时,直接创建create 项目目录
npm install // 安装依赖
npm start // 启动应用

  方法二: npm create umi 的本质,还是调用 git 命令到git仓库上下载代码。调用npm create umi命令后, 自动调用  git clone https://github.com/ant-design/ant-design-pro --depth=1   这个git命令 。

       所以我们可以直接调用git命令,而不用安装 umi。  git clone https://github.com/ant-design/ant-design-pro --depth=1   是 JavaScript模式下的仓库,typescript模式下的仓库个人不用就不去介绍了。

Ant Design Pro (中后台系统)教程

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

经过实践发现:还是方案一 更好,会把一些没用的文件,清理掉的;方案二 会多一些没用的文件出来

Ant Design Pro (中后台系统)教程

三、部署和构建

  1、环境变量:https://pro.ant.design/docs/environment-variables-cn

     环境变量是   ANT_DESIGN_PRO_ONLY_DO_NOT_USE_IN_YOUR_PRODUCTION

  2、构建 和 部署:   阅读  https://pro.ant.design/docs/build-cn

     a。路由是 browserHistory 模式的话,服务器必须要配置。不然对应的路由,在服务器是找不到这个资源的。下面以 nginx 服务器部署为例:

    location / {
root E:\代码仓库\create\dist;
index index.html; # 用于配合 browserHistory使用
try_files $uri $uri/ /index.html;
}

四、区块 开发 (重点)   https://pro.ant.design/docs/block-cn

  1、使用 模板 可以 自动创建 路由页面 并且配置路由。(模板代表一个页面)   如下图,可以自定义,创建一个模板页面。

  Ant Design Pro (中后台系统)教程

  2、 使用区块开发 可以 自动添加 需要的 antD 中的组件。(区块可以类比为一个组件)  如下图,将需要的 组件,添加到页面中,指定的位置上。

Ant Design Pro (中后台系统)教程

五、路由和菜单

  1、路由管理: 通过约定的语法,在 config.ts 中配置路由。https://pro.ant.design/docs/router-and-nav-cn

    a、路由菜单可以从服务器获取

  2、菜单生成: 根据路由配置 会自动生成菜单。菜单项名称,嵌套路径与路由高度耦合。

  3、面包屑: 组件 PageHeaderWrapper 中内置的面包屑,也可通过 RouteContext 提供的信息自定义生成。

  4、路由中 几个  layouts 组件(UI组件 和 业务组件):   (开发时,页面的入口就是从路由开始的)

    a、SecurityLayout (功能组件):分析代码,这个 应该是判断用户是否 登入的组件。

      b、 BasicLayout :基础页面布局,包含了头部导航,侧边栏和通知栏:

      c、 UserLayout:抽离出用于登录注册页面的通用布局

      d、 BlankLayout:这个空白 页面。这个组件没什么用。

六、布局 (路由的 UI 组件)           https://pro.ant.design/docs/layout-cn/

  说明:不同的页面 在路由中 可以 选择 在 需要的那种布局下。

  1、BasicLayout:基础页面布局,包含了头部导航,侧边栏和通知栏:

  2、UserLayout:抽离出用于登录注册页面的通用布局

  3、BlankLayout:空白的布局

七、新增页面

  1、pages目录下新建文件

  2、将文件加入菜单和路由

  3、新增 model、service:非必须,如果需要用到 dva 中的数据流,才要创建。

八、Pro 的 Layout 组件(几个组件集合):  https://pro.ant.design/docs/layout-component-cn

    注意,不是antD 的Layout 组件

  a、ProLayout 组件:路由中 BasicLayout 组件的核心 UI组件。实现左边菜单,头部的header 布局。

  b、PageHeaderWrapper :页头组件。快速实现 面包屑和标题。

  c、SettingDrawer :  SettingDrawer 提供了一个图形界面来设置 layout 的配置,方便在演示环境中展示 Layout 的所有能力。正式环境这个东西一般是要去掉的。

  d、DefaultFooter :页尾 组件。快速实现 页尾 内容。

九、页面设置样式      https://pro.ant.design/docs/style-cn

  1、基于 less 开发,具体的使用参考上面链接。

十、和服务器端交互

  1、

十一、Mock 和 联调

十二、更换主题

  1、主题定制:

   2、在线切换主题(重点):https://pro.ant.design/docs/theme-cn#%E5%9C%A8%E7%BA%BF%E5%88%87%E6%8D%A2%E4%B8%BB%E9%A2%98

  这个是  左边菜单和 页头固定的配置。   文档上的说的文件路径是错误的(可能文档没有实时更新)。正确的配置路径是   config/defaultSettings.js

十三、权限管理    https://pro.ant.design/docs/authority-management-cn

     这个 文档 还是比较清晰的


实践总结:

1、 固定左边菜单和 页头固定:

  修改 配置 文件   config/defaultSettings.js  就可以实现

2、创建 mock数据:

  只要在 mock 目录下的文件,有对应的 接口的匹配就可以了。不需要,在某个文件中引入相应的文件。脚手架中会自动把 mock下的所有文件进行执行的。

3、配置 代理 服务器:    在 config/config.js 中配置

     注意:mock 和 代理都 可以匹配的话,请求接口  会 走 mock 数据,代理的真实请求就没有想过。 关闭mock数据,或者 mock数据不能匹配对应的接口,就可以走代理请求,获取真实的数据。

4、菜单 中文配置:

  配置好路由,默认的菜单名称是英文的。要设置成中文的,需要在 src\locales\zh-CN\menu 中配置。

5、头部右边的内容,通过 BasicLayout.jsx 这个布局入口文件就可以找到,这部分内容所在的文件。

Ant Design Pro (中后台系统)教程

import RightContent from '@/components/GlobalHeader/RightContent';

6、 antD pro 安装 的项目,有一些对我们没有用的功能。需要删除掉。

  


dva 教程     https://dvajs.com/guide/introduce-class.html

说明:dva 首先是一个基于 redux 和 redux-saga 的数据流方案,然后为了简化开发体验

一、Model 对象:dva整个知识体系太多,设计中主要会用就可以了。在antd pro中,modes是放在一个目录下统一管理的,导出一个 model 对象,对象的选项如下:

  1、namespace:当前 Model 的名称

  2、state:该 Model 当前的状态

  3、reducers:Action 处理器,处理同步动作,用来算出最新的 State

  4、effects:Action 处理器,处理异步动作

二、使用:

  1、设置 dva 的 state:通过 dispatch 触发 修改。

dispatch({
type: 'products/delete',
payload: id,
});

  2、获取修改后的数据:

dispatch({
type: 'products/delete',
payload: id,
});