使用mockjs模拟生成数据

为什么要使用mockjs?为了不在没有接口时闲得慌,所以我们得想办法自己弄到数据。
首先,了解一下mockjs怎么写,这时候我们就需要去它的官网mock.js瞧一瞧,看一下别人的事例是怎么写的,在了解了基本的写法之后,就可以自己动手了。
(1)安装mock.js,因为只需要在本地使用,所以用–save-dev就好

npm install mockjs --save-dev

(2)在src下新建mock文件夹,结构如下
使用mockjs模拟生成数据_第1张图片
(3)carousel.js文件中代码如下

import Mock from 'mockjs'

const starList=Mock.mock({
    'err_code':"0",
    'success_code':'200',
    'data|8':[{
        "carouselId|+1":1,
        "name":'@cname',
        'img':"@image('400x400','#50B347', '#FFF', 'Mock.js')",
        "description":"@cword(100,200)"
    }]
});

export default {
    starList
}

(4)index.js文件中代码如下

import Mock from 'mockjs'
import carouselList from './data/carousel'

Mock.mock('api/carousel','get',carouselList);

(5)页面请求,打印数据结果

mounted() {
            //获取轮播图
            this.$http.get('api/carousel').then(res=>{
                 console.log(res.data);
                this.carouselList=res.data.carouselList.data;
                this.$nextTick(function () {
                    this.carouselScroll();
                })
            });
        },

使用mockjs模拟生成数据_第2张图片

你可能感兴趣的:(mock)