文档章节

轻松玩转Ant Design Pro一

前端扫地僧
 前端扫地僧
发布于 11/09 16:34
字数 1370
阅读 32
收藏 0

file

ant design pro来源于ant design,其是一段自带样式的react组件,用于企业后台的漂亮的,可控的组件。ant design有很多组件和样式,不可能所有都记住,我们只要记住常用的,遇到不常用的,学会查文档就可以了
因为ant design很强大,阿里有些大神就直接将ant design继续向上封装成一个完整的项目,这就是ant design pro,注意ant design pro已经是一个成形的项目,配置环境已经好了,我们做项目只需要在其上进行增删改就可以了,其就是个脚手架

安装
npm create umi

然后在下面的选项中选择ant design pro
file
这时候pro的脚手架就会安装了

目录结构

file

ant design pro最常用有两个命令:

  • umi dev:本地模拟开发环境,可以使用mock数据,使用的开发环境的服务器是express
  • umi build:打包出静态文件,使用线上服务器进行运行,如果在本地模拟线上环境,可以通过插件serve,这时候用不了mock数据的(可以安装一个本地静态服务器:npm i serve ,然后通过serve -s dist,这时候就可以在本地模拟一个线上环境)

路由和菜单是组织起一个应用的关键骨架,pro 中的路由为了方便管理,使用了中心化的方式,在 config.ts 统一配置和管理,根据路由的配置会自动生成对应的菜单。 我们看下如何定义和修改antd pro中的样式
因为我们定义的css是全局性的,这就产生了全局污染的问题,也就是说,我们通过npm run build之后的css文件,后面的css选择器会覆盖前面的css选择器,为了解决这种情况,我们采用了css modules方式,其定义如下:

import styles from './example.less';
export default ({ title }) =&gt; <div classname="{styles.title}">{title}</div>;
.title {
  color: @heading-color;
  font-weight: 600;
  margin-bottom: 16px;
}

在上面的样式文件中,.title 只会在本文件生效,你可以在其他任意文件中使用同名选择器,也不会对这里造成影响。
下面我们看下pro作为前端框架和服务端是如何进行交互的:
1.UI 组件交互操作;
2.调用 model 的 effect;
3.调用统一管理的 service 请求函数;
4.使用封装的 request.ts 发送请求;
5.获取服务端返回;
6.然后调用 reducer 改变 state;
7.更新 model。

从上面的流程可以看出,为了方便管理维护,统一的请求处理都放在 services 文件夹中,并且一般按照 model 维度进行拆分文件, 在处理复杂的异步请求的时候,很容易让逻辑混乱,陷入嵌套陷阱,所以 Ant Design Pro 的底层基础框架 dva 使用 effect 的方式来管理同步化异步请求(通过 generator 和 yield 使得异步调用的逻辑处理跟同步一样):

effects: {
  *fetch({ payload }, { call, put }) {
    yield put({
      type: 'changeLoading',
      payload: true,
    });
    // 异步请求 1
    const response = yield call(queryFakeList, payload);
    yield put({
      type: 'save',
      payload: response,
    });
    // 异步请求 2
    const response2 = yield call(queryFakeList2, payload);
    yield put({
      type: 'save2',
      payload: response2,
    });
    yield put({
      type: 'changeLoading',
      payload: false,
    });
  },
},

tips:

  • 跨域:只要请求协议或者IP或者端口有一个不同,就表示是不同的请求,这时候就存在跨域,注意跨域请求中,服务器还是可以接收到跨域请求的,只是响应会被浏览器给拦截,所有处理跨域有个方法就是让服务器告诉浏览器某个请求允许跨域,当然处理跨域还可以使用代理方式proxy
  • 其实前端开发说起来很简单,也就是两件事,就是发起请求和处理数据,把这两件事情处理好了,前端也就学好了,再复杂的前端框架都是围绕这两点展开的
  • antd pro是基于umi,es6,dva,等,如果有这几方面基础,会更加容易掌握antd pro
  • 本质上pro里面的mock数据是不支持线上环境调用的,但是有些时候确实需要在线上环境调用mock,这时候可以通过工具umi serve,将mock数据单独抽离出来,运行在某一个服务上,供pro调用。注意umi serve相对于umi dev区别是:umi dev支持热更新,但是umi serve不支持热更新,需要重新启动后才会更新界面,umi serve更像线上环境
  • 安装包的时候,npm install [...]默认是npm install [...] -S
  • 在一个项目中,到底是使用npm安装依赖还是yarn,有一个参考标准,就是根据package.json里面某些命令是用npm还是yarn
  • 在终端中,如果想知道当前路径,可以通过命令:pwd
  • 注意开发过程中,如果遇到困难,可以查官方文档,看看有没有对应的例子,实在不行,可以看源码

