使用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 Cli的全新脚手架工具create vue示例解析
这篇文章主要为大家介绍了代替Vue Cli的全新脚手架工具create vue示例解析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2022-10-10
最新评论