vue中配置Mockjs

下载

//在开发环境中引入
npm install mockjs --save-dev

创建mock文件

创建 src/mock/index.js文件，使用mock接受请求

//引入mockjs
const Mock = require('mockjs')  
const Random = Mock.Random;

//使用mockjs模拟数据
//当post或get请求到/api/data路由时Mock会拦截请求并返回数据
Mock.mock('/api/data', (req, res) => {
    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 {
	    status:200,
	    message:'获取列表成功',
        data: list
    }
})

main.js中引入mock

import "@/mock/index.js"

发送请求

.vue文件发送请求

import axios from 'axios'

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

注意

需要注意的是传回的参数格式问题 和 请求地址问题