文章目录
- 前言
- 一、准备工作
- 二、使用步骤
- 1.引入包
- 2.创建文件
- 3.编写mockServe.js和数据
- 4.入口引入
- 5.发送请求
- 6.项目使用
- 总结
前言
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.data
console.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自带的生成数