Springboot+Vue全栈开发之Mockjs

mockjs介绍

• Mock.js是一款前端开发中拦截Ajax请求再生成随机数据响应的工具，可以用来模拟服务器响应
• 优点是非常简单方便，无侵入性，基本覆盖常用的接口数据类型
• 支持生成随机的文本、数字、布尔值、日期、邮箱、链接、图片、颜色等
• 安装：npm install mockjs

基本使用

• 在项目中创建mock目录，新建index.js文件

  // 引入mockjs
  import Mock from 'mockjs'
  // 使用mockjs模拟数据
  Mock.mock('/product/search', {
  	"ret":0,
  	"data":
  	{
  	  "mtime": "@datetime", //随机生成日期时间
  	  "score|1-800": 800, //随机生成1-800的数字
  	  "rank|1-100": 100, //随机生成1-100的数字
  	  "stars|1-5": 5, //随机生成1-5的数字
  	  "nickname": "@cname", //随机生产中文名字
  	 //生成图片
      "img": "@image('200x100', '#ffcc33', '#FFF', 'png', 'Fast Mock')"
  	}
  });
  

• 组件中调用mock.js中模拟的数据接口，这时返回的response就是mock.js中用Mock.mock(‘url’, data)中设置的data

  import axios from 'axios'
  export default{
    mounted:function(){
      axios.get("/product/search").then(res =>{
        console.log(res)
      })
    }
  }
  

核心方法

Mock.mock(rurl?, rtype?, template|function(options))

• rurl：表示需要拦截的URL，可以是URL字符串或URL正则
• rtype：表示需要拦截的Ajax请求类型，例如GET、POST、PUT、DELETE等
• template：表示数据模板，可以是对象或字符串
• 设置延迟请求到数据

  //延时400ms请求到数据
  Mock.setup({
  	timeout: 400
  })
  //延时200-600ms请求到数据
  Mock.setup({
  	timeout: '200-600'
  })
  

基础随机内容生成

{
    "string|1-10": "=",// 随机生成1到10个等号
    "string2|3": "=",// 随机生成2个或3个等号
    "number|+1": 0,// 从0开始自增
    "number2|1-00.1-3": 1,// 生成一个小数，小数点前面1到10，小数点后1到3位
    "boolean": "@boolean(1, 2, true)",// 生成boolean值 三个参数：1比倒是第三个参数true出现的概率，2表示false出现的概率
    "name": "@cname",// 随机生成中文姓名
    "firstname": "@cfirst",// 随机生成中文姓
    "int": "@integer(1, 10)",// 随机生成1-10的整数
    "float": "@float(1, 2, 3, 4)",// 随机生成浮点数，四个参数分别为，整数部分的最大值和最小值，小数部分的最大值最小值
    "range": "@range(1, 100, 10)",// 随机生成整数数组，三个参数分别为，最大值最小值和加的步长
    "natural": "@natural(60, 100)",// 随机生成自然数（大于0的数）
    "email": "@email",// 邮箱
    "ip": "@ip",// ip
    "datetime": "@date('yy-MM-dd hh:mm:ss')"// 随机生成指定格式的时间
}