day02-Ant Design以及Ant Design Pro入门

课程简介

• ReactJS入门，Model层
• Ant Design 入门
• Ant Design Pro 入门

1、ReactJS入门

1.1、Model

1.1.1、分层

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

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

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

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

1.1.2、使用DVA进行数据分层管理

dva 是基于 redux 、 redux-saga 和 react-router 的轻量级前端框架。

官网： https://dvajs.com/

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

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

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

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

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

编写内容：

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 (
            

                

                    {
// 遍历值
                        this.props.listData.map((value,index) => {
                            return 
{value}
                        })
                    }
                
                { //为按钮添加点击事件
// let maxNum = this.state.maxNum + 1;
// let list = [...this.state.dataList, maxNum];
// this.setState({ //更新状态值
// dataList : list,
// maxNum : maxNum
// });
                    }}>
                    添加
                
            
        );
    }
}
export default List;

测试：

可以看到，效果是一样的。
流程说明：

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中的数