dva-roadhog模拟数据、渲染数据

版权声明：转载请标明出处 https://blog.csdn.net/qq_41155191/article/details/90896439

1、在根目录下的.roadhogrc.mock.js文件中写好数据

module.exports = {
  "POST /api/demo": (req, res) => {
    setTimeout(() => {
      res.json({
        code: 0,
        data: [{
          id: 1,
          name: '西瓜',
          price: 5.1,
        }, {
          id: 2,
          name: '苹果',
          price: 6.2,
        }, {
          id: 3,
          name: '香蕉',
          price: 7.3,
        }, {
          id: 4,
          name: '桃子',
          price: 8.4,
        }],
        msg: "嘿嘿",
      })
    }, 300)
  },

};

2、在需要渲染的页面的api.js文件里

import { post } from '../../../utils/request';

export const getList = (param = {}) => post('/api/demo', param);

3、在需要渲染的页面的model.js文件里

import { message } from 'antd';
import { routerRedux } from 'dva/router';
import * as Api from './api';

export default {
  namespace: 'goodsList',
  state: {
    list: [],
  },
  reducers: {
    save(state, { payload }) {
      return { ...state, ...payload };
    },
    saveList(state, { payload }) {
      return {
        ...state,
        list: payload,
      };
    },
  },
  effects: {
    *getList({ payload }, { call, put }) {
      // 请求前，根据实际需求确定是否需要显示loading
      message.loading();
      const { code, msg, data } = yield call(Api.getList, payload);
      // 判断code做出相应的操作
      // console.log(data);
      if (code != 0) {
        // 请求出错，根据实际需求确定是否需要明确提示用户
        message.error(msg || '请求出错，请稍后再试~', 3);
        // 请求数据出错，应当清空旧数据
        yield put({
          type: 'saveList',
          payload: [],
        });
        return;
      }
      // 如果之前有调用loading，请求结束则销毁掉loading
      message.destroy();
      yield put({
        type: 'saveList',
        payload: data || [],
      });
    },
    *getDetail({payload}, {call, put}) {
      const { code, data = {} } = yield call(Api.getDetail, payload);
      if (code != 0) {
        // 请求出错，根据实际需求确定是否需要明确提示用户
        message.error(msg || '请求出错，请稍后再试~', 3);
        // 请求数据出错，应当清空旧数据
        yield put({
          type: 'saveList',
          payload: [],
        });
        return;
      }
      message.destroy();
      yield put(routerRedux.push('/detail',{name: 'dkvirus', age: 20}));
    },
  },
};

4、在在需要渲染的页面的List.jsx文件里

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

import { Button, Table } from 'antd';

import './style.less';

class Widget extends React.Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  componentDidMount() {
    const { dispatch } = this.props;
    dispatch({
      type: 'goodsList/getList',
      payload: {},
    }).then(() => {
      console.log('数据加载完毕');
    });
  }

  getColumns = () => {
    return [{
      title: '序号',
      dataIndex: 'id',
      key: 'id',
    }, {
      title: '名字',
      dataIndex: 'name',
      key: 'name',
    }, {
      title: '价格',
      dataIndex: 'price',
      key: 'price',
    }];
  }

  render() {
    const {list} = this.props;
    return (
      <div className="p-goods-list">
        <div className={cn({ demo: true })}>演示class</div>
        <div>这里是goods模块的list页面</div>
        <Table
          columns={this.getColumns()}
          rowKey="id"
          dataSource={list}
        />
      </div>
    );
  }
}

function mapState(state) {
  const { goodsList = {} } = state;
  return {
    ...goodsList,
  };
}

export default connect(mapState)(Widget);