本篇文章是通过页面访问顺序来进行介绍的

一、index.ejs

1、在这个文件夹中我们通常做一些默认的字体设置，以及IE浏览器兼容性的处理。 字体处理：

```
<style>
@font-face
{
font-family: myFirstFont;
src: url('../static/fonts/fontawesome-webfont.ttf'),
     url('../static/fonts/fontawesome-webfont.eot'),
     url('../static/fonts/fontawesome-webfont.svg'),

}
body{
  font-family:myFirstFont;
  margin: 0;
}
</style>
```

IE浏览器兼容性设置：

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

二、RoleSettingList.jst.js

初始化一些默认配置，和调用model中的global.js获取全局共有的数据。

三、router.js

进入路由组件，在这个组件中我们需要加载页面的框架也就是layout组件，同时进行页面初次打开时所访问页面。 还有进行权限的配置与拦截。

四、layouts/BasicLayout.js

整个页面的框架部分，主要是做一下工作：

  1. 构建整个页面，把所有的页面拼凑起来。
  2. 用户权限判定，与其对应菜单的生成。
  3. 对非法请求路径进行拦截，和重定向
  4. 调用models/global.js，获取全局共用数据

五、config

在这个文件夹中存放着两个文件，一个是api.js一个是router.config.js

1.router.config.js 在这个文件中，我们发现我们的菜单是写死的，但是在正式的项目，我们的菜单都是请 求后台来获取的，所以这里需要修改。

  1. api.js 这里登记了API接口信息

六、src/pages/

业务页面入口和常用模板 注意：一个业务对应一个文件

在写每一个业务时，需要对这个这个业务的流程与整个构成有一个深入的了解，因为我们需要把一些功能相近的模块提取出来写一个共有的组件。 并且在写的时候，尽量把业务拆分成多个板块，然后创建不同文件，最后再在一个文件去，拼凑这些细化的功能组件。

举例：（简单的CRWD组件）

1.模块：顶部的搜索框、中部的操作按钮、底部表格、新增或者编辑所需要的Form表单

2.搜索框组件：SearchNews.js；操作组件：HandleList.js；表格组件：Table.js；表单组件：Form.js；

七、src/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是否存在错误，如果有则直接抛出。

我们在处理后台请求时还会需要几个文件：

  1. utils/ip.js设置请求的ip地址

  2. utils/utils.js中的createTheURL拼接ip地址与API接口，使其成为一个完整的请求地址

  3. config/api.js写共有的请求方式（REQUEST_METHOD），和API请求接口

results matching ""

    No results matching ""