一、概念: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. Vagrant 手册之 Vagrantfile - Vagrant 设置 config.vagrant

    原文地址 配置的命名空间:config.vagrant config.vagrant 中的设置修改 Vagrant 自身的行为. 1. 可用设置 config.vagrant.host 设置运行 Va ...

  2. Vagrant 手册之网络 - 公共网络 public network

    原文地址 Vagrantfile 配置文件中公共网络的标识符:public_network,例如: config.vm.network "public_network" Vagra ...

  3. WCF权限认证多种方式

    WCF身份验证一般常见的方式有:自定义用户名及密码验证.X509证书验证.ASP.NET成员资格(membership)验证.SOAP Header验证.Windows集成验证.WCF身份验证服务(A ...

  4. 2019年Java Web最流行的开发框架总结

    ORM型框架:对数据进行持久化操作,例如:基于SQL的MyBatis框架和Hibernate框架. MVC型框架:从逻辑上分为视图层,控制层,模型层,各层各司其职,之间是相互调用的关系,而不是相互依赖 ...

  5. SEC4 - MySQL语法规范

    1.不区分大小写,但是建议关键字大写,表名.列名小写. 2.每条命令最好分号结尾 3.每条命令根据需要,可以进行缩进或者换行 4.注释 单行注释:#注释文字 单行注释:--注释文字 多行注释: /* ...

  6. vue2.0中router-link详解

    vue2.0中router-link详解:https://blog.csdn.net/lhjuejiang/article/details/81082090 在vue2.0中,原来的v-link指令已 ...

  7. Warning: session_start(): open(/var/lib/php/session/)

    Warning: session_start(): open(/var/lib/php/session/) 今天放置一个新的站点www.96net.com.cn在里面,登陆后台出现这种错,之后再lin ...

  8. elasticsearch 深入 —— 近似匹配

    近似匹配 使用 TF/IDF 的标准全文检索将文档或者文档中的字段作一大袋的词语处理. match 查询可以告知我们这大袋子中是否包含查询的词条,但却无法告知词语之间的关系. 思考下面这几个句子的不同 ...

  9. ASE Alpha Sprint - backend scrum 6

    本次scrum于2019.11.11在sky garden进行,持续30分钟. 参与人: Zhikai Chen, Jia Ning, Hao Wang 请假: Xin Kang, Lihao Ran ...

  10. Move Over and Click Link

    Move Over and Click Link [Documentation] 等待悬浮菜单中的元素出现并单击元素 [Arguments] ${hover_locator} ${opt_locato ...