vue 中简单使用mock的示例代码详解
更新时间：2022年02月21日 14:50:37 作者：逆风优雅
这篇文章主要介绍了vue 中简单使用mock的方法，本文通过图文实例代码相结合给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
一、首先，在vue项目中，安装依赖
# 使用axios发送ajax cnpm install axios --save # 使用mockjs产生随机数据 cnpm install mockjs --save-dev # 使用json5解决json文件,无法添加注释问题 cnpm install json5 --save-dev
二、在根目录下，新建一个mock文件
三、在vue.config.js文件中使用mock数据
四、配置mock中的index.js数据
const fs = require("fs");
const path = require("path");
const Mock = require("mockjs"); //mockjs 导入依赖模块
const JSON5 = require("json5"); //json5的作用是可以解析json文件中的注释
//读取json文件
function getJsonFile(filePath) {
//读取指定json文件
var json = fs.readFileSync(path.resolve(__dirname, filePath), "utf-8");
//解析并返回
return JSON5.parse(json);
}
//返回一个函数
module.exports = function (app) {
if (process.env.MOCK == "true") {
//为了满足当后台有接口的时候，不是使用mock数据，在此处做一个判断，可以在.env文件中对设置
//监听http请求
app.get("/user/userinfo", function (rep, res) {
//每次响应请求时读取mock data的json文件
//getJsonFile方法定义了如何读取json文件并解析成数据对象
var json = getJsonFile("./userInfo.json5");
//将json传入 Mock.mock 方法中，生成的数据返回给浏览器
res.json(Mock.mock(json));
});
}
};五、定义mock的数据
六、在任意一个页面检查自己配置的mock
打印的结果是：
七、当项目中接口给到我么们时，我们移除mock的方法
在env文件中，进行配置。因为在mock.js文件中，我们已经设置了监听，并进行了判断，所以此处MOCK如果为false,就不会执行mock中的内容。
到此这篇关于vue 中简单使用mock的文章就介绍到这了,更多相关vue 使用mock内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
以简单的树形组件为案例,实现在组件中递归组件,下面这篇文章主要给大家介绍了关于Vue实现递归组件的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-09-09
Element ui table表格内容超出隐藏显示省略号问题
这篇文章主要介绍了Element ui table表格内容超出隐藏显示省略号问题,具有很好的参考价值,希望对大家有所帮助,2023-11-11
在Vite项目中配置路由时,可能会遇到文件路径错误导致的加载失败问题,常见的解决办法包括安装路径处理插件、正确设置vite.config.js中的路径别名以及重启项目,通过正确配置,可以确保路由正确加载对应的界面文件,避免路径错误导致的问题2024-10-10
vue3使用element-plus中el-table组件报错关键字'emitsOptions'与&
这篇文章主要给大家介绍了关于vue3使用element-plus中el-table组件报错关键字'emitsOptions'与'insertBefore'的相关资料,文中将解决方法介绍的非常详细,需要的朋友可以参考下2022-10-10
这篇文章主要为大家详细介绍了vue3中标签form插件的使用的相关知识,文中的示例代码讲解详细,具有一定的借鉴价值,感兴趣的小伙伴可以了解下2024-01-01
这篇文章主要为大家介绍了defineProperty和Proxy基础功能及性能对比，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-08-08
这篇文章主要介绍了正确快速使用Vue中的插槽和配置代理的相关知识,插槽分为三种，分别是默认插槽、具名插槽、作用域插槽，下面分别列出了如何使用这三种插槽，需要的朋友可以参考下2023-01-01
vue-vuex中使用commit提交mutation来修改state的方法详解
今天小编就为大家分享一篇vue-vuex中使用commit提交mutation来修改state的方法详解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
element-ui官网上有分页实现的功能,简单方便又好用,也有很多分页的样式,你可以根据需要去选择自己想要的样式,下面这篇文章主要给大家介绍了关于Vue使用Element-UI实现分页效果的相关资料,需要的朋友可以参考下2023-04-04
Vue3中Composition API和Options API的区别
Vue3的Composition API和Options API是Vue.js框架中的两种不同的API，本文主要介绍了Vue3中Composition API和Options API的区别，文中通过示例代码介绍的非常详细，需要的朋友们下面随着小编来一起学习学习吧2023-06-06
最新评论