mock生成数据方法 在vue里面的使用 简单版

这篇博客简单的介绍了一下mock在vue里面的运用。不懂得小伙伴们可以参考一下。

第一步：安装

 npm install mockjs -S
 顺便把 需要axios 安装 npm install axios，需要发请求的组件都引一下axios；

第二步：创建mock.js文件，引Mock。。 mock.js文件，用来放数据，放在src下

//引入mockjs
const Mock = require('mockjs')
// 获取 mock.Random 对象
const Random = Mock.Random;
//使用mockjs模拟数据
Mock.mock('/api/data', (req, res) => {//当post或get请求到/api/data路由时Mock会拦截请求并返回上面的数据
  let list = [];
  for(let i = 0; i < 50; i++) {
    let listObject = {
      id: Random.integer(0, 999999),
      name: Random.csentence(5, 30),//随机生成一段中文文本。
      price: Random.integer(100, 9999),//返回一个随机的整数。
      img: Random.image('80x80', '#8ef2ef', '#FFF')
    }
    list.push(listObject);
  }
  return {
    data: list
  }
})

第三步：mounted（）里面创建方法

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

  }
}

第四步 渲染到页面

 

        

            

                

                

                    
{{val.name}}
                    

                        
                        ￥ {{val.price}}
                    
                
            
        
 

简单的效果图