vue-cli3 ：mock模擬數據，用axios請求數據過程遇到的問題

mock是用來模擬數據，對於前端開發而言這是真正的獨立開發，之前都是自己手動模擬數據，頁面多了就感覺很混亂而且效率不高，還不能真正去模擬請求后台數據。

之前請求后台是用ajax，最近學vue框架，所以采用axios.(希望一切友好....)

首先在項目里先安裝mock，以及axios

安裝好之后，接下來開始配置：

1.先看一眼我的目錄，沒有箭頭的可以忽略

2.修改內容

 2.1配置config文件

 

const mockIndexData = require("./src/mock");
 
module.exports = {
    //...  
    devServer: {
        port: 8080,
        before(app) {
            app.post("/news/index", (req, res) => {
                res.json(mockIndexData);
            });
        }
    }
};

2.2mian文件

require('./mock')

沒錯就一句話，------------是指向mock文件下index.js文件的意思（編輯器有快捷跳轉功能的可以點一下就知道，如果你的文件路徑以及名稱跟我的不一樣配置是不同的，但意思一樣哈）

2.3 mock的index文件

// 引入mockjs
const Mock = require('mockjs');
// 獲取 mock.Random 對象
const Random = Mock.Random;
// mock一組數據
const produceNewsData = function() {
    let articles = [];
    for (let i = 0; i < 10; 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
    }
}

// Mock.mock( url, post/get , 返回的數據)；
Mock.mock('/news/index', 'post', produceNewsData);

2.4.頁面vue引用

運行后：

 

過程的問題：

大家留意到沒，我axios用的是post請求方式，其實一開始用的是get請求，config也是get請求，但是頁面報錯404找不到路徑。

有點懵，本來理解不是很透，所以沒明白，有其他高手路過的可以指點一二。

 

 

過程參考文章https://www.cnblogs.com/jasonwang2y60/p/7302449.html

這里是cli2版本的，所以只參考了mock數據部分

 

彩蛋：

搞完后還有個疑問，我在config是配置一個url，要是模擬多個url呢。我干脆不要在config里配置，發現也是成功的，當時是針對post請求方式。

在mockjs里面追加一個url

let texts=[];
for (let i = 0; i < 10; i++) {
		let textData ={
			name:Random.cname(),
			con: Random.csentence(5, 12),
		}
		texts.push(textData);
}
Mock.mock('/news/index02', 'post', texts);

 然后在getHomeData方法后面追加一條請求記錄

axios.post("/news/index02").then(res => {
                console.log(res);
                // ...
                });

最后執行結果

完美~