vue项目mock数据

在vue项目中 mock.js 的使用

  1. 安装:
    npm install mockjs --save-dev

  2. 在main.js 同目录创建 mock.js

  3. 在main.js 中引入
    require("./mock")


//mock.js

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

//当post或get请求到/api/data 路由时Mock会拦截请求并返回下面的数据
Mock.mock("/api/data",(req,res)=>{
    console.log(req,res);
    let list = [];
    for(let i = 0;i<20;i++){
        let listObj = {
            tite:Random.ctitle(4,10),
            company: Random.csentence(5, 10),
            attention_degree: Random.integer(100, 9999),//返回一个随机的整数。
            photo: Random.image('114x83', '#00405d', '#FFF', 'Mock.js')
        }
        list.push(listObj);
    }
    return {
        data: list
    }
})

// 使用 //home.vue

methods: {
    getList(){
      axios({
        method:'post',
        url: "/api/data",
      }).then(res=>{
        this.list = res.data.data;
        console.log("结果",res.data.data);
      })
    }
  }


上一篇:Django实战搭建mock系统(二)


下一篇:单元测试Unit Testing [22]