Vue中如何使用mock模拟数据
更新时间：2022年06月24日 09:36:31 作者：A-sleep
这篇文章主要介绍了Vue中如何使用mock模拟数据，具有很好的价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
Vue使用mock模拟数据
开发阶段,为了提高效率,需要提前Mock减少代码冗余,灵活插拔减少沟通,减少接口联调时间
1.编辑器安装JSON5扩展,(采用json5格式来让json格式可以存在注释)
2.新建mock文件夹 /userInfo.json5 文件 mock数据
3.在mock文件夹下,新建 index.js 引入刚刚mock的数据
const fs = require('fs');
const path = require('path');
const Mock = require('mockjs');//mockjs 导入依赖模块
const JSON5 = require('json5');
//读取json文件
function getJsonFile(filePath) {
//读取指定json文件
let json = fs.readFileSync(path.resolve(__dirname,filePath), 'utf-8');
//解析并返回
return JSON5.parse(json);
}
//返回一个函数
module.exports = function(app){
//监听http请求
app.get('/user/userinfo', function (rep, res) {
//每次响应请求时读取mock data的json文件
//getJsonFile方法定义了如何读取json文件并解析成数据对象
let json = getJsonFile('./userInfo.json5'); // mock数据
//将json传入 Mock.mock 方法中，生成的数据返回给浏览器
res.json(Mock.mock(json));
});
app.post('/...mock的url',(req,res)=>{
let json = getJsonFile('./...mock的json5数据');
})
}4.vue.config.js中添加配置
module.exports = {
devServer: {
before: require('./mock/index.js')//引入mock/index.js
}
}5..vue文件下 发送ajax请求测试数据
import axios from 'axios'
export default {
mounted() {
axios.get('/user/userinfo')
.then(res => {
console.log(res)
})
.catch(err => {
console.error(err);
})
}
} 5.扩充：移除MOCK
.env.development 文件中
MOCK=false
完善mock\index.js
module.exports = function(app){
if(process.env.MOCK == 'true'){
//监听http请求
app.get('/user/userinfo', function (rep, res) {
//每次响应请求时读取mock data的json文件
//getJsonFile方法定义了如何读取json文件并解析成数据对象
let json = getJsonFile('./userInfo.json5');
//将json传入 Mock.mock 方法中，生成的数据返回给浏览器
res.json(Mock.mock(json));
});
}
} Vue使用mock数据的几种方式
以下讲解基于vuecli3.0创建的项目
首先我们来说一说vue/cli 3.0 与 2.0 的一些不同：
- 3.0 移除了 static 文件目录，新增了 public 目录，这个目录下的静态资源不会经过 webpack 的处理，会被直接拷贝，所以我们能够直接访问到该目录下的资源，静态数据（如json数据、图片等）需要存放在这里。
- 3.0 移除了 config、build 等配置目录，如果需要进行相关配置我们需要在根目录下创建 vue.config.js 进行配置即可。
方式一：借助mockjs插件实现本地mock数据
1.安装插件：npm i mockjs -D；
2.在src目录下创建一个mock文件夹，在mock文件夹下创建一个index.js和一个json文件夹（用于存放项目需要的模拟数据），如下图所示：
3.mock目录下的index.js示例如下：
const Mock = require('mockjs');
//格式： Mock.mock( url, post/get , 返回的数据)；
Mock.mock('/index/foodlist', 'get', require('./json/foodlist.json'));
Mock.mock('/index/foodlist2', 'post', require('./json/foodlist2.json'));4.json文件夹下的json数据示例如下：
{
"code": 200,
"list": [
{
"imgSrc": "https://timgsa.baidu.com/timg?C2880.jpg%3Fmode%3Ddownload",
"name": "老弄堂1",
"term": "起送￥15 免配送费"
},
{
"imgSrc": "https://timgsa.baidu.com/timg?2C2880.jpg%3Fmode%3Ddownload",
"name": "老弄堂2",
"term": "起送￥15 免配送费"
}
]
}5.在main.js入口文件中引入mock数据，不需要时，则注释掉。
import Vue from 'vue';
import App from './App';
import router from './router';
require('./mock'); //引入mock数据，关闭则注释该行
Vue.config.productionTip = false;
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
});6.最后，在vue模板中使用即可
axios.get('/user/userInfo')
.then(function(res){
console.log(res);
})
.catch(function(err){
console.log(err);
});方式二：在public文件夹放mock数据（无需使用mockjs插件）
1.在public文件夹下创建一个mock文件夹，在mock文件夹里创建项目需要的json文件，目录结构如下：
2.在vue.config.js里进行路径配置，如下：
3.最后，在vue模板中使用即可
// 模拟请求本地mock数据（不基于插件）
this.$http.get('/api/foods.json').then(function(res){
let list = res.data.list;
console.log(list);
that.businessList = res.data.list;
})注：但是本方式貌似只能使用get请求方式，不支持post等其它方式，具体还需再研究下。
方式三：前端本地启动一个nodejs服务
vue项目向nodejs服务请求mock数据
1.创建一个node项目（为了方便，本例直接在vue项目根目录创建，当然也可以是其它任何地方）
2.serve.js示例如下：
const http = require('http');
// url模块用于处理与解析 前端传给后台的URL，适用于get请求（不适用于post请求），详情参见文档
const urlLib = require('url');
http.createServer(function(req, res){
let urlObj = urlLib.parse(req.url, true); // 注意：这里的第二个参数一定要设置为：true, query才能解析为对象形式,可以更加方便地获取key:value
let url = urlObj.pathname;
let get = urlObj.query;
console.log(url);
// 模拟的mock数据
let data = {
"code": 200,
"list": [
{
"imgSrc": "https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1126716551,3134048915&fm=26&gp=0.jpg",
"name": "老弄堂1",
"term": "起送￥15 免配送费"
},
{
"imgSrc": "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1582134004436&di=eee2d024a136e950daa694f56ea78a2d&imgtype=0&src=http%3A%2F%2Fbpic.588ku.com%2Felement_origin_min_pic%2F16%2F12%2F05%2F56db465e153a5d808b54501846e88dca.jpg",
"name": "老弄堂2",
"term": "起送￥15 免配送费"
}
]
}
// console.log(get.user);
if(url === "/food") { // 美食列表接口
res.write(JSON.stringify(data));
}
res.end();
}).listen(9000); 启动node服务：node serve
3.配置vue.config.js的proxy，解决跨域
注意：这里配置的端口号不要和node的端口一样，否则会报端口号被占用
3.最后，在vue模板中使用即可
// 模拟请求本地node服务
this.$http.get('/api/food').then(function(res){
let list = res.data.list;
console.log(list);
that.businessList = res.data.list;
})总结：以上介绍了三种使用mock数据的方式，方便前端开发在本地开发环境下开发项目，使前后端分离，加快了开发效率，个人建议使用方式一（使用方便、灵活）。
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
深入解析Vue中的this.$forceUpdate()的使用
this.$forceUpdate() 是一个重要的实例方法,本文主要介绍了深入解析Vue中的this.$forceUpdate()的使用,具有一定的参考价值,感兴趣的可以了解一下2024-07-07
这篇文章主要介绍了Vue3使用dayjs以及dayjs日期工具类,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
有的时候数据量比较大,比如几千甚至上万条的时候,如果直接赋值,整个页面的 dom 会被撑爆,本文主要介绍了vue实现el-select 触底分页+远程搜索的示例,具有一定的参考价值,感兴趣的可以了解一下2023-12-12
这篇文章主要介绍了vueRouter常用属性,本文通过实例代码给大家介绍的非常详细，需要的朋友可以参考下2023-12-12
这篇文章主要为大家分享了一款MVVM组件，详细介绍了Vue基础语法和常用指令,具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-11-11
路由懒加载是一种优化技术，用于延迟加载应用程序中的路由组件，它可以提高初始加载速度并减少资源消耗，特别适用于大型单页应用，下面我们就来看看它的原理与使用吧2023-08-08
我们最开始拿到的element-ui是带有下拉箭头的,那么如何去除element-ui下拉框的下拉箭头的实现,本文就详细的介绍一下,感兴趣的可以了解一下2023-08-08
这篇文章主要为大家详细介绍了vue+echarts封装气泡图的方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-08-08
这篇文章主要介绍了Vue中全局常用的过滤方法解读，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-01-01
目前前端最流行的网络请求库还是axios,所以对axios的封装很有必要,下面这篇文章主要给大家介绍了关于Vue3中axios请求封装、请求拦截与相应拦截的相关资料,需要的朋友可以参考下2023-05-05
最新评论