使用mock進行模擬數據開發

第一步：npm i mockjs -D 這里必須加-D，因為我們只是開發環境使用
第二步：在 main.js 文件中引入mock：import ‘@/mock’
第三步：創建mock文件夾，里面模擬自己需要調接口返回的假數據

// 引入隨機函數 import { Random } from 'mockjs' // 引入Mock const Mock = require('mockjs')const userListData = Mock.mock({'data|10': [{id: () => Random.id(),nickName: () => Random.cword('零一二三四五六七八九十', 3),phone: () => Random.integer(11111111111, 99999999999),tgCount: () => Random.integer(0, 200),earnings: () => Random.float(2000, 10000, 0, 2),},], })function userList(res) {return {code: 200,data: userListData.data,message: '獲取成功',total: 20,size: 10,user_count: 20,shop_count: 20,} }const shopListData = Mock.mock({'data|10': [{shop_id: () => Random.id(),shop_name: () => Random.cword('零一二三四五六七八九十', 3),address: () => Random.city(true),shop_tel: () => Random.integer(11111111111, 99999999999),open_date: () => Random.date(),earnings: () => Random.float(2000, 10000, 0, 2),},], }) function shopList(res) {return {code: 200,data: shopListData.data,message: '獲取推廣店鋪成功',total: 20,size: 10,earnings_count: 20000,shopCount: 20,} } export default {userList,shopList, }

這里切記要暴露出去才能，具體數據怎么模擬可以參考mock官方文檔。
第四步：在api文件夾中定義自己要訪問的方法，接口，請求方式，請求參數：

import http from '../../plugins/http'export const getUserList = (params) => {return http.get('/api/cuz/userList') }export const getShopListById = (id) => {return http.get(`/api/cuz/shopList/${id}`) }

第五步：在mock文件夾下創建index.js，用來攔截匹配自己在api中定義的請求，并對此返回模擬出的假數據：

// 引入mockjs import Mock from 'mockjs' // 引入模板函數類 import ratings from './modules/ratings' import cuz from './modules/cuz'// Mock函數 const { mock } = Mock// 設置延時 Mock.setup({timeout: 400, })// 使用攔截規則攔截命中的請求，mock(url, post/get, 返回的數據); mock(/\/api\/ratings\/list/, 'post', ratings.list)mock(/\/api\/cuz\/userList/, 'get', cuz.userList) mock(/\/api\/cuz\/shopList/, 'get', cuz.shopList)

第六步：將api文件中定義的各個方法導入相應組件中進行模擬發送請求，并獲取返回數據

總結

以上是生活随笔為你收集整理的前端开发中使用mock模拟数据的全部內容，希望文章能夠幫你解決所遇到的問題。

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