antd mobile(十二) dva中使用mockJs

最新推荐文章于 2024-02-27 08:42:14 发布

飞天代码

最新推荐文章于 2024-02-27 08:42:14 发布

阅读量1.3k

点赞数

分类专栏： antd 文章标签： mobile

本文链接：https://blog.csdn.net/weiyongliang_813/article/details/78009846

版权

antd 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

一开始做没有用mockJs来模拟数据查询，都是写在state里面，但后来发现还是存在偏差，所以还是把mockJs集成到系统中。
现在为界面写个模拟数据请求的mockJs文件
第一步：在mock文件下添加WorkReportMc.js，文件内容大概如下：

'use strict';

const qs = require('qs');
const mockjs = require('mockjs');  //导入mock.js的模块

const Random = mockjs.Random;  //导入mock.js的随机数

// 数据持久化   保存在global的全局变量中
let tableListData = {};

if (!global.tableListData) {
  const data = mockjs.mock({
    'data|100': [{
      'id|+1': 1,
      'workType|1': ['周','月','日'],
      'title':()=>{
        return Random.cname();
      },
      'date': () => {
        return Random.datetime('MM月dd日');
      },
      'week|1':['星期一','星期二','星期三','星期四','星期五','星期六'],
      'content': () => {
        return Random.cparagraph( 2 );
      },
    }],
    page: {
      total: 100,
      current: 1,
    },
  });
  tableListData = data;
  global.tableListData = tableListData;
} else {
  tableListData = global.tableListData;
}

module.exports = {
  //post请求  /api/users/ 是拦截的地址   方法内部接受 request response对象
  'POST /go-framework/getUserWorkReport' (req, res) {
    console.log(req);
    console.log("-------req---------------");
    console.log(res);
    console.log("-------res---------------");
    const page = qs.parse(req.query);
    const pageSize = page.pageSize || 10;
    const currentPage = page.page || 1;

    let data;
    let newPage;

    let newData = tableListData.data.concat();

    //数据开始模拟
    if (page.field) {
      const d = newData.filter((item) => {
        return item[page.filed].indexOf(page.keyword) > -1;
      });

      data = d.slice((currentPage - 1) * pageSize, currentPage * pageSize);

      newPage = {
        current: currentPage * 1,
        total: d.length,
      };
    } else {
      data = tableListData.data.slice((currentPage - 1) * pageSize, currentPage * pageSize);
      tableListData.page.current = currentPage * 1;

      newPage = {
        current: tableListData.page.current,
        total: tableListData.page.total,
      }
    }

    setTimeout(() => {
      res.json({      //将请求json格式返回
        sessionId: "9f19fbb3f03d4666972d853b940ae07d",
        code:'1',
        result:data,
        totalCount:100,
        page: '123',
      });
    }, 200);
  }
}

该文件模拟了/go-framework/getUserWorkReport的一个请求。

第二步：将mock下的文件在.roadhogrc.mock.js 中进行导入，以便于在dva进行加载的时候能够读到 mock 数据模拟的相关配置文件

//加载mock的数据 通过循环把在 mock 文件夹下的所有配置文件都拿到，并最后export出去

const mock = {}
require('fs').readdirSync(require('path').join(__dirname + '/mock')).forEach(function(file) {
    Object.assign(mock, require('./mock/' + file))
})
module.exports = mock

第三步：在/src/models/WorkReportMd.js文件下配置相应的后台请求：

  subscriptions: {
    setup({ dispatch, history }) {
      console.log(dispatch);console.log(history);
      history.listen(location => {
        //如果是进入用户查询列表信息 则需要根据关联的id 查询用户信息
        if (location.pathname.startsWith('/WorkReport')) {
          dispatch({
            type: 'getUserWorkReport',
            payload:{
              append: false,
              pageIndex:1
            }
          })
        }
      })
    },
  },
  effects: {
    *getUserWorkReport ({ payload }, { call, put }) {
      const queryParams = parse(payload);
      const record = yield call(getUserWorkReport, queryParams);
      if (record.code) {
        yield put({
          type: 'querySuccess',
          payload:{
            list:record.data
          }
        })
      }
    },
  },

第四步：在src/services/WorkReportSv下定义后台请求路径：

import { request } from '../utils'
import { GoingUtils } from '../utils/goingUtils'
 //注意请求方法的方式，如果写成Get 则会匹配不到。
export async function getUserWorkReport (params) {
  return request('/go-framework/getUserWorkReport', {
    method: 'post' 
  })
}

第五步：进入界面后，发现成功的获取到了mock模拟的数据。