dva-roadhog模擬數據、渲染數據

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);