antdesignpro来源于antdesign,其是一段自带样式的react组件,用于企业后台的漂亮的,可控的组件。
因为antdesign很强大,阿里有些大神就直接将antdesign继续向上封装成一个完整的项目,这就是antdesignpro,注意antdesignpro已经是一个成形的项目,配置环境已经好了,我们做项目只需要在其上进行增删改就可以了,其就是个脚手。架
安装
npmcreateumi
然后在下面的选项中选择antdesignpro
目录结构
我们写的界面主要是在pages里面,路由配置主要是在config里面
antdesignpro最常用有两个命令:
umidev:本地模拟开发环境,可以使用mock数据,使用的开发环境的服务器是expressumibuild:打包出静态文件,使用线上服务器进行运行,如果在本地模拟线上环境,可以通过插件serve,这时候用不了mock数据的(可以安装一个本地静态服务器:npmiserve,然后通过serve-sdist,这时候就可以在本地模拟一个线上环境)路由和菜单是组织起一个应用的关键骨架,pro中的路由为了方便管理,使用了中心化的方式,在config.ts统一配置和管理,根据路由的配置会自动生成对应的菜单。
定义和修改antdpro中的样式
因为我们定义的css是全局性的,这就产生了全局污染的问题,也就是说,我们通过npmrunbuild之后的css文件,后面的css选择器会覆盖前面的css选择器,为了解决这种情况,我们采用了cssmodules方式,其定义如下:
在上面的样式文件中,.title只会在本文件生效,你可以在其他任意文件中使用同名选择器,也不会对这里造成影响。
前后端如何进行交互的:
1.UI组件交互操作;2.调用model的effect;3.调用统一管理的service请求函数;4.使用封装的request.ts发送请求;5.获取服务端返回;6.然后调用reducer改变state;7.更新model。
从上面的流程可以看出,为了方便管理维护,统一的请求处理都放在services文件夹中,并且一般按照model维度进行拆分文件,在处理复杂的异步请求的时候,很容易让逻辑混乱,陷入嵌套陷阱,所以AntDesignPro的底层基础框架dva使用effect的方式来管理同步化异步请求(通过generator和yield使得异步调用的逻辑处理跟同步一样):
tips:
跨域:只要请求协议或者IP或者端口有一个不同,就表示是不同的请求,这时候就存在跨域,注意跨域请求中,服务器还是可以接收到跨域请求的,只是响应会被浏览器给拦截,所有处理跨域有个方法就是让服务器告诉浏览器某个请求允许跨域,当然处理跨域还可以使用代理方式proxy其实前端开发说起来很简单,也就是两件事,就是发起请求和处理数据,把这两件事情处理好了,前端也就学好了,再复杂的前端框架都是围绕这两点展开的antdpro是基于umi,es6,dva,等,如果有这几方面基础,会更加容易掌握antdpro本质上pro里面的mock数据是不支持线上环境调用的,但是有些时候确实需要在线上环境调用mock,这时候可以通过工具umiserve,将mock数据单独抽离出来,运行在某一个服务上,供pro调用。注意umiserve相对于umidev区别是:umidev支持热更新,但是umiserve不支持热更新,需要重新启动后才会更新界面,umiserve更像线上环境安装包的时候,npminstall[...]默认是npminstall[...]-S在一个项目中,到底是使用npm安装依赖还是yarn,有一个参考标准,就是根据package.json里面某些命令是用npm还是yarn在终端中,如果想知道当前路径,可以通过命令:pwd注意开发过程中,如果遇到困难,可以查官方文档,看看有没有对应的例子,实在不行,可以看源码antdesign有很多组件和样式,不可能所有都记住,我们只要记住常用的,遇到不常用的,学会查文档就可以了