antd mobile(十二) dva中使用mockJs

朴灿烈づ我的快乐病毒、 2022-06-08 06:06 302阅读 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模拟的数据。