Ant Design 与 Ant Design Pro

1.ReactJS

1.1.分层

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

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

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

1.2.使用DVA进行数据分层管理

DVA是基于redux,redux-saga和react-router的轻量级前端框架，想要使用它，我们需要在config.js文件中进行配置：

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

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

export default {
   
    //导出模型数据
    namespace: 'List',//通过namespace区分名称
    state: {
   
        dataList: [1, 2, 3],
        maxNum: 3
    },
    reducers: {
   
        //定义一些函数
        addNewData: function (state) {
   //这个state是更新之前的数据
            
            let maxNum = state.maxNum + 1;
            let newArr = [...state.dataList, maxNum];

            //通过return返回更新后的数据
            return {
   
                dataList: newArr,
                maxNum: maxNum
            }
        }
    }
}

import React from 'react';
import {
    connect } from 'dva';

const namespace = 'List';
//说明第一个回调函数,将page层和model层进行链接,返回model中的数据;
//并且,将返回的数据绑定到this.props中

// 接收第二个函数,这个函数的作用:将定义的函数绑定到this.props中,调用model层中定义的函数
@connect((state) => {
   
    return {
   
        dataList: state[namespace].dataList,
        maxNum: state[namespace].maxNum
    }
},

(dispatch)=>{
   
    //dispatch的作用可以调用model定义的函数
    return {
   
        add : function () {
   
            dispatch({
   //通过dispatch调用model中定义的函数,通过type属性,指定函数名
                type: namespace+"/addNewData"
            });
        }
    }
})
class List extends React.Component {
   

    constructor(props) {
   
        super(props);
    }

    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;

具体流程如下：

1.3.在model层中请求数据

首先在src下创建utils目录，并且创建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',//通过namespace区分名称
    state: {
   
        dataList: [],
        maxNum: 1
    },
    reducers: {
   
        //定义一些函数
        a