vue中使用mock数据

Mock.js 是一个模拟数据生成器，利用它，可以拦截ajax请求，直接模拟返回数据，这样前后端只要约定好数据格式，前端就不需要依赖后端的接口，可以直接使用模拟的数据了。
网上介绍mock的教程也较多，不过大多数看的比较模糊。其实使用起来非常简单，这里介绍在Vue工程中使用Mockjs，并且实现开发和生产配置化。

1.安装

npm install  mockjs

2.封装mock数据

根目录新建一个mock文件夹在该文件夹下新建index.js

// 在这里可以做一些通用的配置
const Mock = require("mockjs");
// 设置所有ajax请求的超时时间，模拟网络传输耗时
Mock.setup({
  timeout: 0 - 300,
});
// 获取页面用户分页信息
Mock.mock("/ocr/order/web/page", "post", {
  code: 0,
  message: "请求成功",
  "data|1-15": [
    {
      "orderId|+1": 1, //	订单ID	是	[string]
      serialNumber: '@string("lower", 5)', //	流水号	是	[string]
      guaranteeNo: "bj00100100", //担保编号	是	[string]
      productName: "new一个产品", //产品名称	是	[string]
      principalName: "赵xx", //	负责人名字	是	[string]
      submitDate: "1654600000", //	提交时间	是	[string]
      confirmName: "王xx", //	确认人名字	是	[string]
      confirmDate: "18652222200000", //	确认时间	是	[string]
      stateCN: "草稿中", //	状态反显	是	[string]
      userEsModels: [{}], //客户信息集合	是	[array]
      userName: "赵五", //客户姓名	是	[string]
      number: "142728198010181569", //证件号	是	[string]
      userTypeCN: "身份证", //交易身份类型反显	是	[string]
      financeTypeCN: "123测试哦", //
    }
  ],
});

3.引入

// main.js中引入mock
import '@/mock' //上线前需要将此处代码注释

4.正式接口

// 首页
// api的拦截，根据自己项目需求写自己需要的东西。
import { apiRequest } from "./httpRequest";
let qs = require("qs");

const getOrgList = (params) => {
  return apiRequest("/ocr/order/web/page", "POST", params).then((res) => res);
};

export default {
  getOrgList,
};

5.组件使用

<template>
  <div @click="testMock">testMock</div>
</template>

<script>
import api from "@/api/api";
export default {
  data() {
    return {};
  },
  methods: {
    testMock() {
      let params = {
        id: 1,
      };
      console.log(123)
      api.getOrgList(params).then((res) => {
        console.log(res);
      });
    },
  },
  mounted() {},
};
</script>

<style lang="scss" scoped></style>

上面是我整理给大家的，希望今后会对大家有帮助。