本篇文章是通过页面访问顺序来进行介绍的
项目git地址:https://gitee.com/xikeda/Fram...
一、index.ejs
1、在这个文件夹中我们通常做一些默认的字体设置,以及IE浏览器兼容性的处理。
字体处理:
```
```
IE浏览器兼容性设置:
二、index.js
初始化一些默认配置,和调用model中的global.js获取全局共有的数据。
三、router.js
进入路由组件,在这个组件中我们需要加载页面的框架也就是layout组件,同时进行页面初次打开时所访问页面。
还有进行权限的配置与拦截。
四、layouts/BasicLayout.js
整个页面的框架部分,主要是做一下工作:
- 构建整个页面,把所有的页面拼凑起来。
- 用户权限判定,与其对应菜单的生成。
- 对非法请求路径进行拦截,和重定向
- 调用models/global.js,获取全局共用数据
五、common/
在这个文件夹中存放着两个文件,一个是menu.js
一个是router.js
1.menu.js
在这个文件中,我们发现我们的菜单是写死的,但是在正式的项目,我们的菜单都是请 求后台来获取的,所以这里需要修改。
2.router.js
这个地方是Antd-pro中最为核心的一部分,如果把Antd-pro比作一辆汽车的话,那个router.js就是它的引擎,它连接着:Router、Model、Component,通过方法getRouterData
把他们绑定到一起
// '/路由Router':{
// component: dynamicWrapper(app, [Model], () => import(组件Component)),
//}
'/': {
component: dynamicWrapper(app, ['user', 'login'], () => import('../layouts/BasicLayout')),
},
如果我们要添加一个页面,就需要在这个地方进行注册
六、routes/
业务页面入口和常用模板
注意:一个业务对应一个文件
在写每一个业务时,需要对这个这个业务的流程与整个构成有一个深入的了解,因为我们需要把一些功能相近的模块提取出来写一个共有的组件。
并且在写的时候,尽量把业务拆分成多个板块,然后创建不同文件,最后再在一个文件去,拼凑这些细化的功能组件。
举例:(简单的CRWD组件)
1.模块:顶部的搜索框、中部的操作按钮、底部表格、新增或者编辑所需要的Form表单
2.搜索框组件:SearchForm.js;操作组件:HandleList.js;表格组件:Table.js;表单组件:Form.js;
七、component/
业务通用组件
注意:
1. 公用组件中绝对不能涉及到数据,所有的数据来源均来自调用这个通用组件的组件
2. 判定每一个传入的数据的格式,设置默认值,防止传入空的或者格式不匹配的数据
3. 备注好每一个函数的作用
在写通用组件时,我需要的是足够细化它的功能,并且尽可能的去考虑到多的情况。
八、models/
dva model模块
在这个模块去编写需要跨多个组件的数据传递,并且请求后台数据。当我向后台发送请求时,在返回请求的的数据中,需要判定data中的code,如果code为0则为请求成功,如果不为0,我们需要抛出这个这个错误,告知用户。
注意:
一个业务组件一个对应一个model对应一个后台服务
九、services/
后台接口服务
这个模块对应这后台接口服务。
// 接口名称
export async function fakeGetcaptcha(params){
// 共有API前缀 私有API接口
return request(createTheURL(Config.API.LOGIN, 'getcaptcha'), {
method: 'GET', // 请求方法
body: params, //向后台发送的数据
});
}
注意
1.私有接口必须为全小写
2.通常情况下一个业务对应一个services
十、request/
向后台发送请求
在这个里面一共有4个文件
1.request.js
选择调用的后台请求模式,axios或者fetch,固定参数API.REQUEST_METHOD
可以在./../../config/api
中进行配置
2.request.axios.js和request.fetch.js,这两种不同写法,但是具备相同功能的请求。
3.checkStatus.js检查请求完成后,返回的data中的code是否存在错误,如果有则直接抛出。
我们在处理后台请求时还会需要几个文件:
- utils/ip.js设置请求的ip地址
- utils/utils.js中的createTheURL拼接ip地址与API接口,使其成为一个完整的请求地址
- config/api.js写共有的请求方式(REQUEST_METHOD),和API请求接口