Mock.js的使用

Mock.js的使用

Mock.js用于随机生成一些数据。原理是对请求进行了拦截,并未发送真是的向服务端的请求。这里只讲在Vue中的使用。

1.安装

npm install mock.js

2.配置

在src下创建mockjs文件夹,再创建index.js文件。在index.js中对mock进行配置及模拟数据。

import Mock from 'mockjs'
// 模拟get请求,实际是对真是请求的拦截
// (注意这里的url,反斜杠不能少,之前少了第一个反斜杠一直报错找不到原因)
Mock.mock('/api/account', 'get', {
  code: 0,
  msg: 'success',
  data: {
  	'id|1-99': 0 // 生成1-99的随机id
  }
})

// 设置延迟
Mock.setup({
  timeout: "500-1000",
});

3.引入

这一步很重要,必须要在main.js中引入,否则报错404。

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

import '@/mockjs/index'

Vue.config.productionTip = false

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

4.使用

和正常的请求一样,由于是拦截,浏览器中看不到请求记录。这里我是对axios进行了二次封装,api统一管理。

// requests为二次封装的axios
import requests from '@/api/requests'

const reqAccount = () => {
  return requests({
    url: '/account',
    method: 'get'
  })
}

export {
  reqAccount
}

5.常用语法

更多用法查文档:Mock.js (mockjs.com)

let Random = Mock.Random
// 随机生成一个常见的中文姓名。
Random.cname()
// 随机生成日期
Random.date()
// 随机生成一句中文标题
Random.ctitle()
// 随机生成一段中文文本
Random.cparagraph()
// 生成一段随机的 Base64 图片编码。
Random.dataImage()

Mock.mock('/api/entries', 'get', {
  code: 0,
  msg: 'success',
  data: {
    'entries': [
      {
        'id|1-999': 0, // 生成1-99的随机数
        name: "@cname",
        data: '@date',
        title: '@ctitle',
        content: '@cparagraph',
        "browse|20-999": 125,
        "good|1-999": 1231,
        "comments|1-99": 0,
        imagesurl: '@dataImage'
      },
     ]
  }
}
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值