mockjs是一個用于生成隨機數據的庫,而Vue CLI則是一個構建Vue工程的腳手架工具。本文將講解如何在Vue CLI中使用mockjs生成假數據。
首先,我們需要安裝兩個依賴——mockjs和axios(用于發送HTTP請求)。打開終端,輸入以下命令:
npm install mockjs axios --save-dev
安裝完成后,在/src目錄下新建一個mock文件夾,用于存放mock數據。在mock文件夾下新建一個index.js文件,用于編寫mock數據的邏輯。示例代碼如下:
import Mock from 'mockjs' Mock.mock('/api/getData', 'get', { 'data|10': [{ 'id|+1': 1, 'name': '@ctitle(5, 10)', 'description': '@cparagraph', 'price|10-200': 20 }] })
以上代碼模擬了一個/getData的接口,返回10個數據,數據結構包含id、name、description和price四個字段。其中,id字段自增1,name字段使用隨機中文標題生成,description字段使用隨機中文段落生成,price字段的隨機范圍在10~200之間,步長為20。
接下來,在/src目錄下新建一個api文件夾,用于存放前端調用mock接口的邏輯。在api文件夾下新建一個index.js文件,用于編寫調用mock接口的邏輯。示例代碼如下:
import axios from 'axios' export function getData() { return axios.get('/api/getData') }
以上代碼定義了一個名為getData的函數,用于調用/mock/getData接口。
最后,在/src/main.js文件中引入mockjs和api/index.js。示例代碼如下:
import Mock from '@/mock' import * as api from '@/api' Mock.setup({ timeout: '200-1000' }) api.getData().then(res =>{ console.log(res.data) })
以上代碼啟動mock服務,并調用了getData接口。其中,Mock.setup用于配置mock數據生成的響應時間范圍,這里設置為200ms到1s之間。
至此,我們已經完成了在Vue CLI中使用mockjs生成假數據的操作??偟膩碚f,只需要三個步驟:安裝mockjs和axios依賴、編寫mock數據和API調用邏輯代碼、在Vue CLI工程中引入這些代碼即可。