uniapp mock数据 如何使用

使用mockjs生成模拟数据在uniapp中非常简单，只需要按照以下步骤进行操作即可：

1. 安装mockjs

在uniapp的项目根目录下打开终端或命令行工具，执行以下命令安装mockjs：

npm install mockjs --save-dev

2. 创建mock数据文件

在项目的根目录下创建一个mock文件夹，用于存放模拟数据文件。在mock文件夹下创建一个data.js文件，用于生成数据。示例代码如下：

import Mock from 'mockjs';

const data = Mock.mock({
  'list|5': [{
    'id|+1': 1,
    'title': '@ctitle(5, 10)',
    'content': '@cparagraph(1, 3)',
    'createTime': '@datetime'
  }]
});

export default data;

在上面的代码中，我们使用了Mock.mock方法生成了一个包含5个元素的数组，每个元素包含id、title、content和createTime四个属性。其中，id的值从1开始自增，title和content使用Mock.js的占位符语法生成随机文本，createTime使用@datetime生成随机时间。

3. 引入mock数据

在需要使用模拟数据的地方，比如在请求接口时，可以引入我们刚刚创建的模拟数据文件，并将其作为接口数据返回。示例代码如下：

import data from '@/mock/data.js';

export default {
  getList() {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve(data.list);
      }, 1000);
    })
  }
}

在上面的代码中，我们创建了一个getList方法，用于模拟请求接口。在getList方法中，我们使用setTimeout模拟了一个异步请求，并在1秒钟后返回了模拟数据文件中的list数组。

4. 关闭请求拦截

在开发过程中，我们通常需要关闭请求拦截，否则mock数据将会拦截所有的请求。在uniapp中，我们可以在manifest.json文件中配置关闭请求拦截。示例代码如下：

{
  "app-plus": {
    "nvue": {
      "fileListFilter": {
        "include": [
          "**/*.nvue",
          "**/*.js"
        ],
        "exclude": [
          "node_modules/**/*.*"
        ]
      },
      "filter": {
        "serviceWorker": true,
        "uniStats": true,
        "network": {
          "xhr": false
        }
      }
    }
  }
}

在上面的代码中，我们将network.xhr设置为false，即关闭了请求拦截。这样我们就可以正常使用模拟数据进行开发和测试了。

总结：使用mockjs生成模拟数据是uniapp开发中非常实用的技巧，可以有效提高开发效率和测试效果。按照以上步骤进行操作即可轻松使用mock数据。