基于Ant Design Pro下使用mock模拟本地数据

注明：本文是在https://blog.csdn.net/qq_41139830/article/details/82976282的基础上学习并记录过程，可直接点击原博主的链接进行学习。

1.安装antd pro 脚手架
在使用mock模拟数据之前需要先进行antd pro脚手架的安装，具体的安装步骤不详细说明。
可参考antd prog官网
以下是项目的目录结构：

├── config # umi 配置，包含路由，构建等配置
├── mock # 本地模拟数据
├── public
│ └── favicon.png # Favicon
├── src
│ ├── assets # 本地静态资源
│ ├── components # 业务通用组件
│ ├── e2e # 集成测试用例
│ ├── layouts # 通用布局
│ ├── models # 全局 dva model
│ ├── pages # 业务页面入口和常用模板
│ ├── services # 后台接口服务
│ ├── utils # 工具库
│ ├── locales # 国际化资源
│ ├── global.less # 全局样式
│ └── global.ts # 全局 JS
├── tests # 测试工具
├── README.md
└── package.json

---

2.使用mock数据模拟中所涉及的文件

以下解释均为个人理解，仅作为参考，有错误请指正

• pages 负责渲染页面，直接与用户进行交互。
• models 负责处理业务逻辑，为pages处理数据的状态。
• services 负责http接口对接，提供接口给数据进行读写。
• mock 本地模拟虚拟数据提供pages中的组件进行调用渲染。
• config 在这个文件夹下进行路由以及插件的配置等，路由配置即配置页面（组件）与对应的路径进行页面切换。

---

3.具体步骤

• 创建页面
  在src / pages下创建Test文件夹，在文件夹中创建一个index.js文件。在这个文件中将写入一个表格组件。更多的组件的写法可参考ant.design官网

import React, { Component } from 'react';
import {Table} from 'antd'; //引入table组件

 class Home extends Component {
  render() {
    const  columns= [{
      title:'Name',
      dataIndex:'name',
      key:'name',
    },
      {
        title:'Age',
        dataIndex:'age',
        key:'age',
      },
      {
        title:'Address',
        dataIndex:'address',
        key:'address',
      }];

    return (
      <div>
        <Table
          bordered
          columns = {columns}
          size = "small" / >
        </div>
        );
        }
        }

  export default Home; //向外暴露
  

• 添加路由

在config / router.config.js文件中添加页面的路由，将其配置到菜单中与其它菜单选项的路由平齐

//test
      {
        name:'test',//菜单名称
        icon:'dribbble',//icon ，可从ant-deisgn icon中挑选
        path:'/test', //路由名字
        component:'./Test/index'//组件位置
      },

配置好后，页面将在http://localhost:8000/test路径下展示（8000是默认端口号，若被占用的话会替换成其它端口号）

为了美观，可在src / locales /zh-CN / menu.js中配置菜单名称（可跳过）

当前页面

• 在mock文件中添加模拟的数据
  在mock/api.js文件中添加所需要模拟的数据

const testHome = [
  {
    key:'1',
    name:'John Brown',
    age:32,
    address:'New York No. 1 Lake Park',
  },{
    key:'2',
    name:'Jim Green',
    age:32,
    address:'London No. 1 Lake Park',

  },{
    key:'3',
    name:'Joe Black',
    age:32,
    address:'Sidney No. 1 Lake Park',
  }];

并在同一文件的末端添加提供数据模拟的接口

• 在services文件中添加提供数据写读的接口
  在src / services / api.js文件中添加请求/api/home 端口数据的函数 queryhome
  

• 在models中处理数据的状态
  在src / models下创建home.js文件用于action，更新 state 并传递给 props。

import {queryHome} from "../services/api";

export  default  {
  namespace :'home', //namespace:是model的命名空间，用于区分model
  state:{   //state:当前model状态的厨师值，表示当前状态
    list:[],
  },
 
 //用于处理异步操作和业务逻辑，由action触发，但不能修改state
  effects:{
    *fetch({payload},{call,put}) {
      const response = yield call(queryHome,payload);
      yield put({
        type:'show',
        payload:response,
      });
    },
  },

//reducers:用于处理同步操作，由action触发,可修改state
reducers:{
//action:是reducers及effects的触发器，一般是一个对象，如：{type:'add',payload:todo}
  show(state,action){
    return{
      ...state,
      list:action.payload,
    };
  },
},
};

• 页面请求数据
  回到最初创建在src / pages / Test 中的index.js文件中添加请求数据的代码
  
• 页面使用数据
  同样是在index.js中添加代码
  

index.js完整代码

import React, { Component } from 'react';
import {Table} from 'antd';
import {connect} from 'dva';


@connect(({home,loading}) => ({
  //连接home.js 文件
  home,
  loading: loading.models.home,
}))


class Home extends Component{

  componentDidMount() {
    const {dispatch} = this.props;

    dispatch({
      type:'home/fetch',// action的类型，由home命名空间和其下面的fetch方法构成
    });                    // 派发这个action就会调用home中的fetch函数，然后就会请求数据}
  }


  render(){
    const {home: {list} } = this.props;//将home中的this.props.list命名为lists

    const  columns= [{
      title:'Name',
      dataIndex:'name',
      key:'name',
    },
      {
        title:'Age',
        dataIndex:'age',
        key:'age',
      },
      {
        title:'Address',
        dataIndex:'address',
        key:'address',
      }];


    const  dataSource = [...list];

    return(
      <div>
        <Table
          bordered
          dataSource={dataSource}
          columns={columns}
          size="small" />
      </div>

    );
  }
}
export default Home;

• 最终页面
  

---

4.总结

• 若是刚接触此框架，可先访问以下的教程进行学习，此教程会带着创建一个基础的ant design的目录文件，以便更容易理解整个结构。

Ant Design 语雀Ant Design 实战教程(阿里提供的官方教程)

• 再次梳理mock模拟的流程
  （1）首先，我们先在pages下创建一个页面/组件，用于渲染整个页面，并为其配置好路由；
  （2）其次，在mock中写入我们所需要模拟的数据和接口，要注意数据格式，并在services 下的api 文件中配置数据所需要请求的接口；
  （3）接着，建立models，来接收 action，更新 state 并传递给 props；
  （4）最后，回到页面/组件中对数据进行请求和使用。

---