mockjs 学习笔记

问题描述

在工做中，想本身根据后台模拟的数据，保存到本地，在网络不通的状况下，一样的写ajax请求逻辑代码，不须要模拟ajax请求，获取本地的模拟的数据，可以正常测试和开发，若是有开发环境，能够一键切换到开发环境中，而不须要切换代码html

文章参考

1. Mock.mock() 函数
2. mockjs Doc

快速开始

安装Mockjs

npm install mockjs -D

使用案例

import Mock from "mockjs";

//拦截请求，返回假数据
Mock.mock("http://10.91.7.159:9080/taxloan/productStat?customerId=sdf", {
  message: "调用成功",
  data: [
    { name: "XXXX1", code: "P00003" },
    { name: "XXXX2", code: "P00028" },
    { name: "XXXX3", code: "P00002" },
    { name: "XXXX4", code: "P00003" }
  ],
  rtn: "0"
});

1. 定义的URL 请求，直接放到浏览器中运行，其实是没有响应的，估计是在发送ajax请求的时候，mockjs作了一个拦截处理，将响应的数据变为模拟的数据了
2. 例子中，能够使用GET 或者 POST 请求

Mock.mock( rurl, rtype, template ) 函数介绍

1. rurl 可选。
   表示须要拦截的 URL，能够是 URL 字符串或 URL 正则。例如 //domain/list.json/、’/domian/list.json’。vue

2. rtype 可选。
   表示须要拦截的 Ajax 请求类型。例如 GET、POST、PUT、DELETE 等。git

3. template 可选。
   表示数据模板，能够是对象或字符串。例如 { ‘data|1-10’:[{}] }、’@EMAIL’。github

根据配置文件，异步加载mockjs 配置文件

import Vue from 'vue'
import App from './App.vue'

// 根据Vue的环境变量模式中获取配置信息，异步加载配置文件
if (process.env.VUE_APP_ISMOCK === "true") {
  import('../mock/mock-data.js').then(_ => {
    console.log("引入mock数据成功")
   })
}

new Vue({
  render: h => h(App),
}).$mount('#app')