一，安裝：

npm install mockjs --save-dev

目錄：

src 同級目錄下新建 mock 文件夾 下 新建 mock.js 和 tags.js 文件

二，main.js 中導入：

require('@/mock/mock.js')

三，mock.js 文件：

const Mock = require('mockjs')// 設置攔截ajax請求的相應時間 Mock.setup({timeout: "10" });// 自定義mockjs數據列表 let configArray = [];// 使用webpack的require.context()遍歷所有mock文件 const files = require.context(".", true, /\.js$/); files.keys().forEach(key => {if (key === "./mock.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);} });

四，tags.js 文件

// 導入json數據 import PlanApproval from './PlanAndAllocation/PlanApproval/infoList.json' import OwnersInfo from './PlanAndAllocation/DistributionByOwners/infoList.json' export default {"post|/deletePlanApprovalInfoByIDList": (options) => {let jsonBody = JSON.parse(options.body)let info = jsonBody.infolet result = PlanApproval.filter(val => !info.includes(val.id))return {code: 200,message: "success",data: result};},"get|/getOwnersInfoByAll": () => {return {code: 200,message: "success",data: OwnersInfo};},"post|/EditOwnersInfo": (options) => {let jsonBody = JSON.parse(options.body)let info = jsonBody.infofor(let i=0; i<OwnersInfo.length; i++){if(OwnersInfo[i]['id'] == info.id){OwnersInfo[i] = info}}return {code: 200,message: "success",data: OwnersInfo};},"post|/AddOwnersInfo": (options) => {// 添加let jsonBody = JSON.parse(options.body)let info = jsonBody.infoOwnersInfo.push(info);return {code: 200,message: "success",data: OwnersInfo};},};

五，對接口

utils 文件夾 里面的 api.js 文件

AddOwnersInfo(info){return post('/AddOwnersInfo',{info: info})},

記得 在 main.js

// 設置$http全局變量 import serve from '@/utils/api' Vue.prototype.$api = serve

五，調用接口

this.$api.AddOwnersInfo(this.InforFrom).then(res => {console.log(res)}).catch(err =>{console.log(err)}) 創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的vue项目中使用mock（二）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。