---Mock---基本使用

1、mock解決的問題前端

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

2、mock優勢npm

　　一、先後端分離axios

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

　　二、增長測試的真實性

　　經過隨機數據，模擬各類場景。

　　三、開發無侵入

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

　　四、用法簡單

　　符合直覺的接口。

　　五、數據類型豐富

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

　　六、方便擴展

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

　　七、在已有接口文檔的狀況下，咱們能夠直接按照接口文檔來開發，將相應的字段寫好，在接口完成以後，只須要改變url地址便可。

　　八、不涉及跨域問題，

3、案例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"api

　　4.在頁面中，咱們直接能夠進行axios請求，（這裏懶省事了，正常狀況下，要把每一個接口都封裝到api裏面，後期便於修改維護等一系列操做）

import axios from "axios"; mounted () { this.initMsg(); }, methods: { initMsg(){

　　　　　　axios.post("http://localhost:8080/goods/goodAll").then((res)=>{

　　　　　　　　console.log(res)

　　　　　})

} }