前言：
在項(xiàng)目開(kāi)發(fā)流程中聋伦，在開(kāi)發(fā)工作開(kāi)始之前夫偶，一般會(huì)有一個(gè)接口文檔產(chǎn)出的過(guò)程：也就是依據(jù)設(shè)計(jì)文檔給出響應(yīng)的接口細(xì)節(jié)，方便前端mock數(shù)據(jù)觉增；那如何更好的使用Mock來(lái)模擬數(shù)據(jù)兵拢，是一個(gè)優(yōu)秀的前端必須要掌握的技能（PS：避免成為背鍋俠）！
1.什么是聯(lián)調(diào)逾礁？
首先说铃，你要了解什么是聯(lián)調(diào)？在開(kāi)發(fā)中起什么作用嘹履？
現(xiàn)在的開(kāi)發(fā)基本都是前后端分離的腻扇，當(dāng)后端還沒(méi)有提供接口的時(shí)候，前端需要的數(shù)據(jù)從哪里來(lái)呢砾嫉，就只能自己造假數(shù)據(jù)寫(xiě)死了幼苛。當(dāng)后端接口做好后，前端所需要的數(shù)據(jù)就需要替換成后端提供的數(shù)據(jù)了焕刮。這個(gè)時(shí)候就需要進(jìn)行一個(gè)前后端的調(diào)試舶沿，我們會(huì)把這個(gè)過(guò)程叫做前后端接口聯(lián)調(diào)。
場(chǎng)景：
在一般的開(kāi)發(fā)場(chǎng)景中配并，后端負(fù)責(zé)寫(xiě)接口括荡，前端負(fù)責(zé)調(diào)用接口。然而通常情況下溉旋，前端開(kāi)發(fā)頁(yè)面時(shí)畸冲，后端還未寫(xiě)好接口，前端可以先自己”模擬“接口，等到后端寫(xiě)好接口時(shí)召夹，前端才能真正的去調(diào)用后端的接口岩喷。這時(shí)候需要驗(yàn)證調(diào)試內(nèi)容，例如:接口中URL是否正確监憎，以及前端傳的參數(shù)和后端返回的數(shù)據(jù)是否正確等，這個(gè)驗(yàn)證數(shù)據(jù)和功能有沒(méi)有誤的過(guò)程就是聯(lián)調(diào)婶溯。
作用：
前端界面的展示鲸阔，需要服務(wù)端從數(shù)據(jù)庫(kù)查找數(shù)據(jù)并通過(guò)接口返回給前端，聯(lián)調(diào)的目的是測(cè)試前后端的數(shù)據(jù)格式 / 數(shù)據(jù)流 /參數(shù)值是否正確迄委，保證接口能正常獲取和返回正確的數(shù)據(jù)褐筛，支持對(duì)應(yīng)產(chǎn)品功能的實(shí)現(xiàn)。
- 聯(lián)調(diào)是前后端一起見(jiàn)證靠譜的測(cè)試結(jié)果
- 給需求方提供一個(gè)正確的需求驗(yàn)證環(huán)境
- 盡早暴露前后端實(shí)現(xiàn)的問(wèn)題
2.什么是Mock?
通常意義的mock指的就是mock server叙身，模擬服務(wù)端返回的接口數(shù)據(jù)渔扎，用于前端開(kāi)發(fā)，第三方接口聯(lián)調(diào)信轿。
簡(jiǎn)單來(lái)說(shuō)就是使用mockjs用來(lái)模擬產(chǎn)生一些虛擬的數(shù)據(jù)晃痴，可以讓前端在后端接口還沒(méi)有開(kāi)發(fā)出來(lái)時(shí)獨(dú)立開(kāi)發(fā)。我們可以使用真實(shí)的url财忽，mockjs可以攔截ajax請(qǐng)求倘核，返回設(shè)定好的數(shù)據(jù)。
場(chǎng)景：
- 前后端開(kāi)發(fā)進(jìn)度不一致即彪，前端開(kāi)發(fā)速度快于后端紧唱，需要一個(gè)假的接口用于模擬后端返回。
- 項(xiàng)目需要用到第三方接口隶校，如果第三方接口未開(kāi)發(fā)好漏益，或者第三方接口沒(méi)有測(cè)試環(huán)境，為了保證進(jìn)度深胳，所以需要模擬接口用于調(diào)試绰疤。
4.怎么使用Mock?
官網(wǎng)地址：http://mockjs.com/
3.1 使用方式
1）在vue-cli/vite項(xiàng)目搭建后，安裝axios和mockjs
npm install -S axios
npm install -D mockjs
- 在util文件(通常情況下)配置axios和mock
- axios配置稠屠，并在main.js中引入
//http.js文件內(nèi)容
import axios from 'axios'
axios.interceptors.response.use(res=>res.data)
export default axios
- mock配置峦睡，并在main.js中執(zhí)行
//可以在mock.js文件中模擬數(shù)據(jù)
//如果引入出現(xiàn)... 執(zhí)行npm i --save-dev @types/mockjs
// 引入mockjs
import Mock from 'mockjs'
// mock方法--三個(gè)參數(shù)
// 1. 攔截請(qǐng)求地址
// 2. 請(qǐng)求方式
// 3. 返回?cái)?shù)據(jù)
// 形式：1直接返回?cái)?shù)據(jù) 2函數(shù)返回?cái)?shù)據(jù)
// 定義全局?jǐn)?shù)據(jù)
let arr =[]
// 定義函數(shù)-生成數(shù)據(jù)
// 函數(shù)返回?cái)?shù)據(jù)--方便進(jìn)行增刪改查
const createNews=()=>{
let newlist = []
for(let i =0;i<5;i++){
newlist.push({
// 生成的數(shù)據(jù)
cname:Mock.Random.cname()
})
}
return newlist
}
arr= createNews()
// 定義函數(shù)-處理新增數(shù)據(jù)
const handleAddName = (opt)=>{
// post傳遞過(guò)來(lái)的參數(shù)
// console.log(opt.body) //json字符串 需要轉(zhuǎn)成對(duì)象
let {keyWords} = JSON.parse(opt.body)
console.log(keyWords)
arr.push({cname:keyWords})
return arr
}
// 定義函數(shù)-刪除數(shù)據(jù)
const handleDeleteName =(opt)=>{
// 通過(guò)opt.url截取字符串傳遞過(guò)來(lái)的參數(shù)
// 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(請(qǐng)求的查詢參數(shù)拼接在請(qǐng)求路徑中的，需要對(duì)路徑進(jìn)行處理权埠，使用正則榨了，只要是符合校驗(yàn)的進(jìn)來(lái)進(jìn)行操作)
Mock.mock(/^\/mock\/deleteNews/,'delete',handleDeleteName)
// 直接返回?cái)?shù)據(jù)
// Mock.mock('/mock/news','put',{
// 屬性 list 的值是一個(gè)數(shù)組，其中含有 1 到 10 個(gè)元素
// "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文件內(nèi)容
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)
// 執(zhí)行mockjs文件
import './util/mock.js'
//全局提供
app.provide('$axios',axios)
app
.use(router)
.mount('#app')
- 模擬獲取到的數(shù)據(jù)如下圖(具體可根據(jù)官網(wǎng)提供的示例攘蔽，按需使用)：
- 調(diào)用接口請(qǐng)求數(shù)據(jù)龙屉，渲染數(shù)據(jù)
<template>
<h3>Mock模擬數(shù)據(jù)</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')
// 數(shù)據(jù)
const data = reactive({
list:[]
})
// 解構(gòu)list --使用toRefs變成響應(yīng)式
const {list} = toRefs(data)
// 新增的名字的value
const addNameInp = ref('')
// 新增按鈕
const addNameBtn = async()=>{
// 請(qǐng)求數(shù)據(jù)
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()=>{
// 請(qǐng)求數(shù)據(jù)
let res = await $axios.get('/mock/news')
console.log(res)
// data.list = res.list
data.list= res
})
</script>
