如何在Vue项目中使用Mock模拟数据？

如何在Vue项目中使用Mock模拟数据？

前言：

​ 在项目开发流程中，在开发工作开始之前，一般会有一个接口文档产出的过程：也就是依据设计文档给出响应的接口细节，方便前端mock数据；那如何更好的使用Mock来模拟数据，是一个优秀的前端必须要掌握的技能（PS：避免成为背锅侠）！

1.什么是联调？

首先，你要了解什么是联调？在开发中起什么作用？

​ 现在的开发基本都是前后端分离的，当后端还没有提供接口的时候，前端需要的数据从哪里来呢，就只能自己造假数据写死了。当后端接口做好后，前端所需要的数据就需要替换成后端提供的数据了。这个时候就需要进行一个前后端的调试，我们会把这个过程叫做前后端接口联调。

场景：

​ 在一般的开发场景中，后端负责写接口，前端负责调用接口。然而通常情况下，前端开发页面时，后端还未写好接口，前端可以先自己”模拟“接口，等到后端写好接口时，前端才能真正的去调用后端的接口。这时候需要验证调试内容，例如:接口中URL是否正确，以及前端传的参数和后端返回的数据是否正确等，这个验证数据和功能有没有误的过程就是联调。

作用：

​ 前端界面的展示，需要服务端从数据库查找数据并通过接口返回给前端，联调的目的是测试前后端的数据格式 / 数据流 /参数值是否正确，保证接口能正常获取和返回正确的数据，支持对应产品功能的实现。

• 联调是前后端一起见证靠谱的测试结果
• 给需求方提供一个正确的需求验证环境
• 尽早暴露前后端实现的问题

2.什么是Mock?

通常意义的mock指的就是mock server，模拟服务端返回的接口数据，用于前端开发，第三方接口联调。

简单来说就是使用mockjs用来模拟产生一些虚拟的数据，可以让前端在后端接口还没有开发出来时独立开发。我们可以使用真实的url，mockjs可以拦截ajax请求，返回设定好的数据。

场景：

• 前后端开发进度不一致，前端开发速度快于后端，需要一个假的接口用于模拟后端返回。
• 项目需要用到第三方接口，如果第三方接口未开发好，或者第三方接口没有测试环境，为了保证进度，所以需要模拟接口用于调试。

4.怎么使用Mock?

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

3.1 使用方式

1）在vue-cli/vite项目搭建后，安装axios和mockjs

npm install -S axios
npm install -D mockjs

2. 在util文件(通常情况下)配置axios和mock

• axios配置，并在main.js中引入

//http.js文件内容
import axios from 'axios'axios.interceptors.response.use(res=>res.data)export default axios

• mock配置，并在main.js中执行

//可以在mock.js文件中模拟数据
//如果引入出现... 执行npm i --save-dev @types/mockjs // 引入mockjs
import Mock from 'mockjs'// mock方法--三个参数// 1. 拦截请求地址// 2. 请求方式// 3. 返回数据// 形式：1直接返回数据  2函数返回数据// 定义全局数据
let arr =[]// 定义函数-生成数据
// 函数返回数据--方便进行增删改查
const createNews=()=>{let newlist = []for(let i =0;i<5;i++){newlist.push({// 生成的数据cname:Mock.Random.cname()})}return newlist
}arr= createNews()// 定义函数-处理新增数据
const handleAddName = (opt)=>{// post传递过来的参数// console.log(opt.body) //json字符串 需要转成对象let {keyWords} = JSON.parse(opt.body)console.log(keyWords)arr.push({cname:keyWords})return arr
}// 定义函数-删除数据
const handleDeleteName =(opt)=>{// 通过opt.url截取字符串传递过来的参数// console.log(opt.url)let index = opt.url.split('=')[1]// console.log(index)arr.splice(index,1)// console.log(arr)return arr
}// 查询接口--get
Mock.mock('/mock/news','get',arr)
// 新增接口--post
Mock.mock('/mock/addNews','post',handleAddName)
// 删除接口--delete(请求的查询参数拼接在请求路径中的，需要对路径进行处理，使用正则，只要是符合校验的进来进行操作)
Mock.mock(/^\/mock\/deleteNews/,'delete',handleDeleteName)// 直接返回数据
// Mock.mock('/mock/news','put',{
// 属性 list 的值是一个数组，其中含有 1 到 10 个元素
//   "list|10":[
//     {
//       "fname":"@cfirst()",
//       "lname":"@clast()",
//       "avatar":"@image('100x100','pink','#fff','png','Hello')",
//       "info":"@cparagraph()",
//       "age":"@integer(0,100)",
//       "address":"@county(true)",
//       "yzm":"@string('number',6)"
//     }
//   ]
// })

• main.js文件

//main.js文件内容
import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import router from './router/index.js'
//引入axios
import axios from './util/http.js'
const app = createApp(App)// 执行mockjs文件
import './util/mock.js'//全局提供
app.provide('$axios',axios)app
.use(router)
.mount('#app')

• 模拟获取到的数据如下图(具体可根据官网提供的示例，按需使用)：

3） 调用接口请求数据，渲染数据

<template><h3>Mock模拟数据</h3><ul><li v-for="item,index in list" :key="item"><h4>{{item.fname}}</h4><h4>{{item.cname}}</h4><input type="button" value="删除Name" @click="deleteName(index)"></li><input type="text" v-model="addNameInp"><input type="button" value="新增Name" @click="addNameBtn"></ul>
</template><script setup>
// 引入
import {ref,reactive,toRefs,inject,onMounted} from 'vue'
// 使用axios
const $axios = inject('$axios')
// 数据
const data = reactive({list:[]
})
// 解构list --使用toRefs变成响应式
const {list} = toRefs(data)
// 新增的名字的value
const addNameInp = ref('')
// 新增按钮
const addNameBtn = async()=>{// 请求数据let res = await $axios.post('/mock/addNews',{keyWords:addNameInp.value})// 清空输入框addNameInp.value=''data.list = res
}
// 删除按钮
const deleteName =async(index)=>{let res = await $axios.delete('/mock/deleteNews',{params:{index:index}})data.list=res
}onMounted(async()=>{// 请求数据let res = await  $axios.get('/mock/news')console.log(res)// data.list  = res.listdata.list= res
})
</script>

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！