快捷導(dǎo)航

使用mockjs如何生成隨機(jī)數(shù)據(jù)

更新時間：2024年10月12日 09:54:38 作者：harmsworth2016

Mockjs是一個用于生成隨機(jī)數(shù)據(jù)和攔截Ajax請求的庫,可以與Vue和Axios結(jié)合使用,提高前端開發(fā)效率,通過在項(xiàng)目中引入Mock.js文件,可以模擬后端API,攔截Ajax請求并返回自定義響應(yīng),這種方法適用于在后端尚未開發(fā)完成時的前端開發(fā)測試

mockjs生成隨機(jī)數(shù)據(jù)

概述

現(xiàn)在，前后端分離趨勢很明顯，前端負(fù)責(zé)數(shù)據(jù)展示、頁面動態(tài)效果等，而后端負(fù)責(zé)編寫應(yīng)用程序接口，供頁面、第三方等調(diào)用。
工作時，常常遇見的問題是：前端已經(jīng)寫好了頁面，一直在等待后端接口的聯(lián)調(diào)，等待也不是辦法，有沒有專門造假數(shù)據(jù)的工具呢？
mockjs就應(yīng)運(yùn)而生！

環(huán)境

vue2.2 + webpack3.0
mockjs
axios

引入mock.js文件

在main.js中引入mock.js

mock.js文件-攔截ajax請求，返回?cái)?shù)據(jù)

const Mock = require('mockjs')

// 返回字符串
Mock.mock('/api/data', (req, res) => {
    return Mock.mock({
        'string|3': '*'
    })
})

// 返回指定范圍的整數(shù)
Mock.mock('/api/getInteger', (req, res) => {
    return Mock.mock({
        'a|1-100': 100
    })
})

// 返回隨機(jī)個數(shù)的對象
Mock.mock('/api/getObject', (req, res) => {
    return Mock.mock({
        'brand|1-3': {
            a: '京東',
            b: '國美',
            c: '蘇寧',
            d: '當(dāng)當(dāng)',
            e: '天貓',
            f: '淘寶'
        }
    })
})

// 返回隨機(jī)數(shù)組
Mock.mock('/api/getArr', (req, res) => {
    return Mock.mock({
        'data|1-10': [
          {
            'name': '張三'
          }
        ]
      })
})

// 返回隨機(jī)字符
Mock.mock('/api/getRandom1', (req, res) => {
    return Mock.mock({
        'random1': /[a-z]{2}[A-Z]{2}[0-9]/
    })
})

// 返回隨機(jī)字符
Mock.mock('/api/getRandom2', (req, res) => {
    return Mock.mock({random2: '@string("lower", 5)'})
})

// 返回UUID
Mock.mock('/api/getUUID', (req, res) => {
    return {'uuid': Mock.Random.id()}
})

使用axios發(fā)起http請求

import axios from 'axios'
export default {
    components: {
    },
    data () {
        return {

        }
    },
    computed: {
    },
    mounted () {
        this.init()
    },
    methods: {
        init () {
            axios.get('/api/data').then(res => {
                console.log(res.data,'字符串')
            })

            axios.get('/api/getInteger').then(res => {
                console.log(res.data, '數(shù)字')
            })

            axios.get('/api/getObject').then(res => {
                console.log(res.data, '對象')
            })

            axios.get('/api/getArr').then(res => {
                console.log(res.data, '數(shù)組')
            })

            axios.get('/api/getRandom1').then(res => {
                console.log(res.data, '5個隨機(jī)字符-方式一')
            })

            axios.get('/api/getRandom2').then(res => {
                console.log(res.data, '5個隨機(jī)字符-方式二')
            })

            axios.get('/api/getUUID').then(res => {
                console.log(res.data, 'uuid')
            })
        }
    }
}