ReactJS入门之Model层

忘是亡心i 2024-03-30 12:31 72阅读 0赞

**目录**

一：分层

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

三：在model中请求数据

四：mock数据

--------------------

## 一：**分层**  ##

**![77fd9b36ed7c4c18bacb9afc97add054.png][]**

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

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

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

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

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

![f2daaab5a49f4a158967179c61594418.png][]

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 文件：

![f098c45609ea4d9c8ecc1b38fb63e04a.png][]

编写内容：

export default {
    namespace: 'list',
       state: {
        data: [1, 2, 3],
        maxNum: 3
    }
    }

下面对 List.js 进行改造：

import React from 'react';
    import { connect } from 'dva';
    
    const namespace = 'list';
    const mapStateToProps = (state) => {
    
    const listData = state[namespace].data;
    return {
         listData
    };
    };
    
    @connect(mapStateToProps)
    class List extends React.Component{
    
    render(){
      return (
    <div>
    <ul>
    {
    // 遍历值
    this.props.listData.map((value,index) => {
    return <li key={index}>{value}</li>
    })
    }
    </ul>
    <button
    onClick={()=>{ //为按钮添加点击事件
    // let maxNum = this.state.maxNum + 1;
    // let list = [...this.state.dataList, maxNum];
    // this.setState({ //更新状态值
    // dataList : list,
    // maxNum : maxNum
    // });
    }}>
    添加</button>
    </div>
    );
    }
    }
    
    export default List;

测试：

![5327d2253b534591beba1c25293611d9.png][]

可以看到，效果是一样的。

流程说明：

1. umi 框架启动，会自动读取 models 目录下 model 文件，即 ListData.js 中的数据

2. @connect 修饰符的第一个参数，接收一个方法，该方法必须返回 \{\} ，将接收到 model 数据

3.  在全局的数据中，会有很多，所以需要通过 namespace 进行区分，所以通过 state\[namespace\] 进行获取数据

4.  拿到 model 数据中的 data ，也就是 \[1, 2, 3\] 数据，进行包裹 \{\} 后返回

5.  返回的数据，将被封装到 this.props 中，所以通过 this.props.listData 即可获取到 model 中的数据

刚刚只是将数据展现出来，如果点击按钮，需要修改 state 的值，怎么操作呢？

首先，在 model 中新增 reducers 方法，用于更新 state 中的数据：

export default {
    namespace: 'list',
    state: {
    data: [1, 2, 3],
    maxNum: 3
    },
    reducers : {
    addNewData(state){ //state是更新前的对象
    let maxNum = state.maxNum + 1;
    let list = [...state.data, maxNum];
    return { // 返回更新后的state对象
    data : list,
    maxNum : maxNum
    }
    }
    }
    }

接下来修改 List.js 新增点击事件：

import React from 'react';
    import { connect } from 'dva';
    const namespace = 'list';
    const mapStateToProps = (state) => {
    const listData = state[namespace].data;
    const maxNum = state[namespace].maxNum;
    return {
    listData, maxNum
    };
    };
    const mapDispatchToProps = (dispatch) => { // 定义方法，dispatch是内置函数
    return { //返回的这个对象将绑定到this.props对象中
    addNewData : () =>{ // 定义方法
    dispatch({ // 通过调用dispatch()方法，调用model中reducers的方法
    type: namespace + "/addNewData" // 指定方法，格式：namespace/方法名
    });
    }
    }
    }
    @connect(mapStateToProps, mapDispatchToProps) //mapDispatchToProps：函数，将方法映射到
    props中
    class List extends React.Component{
    render(){
    return (
    <div>
    <ul>
    {
    // 遍历值
    this.props.listData.map((value,index) => {
    return <li key={index}>{value}</li>
    })
    }
    </ul>
    <button
    onClick={()=>{this.props.addNewData()}}>
    添加
    </button>
    </div>
    );
    }
    }
    export default List;

测试：

![351926f53c304431a9a68babf783f067.png][]

测试结果，和之前实现效果一样。

流程梳理如下：

![f79e1ff3639d44a994632b66ac2741c9.png][]

## 三：**在****model****中请求数据**  ##

前面我的数据是写死在 model 中的，实际开发中，更多的是需要异步加载数据，那么在 model 中如何异步加载数据 呢？

首先，创建 src 下创建 util 目录，并且创建 request.js 文件，输入如下内容：（用于异步请求数据）

// import fetch from 'dva/fetch';
    
    function checkStatus(response) {
        if (response.status >= 200 && response.status < 300) {
    return response;
    }
    const error = new Error(response.statusText);
    error.response = response;
    throw error;
    }
    
    
    /**
    * Requests a URL, returning a promise.
    *
    * @param {string} url The URL we want to request
    * @param {object} [options] The options we want to pass to "fetch"
    * @return {object} An object containing either "data" or "err"
    */
    export default async function request(url, options) {
    const response = await fetch(url, options);
    checkStatus(response);
    return await response.json();
    }

然后，在 model 中新增请求方法：

import request from '../util/request';
    
    export default {
    namespace: 'list',
    state: {
    data: [],
    maxNum: 0
    },
    
    reducers: {
    addNewData(state, result) { //result就是拿到的结果数据
    if(result.data){ //判断result中的data是否存在，如果存在，说明是初始化数据，直接返回
    return result.data;
    }
    
    let maxNum = state.maxNum + 1;
    let list = [...state.data, maxNum];
    return { //更新状态值
    data: list,
    maxNum: maxNum
    }
    }
    },
    effects: { //新增effects配置，用于异步加载数据
    *initData(params, sagaEffects) { //定义异步方法
    const {call, put} = sagaEffects; //获取到call、put方法
    const url = "/ds/list"; // 定义请求的url
    let data = yield call(request, url); //执行请求
    yield put({ // 调用reducers中的方法
    type : "addNewData", //指定方法名
    data : data //传递ajax回来的数据
    });
    }
    }
    }

改造页面逻辑：

import React from 'react';
    import { connect } from 'dva';
    
    const namespace = 'list';
    
    const mapStateToProps = (state) => {
    const listData = state[namespace].data;
    const maxNum = state[namespace].maxNum;
    return {
    listData, maxNum
    };
    };
    
    const mapDispatchToProps = (dispatch) => {
    
    return {
    addNewData : () =>{
    
    dispatch({
    type: namespace + "/addNewData"
    });
    },
    
    initData : () => { //新增初始化方法的定义
    dispatch({
    type: namespace + "/initData"
    });
    }
    }
    }
    @connect(mapStateToProps, mapDispatchToProps)
    class List extends React.Component{
    componentDidMount(){
    this.props.initData(); //组件加载完后进行初始化操作
    }
    render(){
    return (
    <div>
    <ul>
    {
    // 遍历值
    this.props.listData.map((value,index) => {
    return <li key={index}>{value}</li>
    })
    }
    </ul>
    <button
    onClick={()=>{this.props.addNewData()}}>
    添加
    </button>
    </div>
    );
    }
    }
    
    export default List;

测试：

![4054114ec4844c6792b5f4bf01b63d51.png][]

测试结果，发现会报错，原因是返回的数据不是 json 导致，解析出错。

查看下请求：

![f62f0a1297eb4f92892373f639301008.png][]

可以看到，返回的是html代码，所以会导致出错。

完整的List.js页面代码：

import React from 'react';
    import { connect } from 'dva';
    
    const namespace = "list";
    
    // 说明：第一个回调函数，作用：将page层和model层进行链接，返回modle中的数据
    // 并且，将返回的数据，绑定到this.props
    
    // 接收第二个函数，这个函数的作用：将定义的函数绑定到this.props中，调用model层中定义的函数
    @connect((state) => {
        return {
            dataList : state[namespace].data,
            maxNum : state[namespace].maxNum
        }
    }, (dispatch) => { // dispatch的作用：可以调用model层定义的函数
        return { // 将返回的函数，绑定到this.props中
            add : function () {
                dispatch({ //通过dispatch调用modle中定义的函数,通过type属性，指定函数命名，格式：namespace/函数名
                    type : namespace + "/addNewData"
                });
            },
            init : () => {
                dispatch({ //通过dispatch调用modle中定义的函数,通过type属性，指定函数命名，格式：namespace/函数名
                    type : namespace + "/initData"
                });
            }
        }
    })
    class  List extends React.Component{
    
        componentDidMount(){
            //初始化的操作
            this.props.init();
        }
    
        render(){
            return (
                <div>
                    <ul>
                        {
                            this.props.dataList.map((value,index)=>{
                                return <li key={index}>{value}</li>
                            })
                        }
                    </ul>
                    <button onClick={() => {
                        this.props.add();
                    }}>点我</button>
                </div>
            );
        }
    
    }
    
    export default List;

