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

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM