mock 配置

mock 可以让开发者在没有后端支持的情况下真实地模拟请求。

基本使用

假设你现在要使用 mock 挡板，在项目根目录下面新建 mock 文件夹，并在该文件夹下新建名为 SS01010001.json 的请求内容文件。

·
├─mock
| └─SS01010001.json
└─src
  ├─assets
  └─pages

{
  "STATUS": "1",
  "MSG": "挡板数据请求成功",
  "LIST": [
    {
      "checked": false,
      "value": "value1",
      "BANK_NAME": "宁波银行",
      "CARD_ID": "6255 3253 2345 1234",
      "CARD_REST": 31341,
      "BUTTON_NAME": ["转账汇款", "交易明细", "账户详情"],
      "IS_MY_BANK": true,
      "OFTEN_USE": false,
      "OPEN_PLACE": "南京新街口支行",
      "ACCOUNT_STATUS": "正常",
      "ACCOUNT_TYPE": "Ⅰ类户",
      "EXECUTE_RATE": "0.300000%",
      "PRODUCT_TYPE": "个人结算存款",
      "OPEN_DATE": "2018-10-01",
      "CARD_TYPE": "借记卡"
    },
    {
      "checked": false,
      "value": "value2",
      "BANK_NAME": "宁波银行",
      "CARD_ID": "6255 6869 3451 2291",
      "CARD_REST": 1245,
      "BUTTON_NAME": ["转账汇款", "交易明细", "账户详情"],
      "IS_MY_BANK": true,
      "OFTEN_USE": false,
      "OPEN_PLACE": "合肥老报馆支行",
      "ACCOUNT_STATUS": "正常",
      "ACCOUNT_TYPE": "Ⅱ类户",
      "EXECUTE_RATE": "0.412313%",
      "PRODUCT_TYPE": "个人结算存款",
      "OPEN_DATE": "2016-03-07",
      "CARD_TYPE": "借记卡"
    }
  ]
}

在 zmip.config.js 中，mockPath 为挡板文件存放目录，开发人员可自由定义目录位置，默认为 mock。isMock 是挡板开关，当为 true 时启用挡板。此外，需要将 proxy 代理配置为当前项目的启动地址，例如 http://localhost:8080。

module.exports = {
  site: {
    commonVersion: "1.0.0",
    title: "Template",
    assetsDir: "images",
    imageLimit: 10000,
    mockPath: "mock",
    isMock: true,
    baseUrl: "/zmip",
    proxy: "http://localhost:8080",
  },
};

这样，名为 SS01010001.do 的请求将自动被挡板拦截。

this.$http
  .post("SS01010001.do", {})
  .then((result) => {
    console.log(result);
  })
  .catch((error) => {
    console.log(error);
  });