首页 前端知识 Mock(vue/jquery)

Mock(vue/jquery)

2024-03-11 10:03:06 前端知识 前端哥 530 342 我要收藏

一、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的数据

转载请注明出处或者链接地址:https://www.qianduange.cn//article/3632.html
标签
评论
会员中心 联系我 留言建议 回顶部
复制成功!