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

更新時(shí)間：2025年03月12日 09:44:58 作者：沖?。?

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

mock.js是什么

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

使用mock的好處

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

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

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

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

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

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

npm install -S axios
npm install -D mockjs

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

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

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

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

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

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

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

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

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

注意事項(xiàng)：

記得修改為你的接口地址；
注意你寫的請(qǐng)求方式與你的接口文檔要求的請(qǐng)求方式是否保持一致；
注意你模擬數(shù)據(jù)的請(qǐng)求接口是否打開，服務(wù)器是否啟動(dòng)；

我在本文中所使用的接口文檔示例：

引申：

常用的mock占位符解釋：

@cname 中文人名
@id 身份證id
@title 中文title
@city 中文城市
@ip ip 地址
@email email
@url url地址
@csentence(1,5) 生成1到5個(gè)字的中文句子
@cparagraph 生成中文段落
@string(11) 輸出11 個(gè)字符長(zhǎng)度的字符串
@float(0,10) 0 到 10 的浮點(diǎn)數(shù)
@integer(60,70) 60 到 70 之間的整數(shù)
@boolean boolean 類型 true,false

到此這篇關(guān)于Vue3中使用mock.js模擬數(shù)據(jù)的示例詳解的文章就介紹到這了,更多相關(guān)Vue3 mock.js模擬數(shù)據(jù)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: