1. npm 安裝Mock.js

npm install mockjs

2. Main.js中引入Mock

import Mock from 'mockjs' require('./mock') createApp(App).use(Mock).mount('#app')

?3. 在src目錄下新建一個 mock目錄并創建index.js文件，用來配置mock

// 配置 mock 文件 // 首先引入Mock const Mock = require('mockjs');// 設置攔截ajax請求的相應時間 Mock.setup({timeout: '200-600' });let configArray = [];// 使用webpack的require.context()遍歷所有mock文件 const files = require.context('.', true, /\.js$/); files.keys().forEach((key) => {if (key === './index.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);} });

4. 在mock目錄下在創建一個js文件，我取名為article.js，用來配置自己在項目所需要的 模擬數據

let articleList = {code: 200,msg: 'success',data: { //數據total: 100, //模擬數據的頁數，分頁功能。 100條'rows|8': [{ //模擬每頁有多少條數據。 每頁8條。id: '@guid', //每頁數據都是有id的。 隨機生成數據. @是占位符,隨機生成后不會重復。title: '@ctitle', //前綴加 c 的意思為隨機生成中文，否則是英文author: "@cname", 'job | 1': ['Web前端','Java工程師','架構工程師','數據庫管理員'] // | 意思為在數組里隨機抽取一個}]} }; export default {'get|/article/list': articleList }

5. 如果需要少量數據數據時，可以換種寫法，比如

let articleList = [{id: 1,title: 'df',author: 'df',job: 'Web前端' },{id: 2,title: 'fd',author: 'fd',job: 'Java工程師' }]export default {'get|/article/List': option => {return {code: 200,msg: 'success',data: articleList};}

6.?也可以使用template返回

let articleList = {code: 200,msg: 'success',data: [{id: 1,title: 'zs',author: '23',job: '前端工程師'},{id: 2,name: 'ww',age: '24',job: '后端工程師'}] }; let demoList2 = [{id: 1,name: 'zs',age: '23',job: '前端工程師' },{id: 2,name: 'ww',age: '24',job: '后端工程師' }]; export default {'get|/article/List': articleList,// 也可以這樣寫// 官方解釋為：記錄用于生成響應數據的函數。當攔截到匹配 rurl 和 rtype 的 Ajax 請求時，函數 function(options) 將被執行，并把執行結果作為響應數據返回。'get|/article/List': (option) => {// 可以在這個地方對demoList2進行一系列操作，例如增刪改// option 指向本次請求的 Ajax 選項集，含有 url、type 和 body 三個屬性return {code: 200,msg: 'success',data: articleList};} }

最后當我們在頁面發起了ajax請求，路徑是'/article/list'，并且請求方式是get時，就會返回我們寫好的mock數據。

總結

以上是生活随笔為你收集整理的Vue3项目 --- Mock.js模拟数据测试的全部內容，希望文章能夠幫你解決所遇到的問題。

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