mock.js模擬數據

一、mock解決的問題

　　開發時，后端還沒完成數據輸出，前端只好寫靜態模擬數據。數據太長了，將數據寫在js文件里，完成后挨個改url。某些邏輯復雜的代碼，加入或去除模擬數據時得小心翼翼。想要盡可能還原真實的數據，要么編寫更多代碼，要么手動修改模擬數據。特殊的格式，例如IP,隨機數，圖片，地址，需要去收集

二、mock優點

　　1、前后端分離

　　讓前端工程師獨立於后端進行開發。

 

　　2、增加測試的真實性

　　通過隨機數據，模擬各種場景。

 

　　3、開發無侵入

　　不需要修改既有代碼，就可以攔截Ajax請求，返回模擬的響應數據。

 

　　4、用法簡單

　　符合直覺的接口。

 

　　5、數據類型豐富

　　支持生成隨機的文本、數字、布爾值、日期、郵箱、鏈接、圖片、顏色等。

 

　　6、方便擴展

　　支持支持擴展更多數據類型，支持自定義函數和正則。

 

　　7、在已有接口文檔的情況下，我們可以直接按照接口文檔來開發，將相應的字段寫好，在接口完成 之后，只需要改變url地址即可。

 

　　8、不涉及跨域問題，

 

三、案例demo

　　1.首先需要下載安裝mockjs模塊

　　　 cnpm install mockjs -S

 

　　 2.然后可以在scr下創建一個文件夾，用於存放模擬的數據的文件 例如 /src/mock/index.js,在這個文件中

const Mock = require("mockjs");
let data = Mock.mock({
    "data|100": [ //生成100條數據 數組
        {
            "shopId|+1": 1,//生成商品id，自增1
            "shopMsg": "@ctitle(10)", //生成商品信息，長度為10個漢字
            "shopName": "@cname",//生成商品名 ， 都是中國人的名字
            "shopTel": /^1(5|3|7|8)[0-9]{9}$/,//生成隨機電話號
            "shopAddress": "@county(true)", //隨機生成地址
            "shopStar|1-5": "★", //隨機生成1-5個星星
            "salesVolume|30-1000": 30, //隨機生成商品價格 在30-1000之間
            "shopLogo": "@Image('100x40','#c33', '#ffffff','小北鼻')", //生成隨機圖片，大小/背景色/字體顏色/文字信息
            "food|7": [ //每個商品中再隨機生成七個food
                {
                    "foodName": "@cname", //food的名字
                    "foodPic": "@Image('100x40','#c33', '#ffffff','小可愛')",//生成隨機圖片，大小/背景色/字體顏色/文字信息
                    "foodPrice|1-100": 20,//生成1-100的隨機數
                    "aname|14": [
                        { 
                            "aname": "@cname", 
                            "aprice|30-60": 20 
                        }
                    ]
                }
            ]
        }
    ]
})
Mock.mock(/goods\/goodAll/, 'post', () => { //三個參數。第一個路徑，第二個請求方式post/get，第三個回調，返回值
    return data
})

 3.模擬完數據后，需要在入口主文件 main.js中 引入這個模擬數據的文件

　　　import "./mock/index.js"

 

 4.在頁面中，我們直接可以進行axios請求，（這里懶省事了，正常情況下，要把每個接口都封裝到api里面，后期便於修改維護等一系列操作）

import axios from "axios";


mounted () {
        this.initMsg();
    },
methods: {
   initMsg(){
　　　　　　axios.post("http://localhost:8080/goods/goodAll").then((res)=>{
　　　　　　　　console.log(res)
　　　　  　})
　　}  
}