完整的ListData.js页面代码：

import request from '../util/request';
    
    export default {
        namespace: 'list',
        state: {
            data: [],
            maxNum: 1
        },
        reducers : { // 定义的一些函数
            addNewData : function (state, result) { // state：指的是更新之前的状态数据, result: 请求到的数据
    
                if(result.data){ //如果state中存在data数据，直接返回，在做初始化的操作
                    return result.data;
                }
    
                let maxNum = state.maxNum + 1;
                let newArr = [...state.data, maxNum];
    
    
                return {
                    data : newArr,
                    maxNum : maxNum
                }
                //通过return 返回更新后的数据
            }
        },
        effects: { //新增effects配置，用于异步加载数据
            *initData(params, sagaEffects) { //定义异步方法
                const {call, put} = sagaEffects; //获取到call、put方法
                const url = "/ds/list"; // 定义请求的url
                let data = yield call(request, url); //执行请求
                yield put({ // 调用reducers中的方法
                    type : "addNewData", //指定方法名
                    data : data //传递ajax回来的数据
                });
            }
        }
    }

完整的request.js页面代码：

// import fetch from 'dva/fetch';
    
    function checkStatus(response) {
        if (response.status >= 200 && response.status < 300) {
            return response;
        }
    
        const error = new Error(response.statusText);
        error.response = response;
        throw error;
    }
    
    /**
     * Requests a URL, returning a promise.
     *
     * @param  {string} url       The URL we want to request
     * @param  {object} [options] The options we want to pass to "fetch"
     * @return {object}           An object containing either "data" or "err"
     */
    export default async function request(url, options) {
        const response = await fetch(url, options);
        checkStatus(response);
        return await response.json();
    }

## 四：**mock****数据** ##

umi 中支持对请求的模拟，由于我们现在没有真正的服务可以返回数据，所以才需要模拟。

在项目根目录下创建 mock 目录，然后创建 MockListData.js 文件，并且输入如下内容：

export default {
    'get /ds/list': function (req, res) { //模拟请求返回数据
    res.json({
    data: [1, 2, 3, 4],
    maxNum: 4
    });
    }
    }

进行测试：

![1b871b8bc9aa46dc9932064b1b584d70.png][]

发现，可以正常返回数据了。

页面效果也正常了 :

![fb8d46da7c734a8e889470a6b0a870a1.png][]

![a9272275e26541fd852c652fc2c07149.jpeg][]

[77fd9b36ed7c4c18bacb9afc97add054.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/340cb5f0d7014c4f96230859dd68d1ca.png
[f2daaab5a49f4a158967179c61594418.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/320908b743b94bc1a3bbe5a3a2655297.png
[f098c45609ea4d9c8ecc1b38fb63e04a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/dc024b5d6dbc4a65b14ed542e8c125f4.png
[5327d2253b534591beba1c25293611d9.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/85956273ea3b43e7b2c64658e57dcf97.png
[351926f53c304431a9a68babf783f067.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/a0170b199322495495951a2a013a9b1d.png
[f79e1ff3639d44a994632b66ac2741c9.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/2c0ecbd457c845ec99c818980a4d495f.png
[4054114ec4844c6792b5f4bf01b63d51.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/8caa1f7d1d774c4c8f6341b1c3f1bc55.png
[f62f0a1297eb4f92892373f639301008.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/779d12c16f064bbaaf65b1a886ae5a10.png
[1b871b8bc9aa46dc9932064b1b584d70.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/1c2bfe58ddf2410290411f538c8d3b14.png
[fb8d46da7c734a8e889470a6b0a870a1.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/1055f833d1ec489ca90815ffaf8ad67b.png
[a9272275e26541fd852c652fc2c07149.jpeg]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/cd18462218d54623acf650e3aaf72f2e.jpeg