使用mockjs如何生成随机数据

 更新时间:2024年10月12日 09:54:38   作者:harmsworth2016  
Mockjs是一个用于生成随机数据和拦截Ajax请求的库,可以与Vue和Axios结合使用,提高前端开发效率,通过在项目中引入Mock.js文件,可以模拟后端API,拦截Ajax请求并返回自定义响应,这种方法适用于在后端尚未开发完成时的前端开发测试

mockjs生成随机数据

概述

  • 现在,前后端分离趋势很明显,前端负责数据展示、页面动态效果等,而后端负责编写应用程序接口,供页面、第三方等调用。
  • 工作时,常常遇见的问题是:前端已经写好了页面,一直在等待后端接口的联调,等待也不是办法,有没有专门造假数据的工具呢?
  • mockjs就应运而生!

环境

  • vue2.2 + webpack3.0
  • mockjs
  • axios

引入mock.js文件

在main.js中引入mock.js

mock.js文件-拦截ajax请求,返回数据

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()}
})

使用axios发起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, '数字')
            })

            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')
            })
        }
    }
}

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • vue中(el-button的五种类型,三种css格式)

    vue中(el-button的五种类型,三种css格式)

    这篇文章主要介绍了vue中(el-button的五种类型,三种css格式)具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-07-07
  • vue多个元素的样式选择器问题

    vue多个元素的样式选择器问题

    这篇文章主要介绍了vue多个元素的样式选择器问题,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-11-11
  • Vue项目Nginx子目录部署(Vite和Vue-CLI)

    Vue项目Nginx子目录部署(Vite和Vue-CLI)

    本文主要介绍了Vue项目Nginx子目录部署(Vite和Vue-CLI),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2024-05-05
  • 优选七个用于vue开发的JS库

    优选七个用于vue开发的JS库

    这篇文章主要介绍了JavaScript优选七个用于vue开发库,借助开源库加速Vue项目的开发进度是现代前端开发比较常见的方式,平常收集一些JavaScript库介绍,在遇到需要的时候可以信手拈来
    2023-02-02
  • Vue Router4中params传参失效和报错问题的解决方法

    Vue Router4中params传参失效和报错问题的解决方法

    在使用vue-router4中params 进行路由组件之间传参,跳转页面接收不了并报错,本文给大家介绍了Vue Router4中params传参失效和报错问题的解决方法,需要的朋友可以参考下
    2024-03-03
  • 如何使用Vuex+Vue.js构建单页应用

    如何使用Vuex+Vue.js构建单页应用

    这篇文章主要教大家如何使用Vuex+Vue.js构建单页应用,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-10-10
  • Vue响应式原理深入解析及注意事项

    Vue响应式原理深入解析及注意事项

    Vue 最显著的一个功能是响应系统 —— 模型只是普通对象,修改它则更新视图。下面这篇文章主要给大家深入讲解了关于Vue的响应式原理,以及Vue响应式的一些注意事项,需要的朋友下面随着小编来一起学习学习吧。
    2017-12-12
  • Vue3中事件总线mitt的使用方式

    Vue3中事件总线mitt的使用方式

    mitt又称事务总线,是第三方插件,这篇文章主要为大家详细介绍了Vue3中事件总线mitt的使用方式,感兴趣的小伙伴可以跟随小编一起学习一下
    2025-03-03
  • Vite使用Esbuild提升性能详解

    Vite使用Esbuild提升性能详解

    这篇文章主要为大家介绍了Vite使用Esbuild提升性能示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-08-08
  • vue3 逻辑复用的实现示例

    vue3 逻辑复用的实现示例

    在项目开发中,有两个功能特别类似,如果单独实现,会有很多重复的代码,这时候就会用到逻辑复用,本文主要介绍了vue3 逻辑复用的实现示例,具有一定的参考价值,感兴趣的可以了解一下
    2024-02-02

最新评论