正文

mockjs在vue中的使用

IP云
IP云V管理员/0 阅读
09/13
小程序：扫一扫查出行
【扫一扫了解最新限行尾号】
复制小程序

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);
        })
    }