Vue 集成mock.js 并模拟新房信息

Vue 集成mock.js 的一般步骤:

1、Vue 项目集成mockjs

cnpm i mockjs -S

2、在src 文件夹下新增mock.js 文件，并且在main.js 引入mock.js 文件

mock.js 文件内容：

//引入mockjs
const Mock = require('mockjs')
// 获取 mock.Random 对象
const Random = Mock.Random;
console.log(111)
//使用mockjs模拟数据
Mock.mock('http://192.168.1.74:8198/house/api/data', (req, res) => {//当post或get请求到/api/data路由时Mock会拦截请求并返回上面的数据
    let list = [];
    for(let i = 0; i < 30; i++) {
        let listObject = {
            title: Random.csentence(5, 10),//随机生成一段中文文本。
            company: Random.csentence(5, 10),
            attention_degree: Random.integer(100, 9999),//返回一个随机的整数。
            photo: Random.image('114x83', '#00405d', '#FFF', 'Mock.js')
        }
        list.push(listObject);
    }
    return {
        data: list
    }
})

main.js 文件中引入mock,js

// 引入模拟数据mockjs
require('./mock')

3、在业务组件newHouse.vue 中模拟调用mock.js 数据接口:api/data

newHouse.vue 核心代码:

<style>
</style>
<template>
  <div id="new_house">
    <h1>新房管理</h1>
  </div>
</template>

<script>

export default{
  name: 'new_house',
  data() {
        return {
          data:[]
        }
      },
      mounted:function() {
        let url = '/api/data'
        this.$axios.get(url).then(res => {//get()中的参数要与mock.js文件中的Mock.mock()配置的路由保持一致
          this.data = res.data.data;
          console.log(res.data);//在console中看到数据
        }).catch(res => {
          alert('wrong');
        })
      },
}
</script>

控制台结果输出:

总结: 改项目是后台接口与 Mock.js 模拟接口共存的前端项目,接口的访问顺序规则是:先执行mockjs 的接口，再执行后台接口，如果都不存在直接提示报错。

Vue 集成mock.js 并模拟新房信息

猜你喜欢