mock.js使用

最新推荐文章于 2024-10-30 15:42:25 发布

原创最新推荐文章于 2024-10-30 15:42:25 发布 · 310 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#mock.js #mock

工具使用专栏收录该内容

3 篇文章

订阅专栏

本文介绍了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);
    })
  }

请求结果: