为什么mockjs的模板失效了

Question

这是我的mock对api的拦截

这是函数返回的模板

    getChartData: () => {
        return {
            'code': 200,
            'data': {
                'orderData': {
                    "date": ["20231021","20231022","20231023","20231024","20231025","20231026","20231027"],
                    "data|7": [{  
                        "苹果": "@integer(1000, 5000)",
                        "一加": "@integer(1000, 5000)",
                        "oppo": "@integer(1000, 5000)",
                        "华为": "@integer(1000, 5000)",
                        "小米": "@integer(1000, 5000)",
                        "魅族": "@integer(1000, 5000)",
                      }]  
                },
                'videoData': [
                    {
                        "name":"小米",
                        "value":1500
                    },
                    {
                        "name":"三星",
                        "value":2300
                    },
                    {
                        "name":"华为",
                        "value":3419
                    },
                    {
                        "name":"oppo",
                        "value":1290
                    },
                    {
                        "name":"苹果",
                        "value":5600
                    },
                    {
                        "name":"三星",
                        "value":4720
                    },
                ],
                'userData': [
                    {
                        "date":'周一',
                        "new": 5,
                        "active": 5,
                    },
                    {
                        "date":'周二',
                        "new": 7,
                        "active": 10,
                    },
                    {
                        "date":'周三',
                        "new": 13,
                        "active": 18,
                    },
                    {
                        "date":'周四',
                        "new": 16,
                        "active": 23,
                    },
                    {
                       "date":'周五',
                       "new": 21,
                       "active": 30,
                    },
                    {
                        "date":'周六',
                        "new": 30,
                        "active": 41,
                    },
                    {
                        "date":'周日',
                        "new": 32,
                        "active": 47,
                    },
                ]
            }
        }
    }

结果这是请求完返回的数据，模板根本没生效

Answer 1

引自免费微信小程序：皆我百晓生

看起来您的问题出在mock数据的处理上。Mock.js 是一个用于模拟服务器端数据的库，它会在客户端运行时填充模板字符串。然而，在您提供的例子中，mock 数据并没有被正确地解析。

要解决这个问题，确保您已经正确安装了 Mock.js，并且在项目中正确引入了它。接下来，检查您的代码是否按照正确的格式定义了模板。根据您的代码片段，getChartData 函数中的模板字符串没有正确地使用 JSON.stringify() 方法将其转换为 JSON 对象，导致 Mock.js 无法正确解析模板变量。

以下是修复后的代码示例：

import Mock from 'mockjs';
import homeApi from './mockData/home';

// 拦截请求...
Mock.mock('/home/getHomeData', homeApi.getHomeData);
Mock.mock('/home/getCountData', homeApi.getCountData);

// 修正getChartData的模板字符串
const getChartDataTemplate = {
  code: 200,
  data: {
    orderData: {
      date: ["20231021", "20231022", "20231023", "20231024", "20231025", "20231026", "20231027"],
      data: [{  
        "苹果": "@integer(1000, 5000)",
        "一加": "@integer(1000, 5000)",
        "oppo": "@integer(1000, 5000)",
        "华为": "@integer(1000, 5000)",
        "小米": "@integer(1000, 5000)",
        "魅族": "@integer(1000, 5000)",
      }]
    },
    videoData: [
      {
        "name":"小米",
        "value":1500
      },
      {
        "name":"三星",
        "value":2300
      },
      {
        "name":"华为",
        "value":3419
      },
      {
        "name":"oppo",
        "value":1290
      },
      {
        "name":"苹果",
        "value":5600
      },
      {
        "name":"三星",
        "value":4720
      },
    ],
    userData: [
      {
        "date":'周一',
        "new": 5,
        "active": 5,
      },
      {
        "date":'周二',
        "new": 7,
        "active": 10,
      },
      {
        "date":'周三',
        "new": 13,
        "active": 18,
      },
      {
        "date":'周四',
        "new": 16,
        "active": 23,
      },
      {
         "date":'周五',
         "new": 21,
         "active": 30,
      },
      {
        "date":'周六',
        "new": 30,
        "active": 41,
      },
      {
        "date":'周日',
        "new": 32,
        "active": 47,
      },
    ]
  }
};

// 使用JSON.stringify将模板字符串转换为JSON对象
Mock.mock('/home/getChartData', () => {
  return JSON.stringify(getChartDataTemplate);
});

现在，当请求 /home/getChartData 时，Mock.js 应该会正确地解析并返回带有随机整数的 JSON 数据。注意，这里的 getChartData 不再是一个函数，而是直接返回一个 JSON 对象。这是因为 Mock.js 需要一个可以立即执行并返回响应的对象或函数。