欧美一区二区三区,国内熟女精品熟女A片视频小说,日本av网,小鲜肉男男GAY做受XXX网站

mockjs vue cli

劉姿婷2年前7瀏覽0評論

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工程中引入這些代碼即可。