Mock（vue/jquery）

一、mock初步使用

1.1安装依赖

安装axios:npm i axios --save

安装mock:npm i mockjs --save-dev

安装json5文件，解决json文件无法注释的问题:npm i json5 --save-dev

1.2引入并初步使用mock

创建mock文件夹，创建mock.js文件

const Mock = require("mockjs")
 
// 生成单个数据
let id = Mock.mock("@id")
console.log(id)
 
// 生成多个数据
let people = Mock.mock({
    "name":"@cname",
    "age":"@inteager(1,100)"
})
console.log(people)复制

执行node mock.js运行结果

1.3配合json5使用mock

在mock文件夹内创建userInfo.json5文件

{
    "name":"@cname",
    "age":"@inteager(1,100)"
}复制

在mock文件夹内创建json5.js文件

const fs = require("fs")//读取文件
const path = require("path")//读取路径
const JSON5 = require("json5")//用于将读取到的字符串，转换成对象
 
var jsonVal = fs.readFileSync(path.join(__dirname,'./userInfo.json5'),'utf-8')
//__dirname表示当前文件路径,jsonVal就是你读取到的内容，是一个字符串
console.log(jsonVal)
var jsonObj = JSON5.parse(jsonVal)
console.log(jsonObj)
 复制

执行node json5.js运行结果

二、配合vue使用

2.1原理

通过脚手架 vue-cli创建了devServer，浏览器发送的所有请求都会被devServer监听，并把它拦截，返回mock的数据