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 的接口，再执行后台接口，如果都不存在直接提示报错。