前言

mock是什么？

Mock简单来理解，就是在测试过程中，对于某些不容易构造或者不容易获取的对象，用一个虚拟的对象来创建以便测试。而这个虚拟的对象就是mock对象。mock对象就是真实对象在调试期间的代替品。

一、准备工作

首先需要准备一个vue的项目

先打开需要创建项目的文件夹下方输入cmd打开窗口
在窗口输入vue create 项目的名称
选择使用vue2.x版本
等待创建，完成后进入文件夹内部在控制台输入npm run serve

二、使用步骤

1.引入包

在终端输入

npm i mockjs@1.1.0 --save

2.创建文件

在src下创建文件夹mock，在该文件夹下创建mockServe.js，在同级目录创建两个自己的json:

├── mock├──mockServe.js└── demo01.json└── demo02.json

3.编写mockServe.js和数据

实例代码如下：

// 该文件用于模拟虚拟资源
// 引入mockjs
import Mock from 'mockjs'
// 引入JSON文件,不需要对外暴露
import demo01 from './demo01.json'
import demo02 from './demo02.json'// mock数据 第一个个参数是请求的地址，第二个参数是你请求数据
Mock.mock('/mock/demo01', {code: 200,data: demo01
})
Mock.mock('/mock/demo02', {code: 200,data: demo02
})

demo01.json参考数据：

[{"id": "1","imgUrl": "/images/101.jpg"},{"id": "2","imgUrl": "/images/102.jpg"},{"id": "3","imgUrl": "/images/103.jpg"},{"id": "4","imgUrl": "https://tse1-mm.cn.bing.net/th/id/OIP-C.5ALcarpnOz8YbT1uBA6c3QHaLG?w=182&h=273&c=7&r=0&o=5&dpr=1.25&pid=1.7"},{"id": "5","imgUrl": "https://tse1-mm.cn.bing.net/th/id/OIP-C.CGH_mffKOftvP4g_9KxEIQHaLH?w=182&h=273&c=7&r=0&o=5&dpr=1.25&pid=1.7"},{"id": "6","imgUrl": "https://tse4-mm.cn.bing.net/th/id/OIP-C.ZJxGeT0cpQybqU-41gm1nQAAAA?w=182&h=273&c=7&r=0&o=5&dpr=1.25&pid=1.7"}
]

需要在public文件夹下创建一个images的文件夹，里面保存我们所需的图片，也可以采用图像的地址

4.入口引入

我们需要在入口文件引入，让mock的数据执行一次

// 引入mock数据
import './mock/mockServe.js'

5.发送请求

发送请求我们需要使用axios，所以我们先下载所需的包

npm i axios@0.26.1

在src新建一个api文件夹，在该文件夹下创建mock.js来进行封装

import axios from 'axios'const service = axios.create({baseURL: '/mock',timeout: 5000,withCredentials: false // 表示跨域请求时是否需要使用凭证
})// 请求拦截器
service.interceptors.request.use(config => config,(error) => {console.log(error)return Promise.reject(error)}
)// 响应拦截器
service.interceptors.response.use(response => response.data,(error) => {console.log('err' + error)return Promise.reject(error)}
)export default service

接下来可以利用封装好的axios编写请求，在api文件夹下创建mockServe.js文件，书写内容

// mock的数据
import request from './mock.js'// 获取图片列表
export function reqImgList() {return request({url: '/demo01',method: 'get'})
}

6.项目使用

简单在App.vue文件使用一下

<template><div id="app"><img class="images" :src="i.imgUrl" v-for="(i, index) in img" :key="index" /></div>
</template><script>
import { reqImgList } from './api/mockServe.js'
export default {name: 'App',data() {return {img: []}},methods: {async reqImgList() {const res = await reqImgList()if (res.code == 200) {this.img = res.dataconsole.log(res.data)}}},mounted() {this.reqImgList()}
}
</script><style>
#app {font-family: Avenir, Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;color: #2c3e50;margin-top: 60px;
}
.images{width: 400px;
}
</style>

总结

以上就是今天要讲的内容，本文仅仅简单介绍了mock的使用，针对自己书写的数据，如果采用mock自带的生成数

据参考：https://blog.csdn.net/The_more_more/article/details/124202585

mock数据（自己写的数据）相关推荐

数据沙箱在大数据生产、测试物理集群隔离场景中最佳实践
大数据平台不仅需要稳定地运行生产任务,还需要提供数据开发的能力.因此,不少大数据平台都会为每个任务区分开发模式与线上模式,可以通过提交上线的方式,将开发模式任务提交到线上,让其用于线上数据生产工作. ...
客户端Mock服务端的JSON数据
http://hlyu.cn/?p=392 http://hlyu.cn/?p=392 http://hlyu.cn/?p=392 客户端Mock服务端的JSON数据场景1:服务端和客户端已经制定了 ...
不忘初心，砥砺前行——写在数据院成立四周年之际
[编者按] 在一个寒冬的下午,我来到位于清华紫荆门附近的双清大厦,数据科学研究院就坐落在此.那是我加入数据院的第一天,印象尤为深刻.深刻的并非是某件事情,而是一个令我有些措手不及的小任务:在数据院成立 ...
php怎么查询今天的数据,php 查询当天的某一时刻范围内的数据怎么写？
php连接mysql数据库要查询每天的某一时刻(或某几个时刻)范围内的数据,例如要查询当天17:25-17:35之间是否在数据库中接收到数据,应该怎么写? 回复讨论(解决方案) select ... ...
一文读懂大数据平台——写给大数据开发初学者的话!
一文读懂大数据平台--写给大数据开发初学者的话! 文|miao君导读: 第一章:初识Hadoop 第二章:更高效的WordCount 第三章:把别处的数据搞到Hadoop上第四章:把Hado ...
json 插入数据_Power BI数据回写SQL Server（2）——存储过程一步到位
在上一讲: Power BI数据回写SQL Server(1)没有中间商赚差价中, 我们讲过,利用循环的方式将PQ中得到的table表逐行导入SQL Server中,有的朋友怀疑这种方式会不会造成数 ...
如何使用mock应对测试所需随机数据
摘要:在做接口测试的时候,有的接口需要进行大量的数据进行测试,还不能是重复的数据,这个时候就需要随机生产数据进行测试了.这里教导大家使用mock.js生成各种随机数据. 一.什么是mock.js mo ...
sql 左侧要固定最近一周的周四怎么写_数据与IT人怎么提高公司地位，避免被业务当工具人？...
最近在知乎上看到一则帖子,是关于"职场工具人"的讨论,网友对工具人的定义如下: 再一看评论区,果然是一片哀嚎: 干开发的吐槽自己的就是一个代码输出机器,天天接需求.改bug 运维觉 ...
诸葛：分析师是如何写好数据研究报告的？
诸葛觉得,在企业面对海量数据的同时.不止只需要看单纯数据,写好一份好的研究报也是有其重要的.下面就由诸葛来给大家解密行业分析师是如何写好研究报告的. 写研究报告,是分析师的本职工作,投资者与分析师接触 ...

mock数据（自己写的数据）

文章目录

前言