一、概念: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模式下的仓库个人不用就不去介绍了。

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

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

三、部署和构建

  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、使用 模板 可以 自动创建 路由页面 并且配置路由。(模板代表一个页面)   如下图,可以自定义,创建一个模板页面。

  

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

五、路由和菜单

  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 这个布局入口文件就可以找到,这部分内容所在的文件。

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,
});

Ant Design Pro (中后台系统)教程的更多相关文章

  1. Ant Design Pro中Transfer穿梭框的实际用法(与后端交互)

    Ant Design Pro中Transfer穿梭框的实际用法(与后端交互) 该控件的属性以及属性的作用在ADP的官方文档中都有介绍,但没有讲如何与后端交互,本文旨在讲解该控件与后端的交互. Ant ...

  2. ant design pro超详细入门教程

    1.Ant Design Pro 初了解 说到ant design pro,得先了解一下ant design是个什么东西?ant design蚂蚁金服基于react打造的一个服务于企业级产品的UI框架 ...

  3. 实战 ant design pro 中的坑

    1.替换mock数据: 1.将:.roadhogrc.mock.js 中的代理模式替换 当不使用代理的时候就会将所有 /api/的链接换成 http://localhost:8080/ export ...

  4. 把antd的组件源码搬到Ant Design Pro中使用

    把组件源码搬过来后,样式死活不生效,经过1天的努力,有说less-loader的,有说webpack配置,还有说babel配置的,最后,我自己找到了方法 就是在global.less中使用@impor ...

  5. ant design pro (八)构建和发布

    一.概述 原文地址:https://pro.ant.design/docs/deploy-cn 二.详细 2.1.构建 当项目开发完毕,只需要运行一行命令就可以打包你的应用: npm run buil ...

  6. Ant Design Pro快速入门

    在上一篇文章中,我们介绍了如何构建一个Ant Design Pro的环境. 同时讲解了如何启动服务并查看前端页面功能. 在本文中,我们将简单讲解如何在Ant Design Pro框架下实现自己的业务功 ...

  7. Ant Design Pro 学习笔记:数据流向

    在讲这个问题之前,有一个问题应当讲一下: Ant Design Pro / umi / dva 是什么关系? 首先是 umi / dva 的关系. umi 是一个基于路由的 react 开发框架. d ...

  8. ant design pro (十五)advanced 使用 API 文档工具

    一.概述 原文地址:https://pro.ant.design/docs/api-doc-cn 在日常开发中,往往是前后端分离的,这个时候约定好一套接口标准,前后端各自独立开发,就不会被对方的技术难 ...

  9. ant design pro (十一)advanced Mock 和联调

    一.概述 原文地址:https://pro.ant.design/docs/mock-api-cn Mock 数据是前端开发过程中必不可少的一环,是分离前后端开发的关键链路.通过预先跟服务器端约定好的 ...

  10. ant design pro (七)和服务端进行交互

    一.概述 原文地址:https://pro.ant.design/docs/server-cn Ant Design Pro 是一套基于 React 技术栈的单页面应用,我们提供的是前端代码和本地模拟 ...

随机推荐

  1. 【ABAP系列】SAP ABAP模块-查找系统出口或BADI的方法

    公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[ABAP系列]SAP ABAP模块-查找系统出 ...

  2. Recurrent Neural Network(3):LSTM Basics and 《Inside Out》

    下图是Naive RNN的Recurrent Unit示意图,可以看到,在每个时间点t,Recurrent Unit会输出一个隐藏状态ht,对ht加工提取后将产生t时刻的输出yt.而在下一个时间节点t ...

  3. 编程语言-Python2-问题整理

    InsecureRequestWarning: Unverified HTTPS request is being made. import urllib3 urllib3.disable_warni ...

  4. python selenium无法清除文本框内容问题

    正常是我们在清除文本框内容的时候,都会使用 clear() 函数进行清除,但是有时候会出现,清除完成后再点击查询时,文本框的内容会再次自动填充,这个时候我们可以选择以下方式: #清空查询条件drive ...

  5. Windows组决策

    https://blog.csdn.net/wangjunjun2008/article/details/82426587

  6. rabbitmq部署安装

    1.安装rabbitmq需要提前安装erlang,相关下载地址:http://www.erlang.org/downloads,需要注意:默认安装的RabbitMQ 监听端口是5672     启动和 ...

  7. traceroute学习

    之前只知道ping telnet命令,后面学习了traceroute命令 ping最常用的,看是否可以ping通ip,查看网络是否可达 telnet探测端口是否通,telnet ip port tra ...

  8. Can't determine basedir from my_print_defaults mysqld

    我的环境是:centos7 + mysql5.7.26,今天在用 mysqldumpslow 命令查看慢查询日志时出现下面的错误 [root@localhost ~]# mysqldumpslow - ...

  9. Excption与Error包结构。OOM你遇到过哪些情况,SOF你遇到过哪些情况

    Java语言把异常当做对象来处理,并定义了一个基类(java.util.Throwable)作为所有异常的父类.异常分为Error和Exception两大类. Error 不可恢复的异常. 程序中不推 ...

  10. Sass函数:Introspection 函数 -type-of()

    type-of() 函数主要用来判断一个值是属于什么类型: 返回值: number 为数值型. string 为字符串型. bool 为布尔型. color 为颜色型. >> type-o ...