快捷導(dǎo)航

Vue之使用mockjs生成模擬數(shù)據(jù)案例詳解

更新時間：2021年09月08日 14:15:42 作者：般若Neo

這篇文章主要介紹了Vue之使用mockjs生成模擬數(shù)據(jù)案例詳解,本篇文章通過簡要的案例,講解了該項技術(shù)的了解與使用,以下就是詳細內(nèi)容,需要的朋友可以參考下

在項目中安裝mockjs

在項目目錄下執(zhí)行以下安裝命令

npm install mockjs --save

在Vue項目中使用mockjs的基本流程

安裝完成后，在項目src/utils目錄下新建mock.js（可自行定義所在目錄及文件名），用于生成模擬數(shù)據(jù)。

// 引入mockjs
const Mock = require('mockjs')

// 生成模擬數(shù)據(jù)
const test = function() {
    return Mock.mock({
        // 屬性list的值是一個數(shù)組，其中含有 1 到 10 個元素
        'list|1-10': [{
            // 屬性id是一個自增數(shù)，起始值為 1，每次增 1
            'id|+1': 1,
            // 通過占位符生成隨機數(shù)據(jù)
            'name': '@name',
            'age': '@natural(18, 100)',
            'email': '@email'
        }]
    });
}

// 映射訪問的url
// 此處表示當Ajax請求/mock/test路徑時，會映射執(zhí)行test函數(shù)
Mock.mock('/mock/test', test)

在項目src/api目錄下，新建MockSrv.js，用于響應(yīng)Ajax請求。

import axios from 'axios'
import mock from '@/utils/mock'

export default {
    testMock() {
        return axios.get('/mock/test')
    }
}

在組件中請求Mock生成的模擬數(shù)據(jù)。

<script>
import MockSrv from '@/api/MockSrv'

export default {
    name: 'App',
    mounted() {
        MockSrv.testMock().then(function(resp) {
            console.log("Mock:", resp.data);
        });
    }
}
</script>

執(zhí)行結(jié)果

在這里插入圖片描述

Mock語法規(guī)范

數(shù)據(jù)模板定義規(guī)范（Data Template Definition，DTD）

數(shù)據(jù)模板中的每個屬性由 3 部分構(gòu)成：屬性名、生成規(guī)則、屬性值：

// 屬性名   name
// 生成規(guī)則 rule
// 屬性值   value
'name|rule': value

數(shù)據(jù)占位符定義規(guī)范（Data Placeholder Definition，DPD）

占位符只是在屬性值字符串中占個位置，并不出現(xiàn)在最終的屬性值中。
占位符的格式為：

@占位符
@占位符(參數(shù) [, 參數(shù)])

Mock.mock({
    name: {
        first: '@FIRST',
        middle: '@FIRST',
        last: '@LAST',
        full: '@first @middle @last'
    }
})

Mock.mock()

根據(jù)數(shù)據(jù)模板生成模擬數(shù)據(jù)
Mock.mock(rurl?, rtype?, template | function(options))

rurl 可選，表示需要攔截的 URL，可以是 URL 字符串或 URL 正則
rtype 可選，表示需要攔截的 Ajax 請求類型。例如 GET、POST、PUT、DELETE 等
template 可選，表示數(shù)據(jù)模板，可以是對象或字符串
function(options) 可選，表示用于生成響應(yīng)數(shù)據(jù)的函數(shù)
- options 指向本次請求的 Ajax 選項集，含有 url、type 和 body 三個屬性

Mock.Random()

Mock.Random 是一個工具類，用于生成各種隨機數(shù)據(jù)。
Mock.Random 的方法在數(shù)據(jù)模板中稱為『占位符』，書寫格式為 @占位符(參數(shù) [, 參數(shù)]) 。

var Random = Mock.Random
Random.email()
// => "n.clark@miller.io"
Mock.mock('@email')
// => "y.lee@lewis.org"
Mock.mock( { email: '@email' } )
// => { email: "v.lewis@hall.gov" }

Mock.Random 中的方法與數(shù)據(jù)模板的 @占位符一一對應(yīng)，在需要時還可以為 Mock.Random 擴展方法，然后在數(shù)據(jù)模板中通過 @擴展方法引用。

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

您可能感興趣的文章: