ReactJS入门之Model层

目录

一：分层

二：使用DVA进行数据分层管理

三：在model中请求数据

四：mock数据

---

一：分层

       上图中，左侧是服务端代码的层次结构，由 Controller 、 Service 、 Data Access 三层组成服务端系统：

• Controller 层负责与用户直接打交道，渲染页面、提供接口等，侧重于展示型逻辑。
• Service 层负责处理业务逻辑，供 Controller 层调用。
• Data Access 层顾名思义，负责与数据源对接，进行纯粹的数据读写，供 Service 层调用。

上图的右侧是前端代码的结构，同样需要进行必要的分层：

• Page 负责与用户直接打交道：渲染页面、接受用户的操作输入，侧重于展示型交互性逻辑。
• Model 负责处理业务逻辑，为 Page 做数据、状态的读写、变换、暂存等。
• Service 负责与 HTTP 接口对接，进行纯粹的数据读写。

二：使用DVA进行数据分层管理

      dva 是基于 redux 、 redux-saga 和 react-router 的轻量级前端框架。官网： https://dvajs.com/

      对于 dva 我们不做过多详细的讲解，我们只要做到能够使用起来就可以了。对于想要全面学习 dva 框架的同学可自 行研究。

     首先，我们先将 dva 框架引入进来，由于 umi 对 dva 进行了整合，所以导入就变得非常简单了。

 在confifig.js文件中进行配置：

export default {
plugins: [
 ['umi-plugin-react', {
      dva: true // 开启dva功能
  }]
]
};

        接下来，创建 model 文件，在 umi 中，约定在 src/models 文件夹中定义 model ，所以，在该文件夹下创建

ListData.js 文件：