Vue3中使用mock.js模擬數(shù)據(jù)的示例詳解

更新時間：2025年03月12日 09:44:58 作者：沖！！

前后端同時開發(fā)的時候,后端接口數(shù)據(jù)沒有出來,前端可以使用mock模擬假數(shù)據(jù),所以下面小編就來為大家詳細介紹一下如何在Vue3中使用mock.js模擬數(shù)據(jù)吧

mock.js是什么

前后端同時開發(fā)的時候，后端接口數(shù)據(jù)沒有出來，前端可以使用mock模擬假數(shù)據(jù)，進行頁面的開發(fā)；

使用mock的好處

使用mockjs模擬后端接口，可隨機生成所需數(shù)據(jù)，模擬對數(shù)據(jù)的增刪改查。

數(shù)據(jù)類型豐富，支持生成隨機的文本、數(shù)字、布爾值、日期、郵箱、鏈接、圖片、顏色等。

攔截Ajax請求不需要修改既有代碼就可以攔截，返回模擬的響應(yīng)數(shù)據(jù)。

怎么使用mock模擬數(shù)據(jù)

（首先你需要有一個模擬的接口地址url）

1. 確保你在項目中已經(jīng)安裝了axios和mock

npm install -S axios
npm install -D mockjs

2. 在項目的src文件夾下新建一個文件夾用來存放mock模擬的數(shù)據(jù)

一般我們放在將mock模擬的數(shù)據(jù)（ /src/mock/index.js）這個文件中，這里以此為例。

//這里是我使用本地的服務(wù)器商品接口地址模擬的數(shù)據(jù)
//在 src/mock/index.js 這個文件中
 
import { mock } from 'mockjs'
let data = mock({
    "data|6": [ //生成6條數(shù)據(jù) 數(shù)組
        {
            "shopId|+1": 1,//生成商品id，自增1
            "shopMsg": "@ctitle(10)", //生成商品信息，長度為10個漢字
            "shopName": "@cname",//生成商品名 ， 都是中國人的名字
            "shopTel": /^1(5|3|7|8)[0-9]{9}$/,//生成隨機電話號
            "shopAddress": "@county(true)", //隨機生成地址
            "shopStar|1-5": "★", //隨機生成1-5個星星
            "salesVolume|30-1000": 30, //隨機生成商品價格 在30-1000之間
            "shopLogo": "@Image('100x40','#c33', '#ffffff','小北鼻')", //生成隨機圖片，大小/背景色/字體顏色/文字信息
            "food|2": [ //每個商品中再隨機生成2個food
                {
                    "foodName": "@cname", //food的名字
                    "foodPic": "@Image('100x40','#c33', '#ffffff','小可愛')",//生成隨機圖片，大小/背景色/字體顏色/文字信息
                    "foodPrice|1-100": 20,//生成1-100的隨機數(shù)
                    "aname|2": [
                        { 
                            "aname": "@cname", 
                            "aprice|30-60": 20 
                        }
                    ]
                }
            ]
        }
    ]
})
mock(/goods\/list/, 'get', () => { //三個參數(shù)。第一個：請求路徑，第二個：請求方式post/get，第三個：回調(diào)，返回值
    return data
})

3.模擬完數(shù)據(jù)后，在入口主文件 main.js 中引入這個模擬數(shù)據(jù)的文件

//main.js
import "./mock/index.js"

4.在需要請求該接口模擬數(shù)據(jù)頁面中，可以直接進行axios請求

（這里為了使大家可以看懂，就不封裝axios了，直接使用axios對接口進行數(shù)據(jù)請求了）

<script setup>
import { onMounted } from "vue";
import axios from "axios"
 
function myrequest() {
  axios.get("http://localhost:8080/goods/list").then((res) => {
    console.log("這是我發(fā)送的請求");
    console.log(res)
  })
}
 
onMounted(() => {
  myrequest();
})
</script>
 
<template></template>
 
<style scoped></style>

5.打開控制臺查看我們請求到的模擬數(shù)據(jù)