mock.js使用

本文介绍了Mock.js的用途,包括模拟数据、拦截Ajax请求,适用于前端独立开发时使用。内容涉及Mock.js的数据类型和安装步骤,并以Vue项目为例展示了如何创建Mock文件,以及在组件中调用模拟数据的方法。

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

mock.js介绍

1、mock.js是用来模拟数据,可以拦截ajax请求,可以帮助前端开发者在没有后端接口的情况下独立开发
2、mock.js数据类型丰富,支持生成随机的文本、数字、布尔值、日期、邮箱、链接、图片、颜色等。
3、可以生成模拟数据、模拟ajax请求并返回模拟数据

安装

mock.js官网: http://mockjs.com

npm install mockjs -D

创建mock文件

这里以vue项目为例,新建一个mock文件,目录结构:
目录结构
mock.js文件中写入以下代码:

import Mock from 'mockjs'

const Random = Mock.Random

// 模拟数据
let data = Mock.mock({  //生成数据模板
  'array|1-10':[ //随机生成 1到10项的数组
    {
      'name|1':[  //  随机取一个值
        'hello',
        'mock.js',
        '!'
      ]
    }
  ],
  'string|1-10':'a', //随机生成 1到10个由字符a 组成的字符串
  'number|1-100':1, //随机生成 1到100的数字
  'email':'@email', // 随机生成 邮箱地址
  'boolean':'@boolean', //随机生成 boolean类型  true|false
  'date':'@date(yyyy-MM-dd)', //随机生成 指定格式的日期类型 (yyyy-MM-dd => 2019-08-14)
  'name':'@cname', //随机生成一个中文名
  // ... 还可以生成许多其他类型,这里就不一一展示了,更多类型参考官方文档
})
//get请求  第一个参数:请求路径,第二个参数:请求方法,第三个参数:返回响应数据的函数
Mock.mock('/testGet',/get/,function (options) {
  console.log(options);
  return data
})
//post请求
Mock.mock('/testPost',/post/,function (options) {
  console.log(options);
  return data
})

更多数据模板类型参考官方文档:http://mockjs.com/examples.html

main.js中引入mock.js文件

import Vue from 'vue'
import App from './App'
import axios from 'axios'

import './mock/mock' //引入mock.js

Vue.config.productionTip = false
Vue.prototype.$axios = axios   // 这里引入了axios ,后面请求接口可以使用

/* eslint-disable no-new */
new Vue({
  el: '#app',
  components: { App },
  template: '<App/>'
})

在组件中使用ajax请求模拟数据

  created(){
   	//get请求
    this.$axios.get('/testGet').then(res =>{
      console.log(res.data);
    })
  	//post请求
    this.$axios.post('/testPost').then(res =>{
      console.log(res.data);
    })
  }

请求结果:
请求结果

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值