扫码关注公众号,有更多精彩文章等你哦

file

© 著作权归作者所有

前端扫地僧
粉丝 0
博文 13
码字总数 12810
作品 0
无锡
前端工程师
私信 提问
使用Ant Design 和Vue,React中后台开发套餐

前言 目前Ant Design 提供 React 和 Vue 两种整合开发框架,开箱即用的中台前端/设计解决方案,可适合中小公司统一后台开发技术栈,本来只是业务信息系统,不要重复造轮子 AntDesign of Rea...

郭恩洲_OSC博客
01/23
2.5K
0
Akka HTTP实战:为Ant Design Pro提供后端接口

实战:为Ant Design Pro提供后端接口 之前章节已经了解了Akka HTTP的路由定制、数据序列化等内容,是时候开始一个比较完整的Web应用示例了。这里我们将使用 Akka HTTP 来集成 Ant Design Pro...

羊八井
2018/10/10
671
0
ng-alain 发布正式版!

ng-alain是一个基于ng-zorro-antd的企业后台脚手架,目标也非常简单,希望在Angular上面开发企业后台更简单、更快速。github地址是:cipchk/ng-alain。 一直以来对Ant Desig的理念非常喜欢,...

黑魔法
2018/07/26
566
0
Ant Design 更新到 3.4.0,修复多项 bug

ant-design 更新到 3.4.0,修复多项 bug。 下载地址: Source code (zip) Source code (tar.gz) 更新: 修复了一些语法错误。[#9832](https://github.com/ant-design/ant-design/pull/9832)......

h4cd
2018/04/02
1K
0
0408 - 从开源项目中学习

我之前的学习方式,大部分是直接学习技术,然后直接使用该技术,从零开始堆代码,解决实际问题。 这种方式的好处时,对技术基础部分理解比较深入;学习是一步步深入的,难度相对小些,不会因...

atJason
04/08
0
0

没有更多内容

加载失败,请刷新页面

加载更多

方法重载和重写是什么?有什么区别?

重写:在子类中将父类的成员方法的名称保留,重新编写成员方法的实现内容,更改方法的访问权限,修改返回类型的为父类返回类型的子类。 一些规则: 重写发生在子类继承父类 参数列表必须完全...

ConstXiong
27分钟前
3
0
Spring-Framework 目录

ls spring-orm/src/main/java/org/springframework/orm/hibernate5/ ObjectRetrievalFailureException.java jpa/ ......

MtrS
45分钟前
4
0
大学慕课

Visual C,Turbo C,Dev C的关系 不管是 Visual C、Turbo C 还是 Dev C,本质都是C语言,不存在高下之分。 三种叫法不同是因为 C 语言在三种不同的开发环境中拥有一些不同的开发习惯的区别。...

电子197徐泽彬
今天
4
0
GC偏方 强行fullgc

转自 https://www.jianshu.com/p/be5389ca93f7 FullGC这么恐怖,有办法缓解么,或者说尽量避免它在白天,甚至业务高峰期出现?有!笔者给你分享一个歪门邪道,不记得是多少年前,在哪里道听途...

os_m
今天
4
0
源码分析Mybatis MappedStatement的创建流程

上文源码分析Mybatis MapperProxy创建流程重点阐述 MapperProxy 的创建流程,但并没有介绍 *.Mapper.java(UserMapper.java) 是如何与 *Mapper.xml 文件中的 SQL 语句是如何建立关联的。本文将...

中间件兴趣圈
今天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部