前端mockjs虚拟数据__留备使用

最新推荐文章于 2023-04-04 12:24:56 发布

rainux.

最新推荐文章于 2023-04-04 12:24:56 发布

阅读量229

点赞数 1

分类专栏：前端经典佳例前端常见问题紧跟前端前沿文章标签： javascript vue.js mockjs 前后端分离

本文链接：https://blog.youkuaiyun.com/weixin_49918657/article/details/120207642

版权

前端常见问题同时被 3 个专栏收录

31 篇文章

订阅专栏

前端经典佳例

9 篇文章

订阅专栏

紧跟前端前沿

3 篇文章

订阅专栏

这篇博客介绍了如何在Vue项目中引入和配置Mock.js，以拦截Ajax请求并返回模拟数据。通过Mock.mock()方法定义了不同类型的响应数据，包括字符串、整数、对象和数组。在组件中使用axios发起请求，展示了如何获取并打印这些模拟数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Code Is Never Die ！

1.0 Vue环境下

2.0 引入mock.js文件

在main.js中引入mock.js

3.0 mock.js文件拦截ajax请求，返回mock数据

const Mock = require('mockjs')

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

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

// 返回随机个数的对象
Mock.mock('/api/getObject', (req, res) => {
    return Mock.mock({
        'brand|1-3': {
            a: '京东',
            b: '国美',
            c: '苏宁',
            d: '当当',
            e: '天猫',
            f: '淘宝'
        }
    })
})

// 返回随机数组
Mock.mock('/api/getArr', (req, res) => {
    return Mock.mock({
        'data|1-10': [
          {
            'name': '张三'
          }
        ]
      })
})

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

// 返回随机字符
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()}
})

4.0 单组件中使用axios发起请求

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, '数字')
            })

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

            axios.get('/api/getArr').then(res => {
                console.log(res.data, '数组')
            })

            axios.get('/api/getRandom1').then(res => {
                console.log(res.data, '5个随机字符-方式一')
            })

            axios.get('/api/getRandom2').then(res => {
                console.log(res.data, '5个随机字符-方式二')
            })

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