mockjs在vue中的使用

mockjs在vue中的使用

安装好vue-cli后

加载模块：

npm install mockjs

创建mock.js文件到src目录下的任一合适文件内新建mockjs.js，设置好拦截信息，设置规则可看官网规则

例如下面是模拟的一条数据：

import Mock from 'mockjs'

export default Mock.mock('msg', { 

    'name'    : '@name', 

    'age|1-100': 100, 

    'color'    : '@color' 

}); 

多条数据

import Mock from 'mockjs'

const Random = Mock.Random;

export default Mock.mock('msg',getData);

function getData(){

  let articles = [];

    for (let i = 0; i < 100; i++) {

        let newArticleObject = {

            title: Random.csentence(5, 30), //  Random.csentence( min, max )

            thumbnail_pic_s: Random.dataImage('300x250', 'mock的图片'), // Random.dataImage( size, text ) 生成一段随机的 Base64 图片编码

            author_name: Random.cname(), // Random.cname() 随机生成一个常见的中文姓名

            date: Random.date() + ' ' + Random.time() // Random.date()指示生成的日期字符串的格式,默认为yyyy-MM-dd；Random.time() 返回一个随机的时间字符串

        }

        articles.push(newArticleObject)

    }

    return {

        articles: articles

    }

}

在组件中使用

import axios from 'axios';

import mockdata from "@/router/mockjs";

mounted: function(){

        axios.get('msg').then(res=>{

            // this.data1 = res.data;

            console.log(res);

        })

    }