mockjs 学习笔记

文章目录

• 问题描述
• 文章参考
• 快速开始
• 安装Mockjs
• 使用案例
• Mock.mock( rurl, rtype, template ) 函数介绍
• 根据配置文件，异步加载mockjs 配置文件

问题描述

在工作中，想自己根据后台模拟的数据，保存到本地，在网络不通的情况下，同样的写ajax请求逻辑代码，不需要模拟ajax请求，获取本地的模拟的数据，能够正常测试和开发，如果有开发环境，可以一键切换到开发环境中，而不需要切换代码

文章参考

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’。

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

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

根据配置文件，异步加载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')

来源：CSDN

作者：胖鹅68

链接：https://blog.csdn.net/hbiao68/article/details/104022147