在vue项目中使用mockjs模拟接口数据

进入mock官网
在官网
在mock的官网上方有很多语法示例,可以看一看。官网里面有详细的文档说明,点击开始
先安装mockjs
npm install mockjs
在你的项目src文件下新建mock文件,在mock文件里新建mock.js文件

mock.js`

const Mock = require('mockjs');
const Random = Mock.Random;

写的接口可以全部放在这一个文件中,具体怎么写,mock有自己的语法规范,看官网。
在需要调用模拟接口的vue组件中,引入mock.js
在这里插入图片描述
然后就可以像正常获取接口那样来获取数据了
小例子源码
mock.js

const Mock = require('mockjs');
const Random = Mock.Random;

Mock.mock('/list',{
  'age|10-20':10
})

test.vue

<template>
  <div>
    <div>我什么都不知道</div>
    <span>{{age}}</span>
  </div>
</template>

<script>
import '../mock/mock.js'
export default {
  name: 'test',
  data: function () {
    return {
      hospitalList: [],
      age: 16
    }
  },
  methods: {
    getHospitals () {
      this.axios.post('/list').then(response=>{
      // this.$http.post('/list').then(response=>{
        console.log(response.data)
        this.age = response.data.age
      }).catch( err => {
        console.log('获取错误')
      })
    }
  },
  }
</script>

<style scoped>

</style>

  • 0
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值