本文已参与「新人创作礼」活动,一起开启掘金创作之路。
之前两篇文章讲了Ant Design Pro V5 的 基本配置 和 比较重要的五大模块, 这篇文章就比较轻松了,来聊聊 V5 的工作流程,如果是刚接触 V5 的小伙伴,相信这篇文章一定能帮助你~(● ̄(エ) ̄●)
V5 相关的技术栈
Ant Design Pro V5 所用的技术还是比较新的,主要有 react(Hook函数式编程)
+ ts
+ ant design
+ ProComponents
+ umi
+ dva
+ ant design Chart
等, 关于组件的部分没有过多的解释,我们来简单介绍下其他的语言~
React
如果你对它还不了解,请查看:React文档,它是学习该教程的前提。学过Vue的小伙伴,有的反馈说,它比较难上手,不如Vue简单高效。其实这点我个人观点是不同意的,Vue适合小型项目,代码复用低的情况。React难归难,但是一旦上手,便爱不释手。
React Hook
Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。也就是说函数式组件也能拥有状态,并且比class组件的使用更加简洁,请查看: React Hook
dva
dva 首先是一个基于 redux 和 redux-saga 的数据流方案,然后为了简化开发体验,dva 还额外内置了 react-router 和 fetch,所以也可以理解为一个轻量级的应用框架。简单的说,Dva是在Mobx和Redux基础上的高度封装,使用更简单高效。 请查看:Dva文档
Umi@3
umi 是蚂蚁金服的底层前端框架,已直接或间接地服务了 600+ 应用,是一个可插拔的企业级 react 应用框架。umi 以路由为基础的,支持类 next.js 的约定式路由,以及各种进阶的路由功能,并以此进行功能扩展,比如支持路由级的按需加载。简单的说,有了Umi,从此操作路由变得如此高效简单。 请查看:Umi文档
TypeScript
带类型的 JS,ypeScript 是 javascript 的超集,TypeScript 不仅包含 JavaScript 的语法,同时还提供了静态类型检查和更完善的代码提示功能。任何现有的 JavaScript 程序都是合法的 TypeScript 程序,只需要简单的学习,就可以获得更佳的开发体验。简单来说,ts就是代码检测,使用的时候超级方便,同时也让代码更加规范,更好维护
有兴趣的同学可以先看看相关的文档,这样能加深对 V5 的理解
文件结构
在目录结构这里,本人建议新增一个公共页面,用于存放公共的页面
├── config # umi 配置,包含路由,构建等配置
├── mock # 本地模拟数据
├── public
│ └── favicon.png # Favicon
├── src
│ ├── assets # 本地静态资源
│ ├── commonPages # 公共页面
│ ├── components # 业务通用组件
│ ├── e2e # 集成测试用例
│ ├── layouts # 通用布局
│ ├── models # 全局 dva model
│ ├── pages # 业务页面入口和常用模板
│ ├── services # 后台接口服务
│ ├── utils # 工具库
│ ├── locales # 国际化资源
│ ├── global.less # 全局样式
│ └── global.ts # 全局 JS
├── tests # 测试工具
├── README.md
└── package.json
复制代码
页面代码结构推荐,建议将接口单独分离出来~
src
├── components
└── pages
├── Welcome // 路由组件下不应该再包含其他路由组件,基于这个约定就能清楚的区分路由组件和非路由组件了
| ├── components // 对于复杂的页面可以再自己做更深层次的组织,但建议不要超过三层
| ├── index.tsx // 页面组件的代码
| └── index.less // 页面样式
| └── interface.d.ts // 页面复杂,单独把ts拿出来
| └── services.ts // 接口
| └── mock.ts // 模拟数据,大部分不需要
复制代码
V5 页面执行顺序
1.首先执行
我们先看看 /scr/app.tsx
这段代码
首先页面打开(无论哪个页面都会执行),会执行 app.tsx
里的 getInitialState
,然后走向queryCurrentUser
这个函数,在这个函数上他会判断 access
是否存在,如果不存在则会报错,发送状态码为401, 然后就会走向登录页面,反之则会停留在当前页面
2.抵达登录页面
到达登录页面后。输入账号密码时走向 fetchUserInfo
这个方法,这个方法主要的作用是存储了一开始登录接口所需的函数
注意,这里进去的页面不会执行 getInitialState
这个函数,所以再次要执行获取用户信息的方法
3.页面切换
我们做的页面会放在浏览器上,我们需要登录信息才能够打开,但由于许多外部原因会导致存储的信息发生变化,如清储缓存,时间过长导致登录信息失效等,那么在 V5 中如何判断的呢?
会将登录信息放在 initialState 中,我们需要在 app,tsx
中的 onPageChange
这个方法里
这个方法是通过页面转换而触发的,在这里也会判断用户信息是否存在,如果不存在,则会重新跳转登录界面
其他
@ 做了什么
我们随意的可以看见类似这样的引入
import Footer from '@/components/Footer';
复制代码
那么 @是干嘛的呢?
其实在项目中引入分为绝对路径和相对路径,我们通常将组件放置在 component
模块下,配置放置在 utils
模块下,那么 @ 实际上就是 相当于绝对路径 也就是 /src 的作用,他就是别名
帮助我更快速的引入,详细的可参考 webpack别名设置
至此,有关Ant Design Pro V5的三篇文章就完成了,以上文章只是本人的看法,如果有不对的地方欢迎留言指出,致谢(● ̄(エ) ̄●)!
关于 Ant Design Pro V5 的基本配置请看 打造属于你的Ant Design Pro V5(一)
Ant Design Pro V5 五大模块的配置使用请查看打造属于你的Ant Design Pro V5(二)