一、mock.js

对于前后端分离的项目，前端不得不等待后端接口写好后再请求数据。或者自己需要手写一些’死’数据来模拟，这是比较浪费时间的，也是十分无聊的。引入mock.js，这样就可以在后端没有提供接口的时候，自己模拟一个mock接口去请求，并且mock.js甚至可以返回你希望得到的随机数据！

官方网站地址：http://mockjs.com

二、vue项目使用mock.js

下面我们尝试在vue中引入mock和axios来模拟前后端数据交互！

安装mock.js

npm install mockjs

安装axios.js

npm install axios

新建mock文件夹，并新建index.js和userList.js。

这个文件夹包含了mock的初始化（idnex.js）以及需要模拟的数据（userList.js）

mock/index.js

// 首先引入Mock
const Mock = require('mockjs');// 设置拦截ajax请求的相应时间
Mock.setup({timeout: '200-600'
});let configArray = [];// 使用webpack的require.context()遍历所有mock文件
const files = require.context('.', true, /\.js$/);
files.keys().forEach((key) => {if (key === './index.js') return;configArray = configArray.concat(files(key).default);
});// 注册所有的mock服务
configArray.forEach((item) => {for (let [path, target] of Object.entries(item)) {let protocol = path.split('|');Mock.mock(new RegExp('^' + protocol[1]), protocol[0], target);}
});

mock/userList.js

let userList = {code: 200,message: 'success',data: {total: 100,'rows|10': [{id: '@guid',name: '@cname','age|20-30': 23,'job|1': ['前端工程师', '后端工程师', 'UI工程师', '需求工程师']}]}
};
export default {'get|/getUserList': userList
}

在main.js中运行mock

require('./mock/index');//运行mock

利用axios请求mock接口(mock.vue)

<template><div><button @click="getData">BUTTON</button><div><ol><li v-for="item in userList" v-key="item.id"><p>姓名：{{ item.name }}</p><p>年龄：{{ item.age }}</p><p>职位：{{ item.job }}</p></li></ol></div></div>
</template><script>
import axios from 'axios'
export default {data() {return {userList: []}},methods: {getData() {axios.get('/getUserList').then((res) => {console.log(res)this.userList = res.data.data.rows;})}}
}
</script>

运行vue项目，打开控制台

页面显示结果

可以看到，我们成功模拟一次请求，并且得到了我们想要的数据了！

三、mock.js文档

前面的示例中使用到了占位符（@）、随机id（guid）、随机中文名称（cname）等可以模拟产生的随机数据，在文档中都是有详细介绍的！

【Vue】使用mock模拟数据相关推荐

vue使用mock模拟数据
文件目录 mock文件夹下的index.js import Mock from 'mockjs';//webpack默认对外暴露图片.JSON数据格式 import banner from './ba ...
VUE开发环境下mock模拟数据与后端接口对接示例
在以往的前端开发中,前端严重依赖后端,必须等待后端接口开发出来才能继续开发.使用mock,可以使得前后端开发异步进行,互不影响.Mock.js 是一个模拟数据生成器,使用它可以拦截ajax请求,直接模 ...
vue项目使用mock模拟数据并实现列表的增、删、分页、批量操作功能
文章目录什么是mock vue项目引入mock mock模拟数据生成列表并模拟实现已发起表单页面表格分页功能 mock实现数据的新增 mock实现数据列表的删除列表数据批量处理(如审核通过) 总结 ...
vue实战-mockjs模拟数据
vue实战-mockjs模拟数据 1.在src目录下创建文件夹mock 2.将模拟的json格式的数据写入到文件夹中 banner.json [{"id": "1&quo ...
在vue中使用Mock模拟数据
Q:为什么进行模拟数据? A:在做开发时,后端程序没有配齐,前端人员在做vue开发时,需要自己先模拟接口,模拟数据,等到后端数据配齐,提供好接口后,将项目中的接口换一下即可一.本地加载请求静态jso ...
vite+vue3中使用mock模拟数据
1.安装mockjs和vite-plugin-mock npm i mockjs vite-plugin-mock --save-dev 2.在vite.config.ts文件中配置vite-plug ...
前端开发中使用mock模拟数据
使用mock进行模拟数据开发第一步:npm i mockjs -D 这里必须加-D,因为我们只是开发环境使用第二步:在 main.js 文件中引入mock:import '@/mock' 第三步: ...
Spring Boot（九）Swagger2自动生成接口文档和Mock模拟数据
一.简介在当下这个前后端分离的技术趋势下,前端工程师过度依赖后端工程师的接口和数据,给开发带来了两大问题: 问题一.后端接口查看难:要怎么调用?参数怎么传递?有几个参数?参数都代表什么含义? 问题二 ...
idea swagger生成接口文档_Spring Boot（九）Swagger2自动生成接口文档和Mock模拟数据...
一.简介在当下这个前后端分离的技术趋势下,前端工程师过度依赖后端工程师的接口和数据,给开发带来了两大问题: 问题一.后端接口查看难:要怎么调用?参数怎么传递?有几个参数?参数都代表什么含义? 问题二 ...
使用mock模拟数据，实现图片文字向上的轮播
向上轮播,效果图: 使用mock模拟的数据,使用jq的ajax获取数据,字符串拼接,但是某些方面又写成了原生的js,图片来自百度图片,侵权请留言删除,欢迎大神提出意见或批评. CSS代码: <s ...

【Vue】使用mock模拟数据

目录

一、mock.js

二、vue项目使用mock.js

三、mock.js文档

【Vue】使用mock模拟数据相关推荐

最新文章

热门文章