https://www.jianshu.com/p/0d6a0bdce55c?utm_campaign=maleskine&utm_content=note&utm_medium=seo_notes&utm_source=recommendation
https://blog.csdn.net/cuclife/article/details/131119983
操作步驟
1） 安裝mockjs和axios：
2）建立mock.js檔案（以與main.js同級為例子）
3）main.js中引用mock.js
4）頁面中傳送axios請求，獲取資料
在做前後分離的專案時候，比如製作VUE專案，很多時候後端沒有提供介面，前端人員可以自己透過mock來造一個介面，返回資料
操作步驟
1） 安裝mockjs和axios：
npm install mockjs -S npm install axios -S （用於頁面呼叫介面資料）
2）建立 mock.js 檔案（以與main.js同級為例子）
var Mock = require(‘mockjs’) Mock.mock(“/getNewsList”, () => { return [1,12,3,5,4,45,“nihao”]; })
3）main.js 中引用 mock.js
require(“./mock.js”)
or
import “./mock.js”
4）頁面中傳送 axios 請求，獲取資料
import axios from “axios” export default { mounted() { axios.get(“/getNewsList”).then(res => { console.log(res) }) } }
mock/index.js 程式碼
//mock/index.js import Mock from 'mockjs' //引入mockjs，npm已安裝 import { Random,toJSONSchema } from 'mockjs' // 引入random物件,隨機生成資料的物件，（與佔位符@一樣） Mock.setup({ timeout:500 //設定請求延時時間 }) const produceData = function (opt) { console.log("opt",opt); let articles = []; for(let i=0;i<10;i++){ let newArticleObject = { title:Random.csentence(5,30), thumbnail_pic_s:Random.dataImage('100x50','zjcopy.com'), date:Random.date()+''+Random.time(), email:Random.email(), name:Random.cname() } articles.push(newArticleObject) } return { data:articles } } Mock.mock('/name',/post|get/i,produceData)//當post 或者get 請求到news路由時MOCK會攔截請求並返回
home.vue程式碼
<template>
<div class="home">
<template>
<el-table
:data="tableData"
style="width: 100%">
<el-table-column
prop="date"
label="日期"
width="180">
</el-table-column>
<el-table-column
prop="name"
label="姓名"
width="180">
</el-table-column>
<el-table-column
prop="email"
label="地址">
</el-table-column>
<el-table-column
prop="title"
label="標題">
</el-table-column>
<el-table-column
prop="title"
label="圖片">
<template slot-scope="scope">
<el-image :src="scope.row.thumbnail_pic_s"></el-image>
</template>
</el-table-column>
</el-table>
</template>
</div>
</template>
<script>
export default {
name: 'Home',
data(){
return{
tableData:[],
}
},
mounted(){
this.getdata()
},
methods:{
getdata(){
let url="/name" //呼叫Mock介面地址
this.$request(url, {}, "GET") //使用的是封裝的axios方法
.then((res) => {
this.tableData=res.data.data
console.log(this.tableData)
})
},
}
}
</script>
專案示例地址：
https://github.com/dajianshi/vue-mock-demo
連結：https://blog.csdn.net/cuclife/article/details/131119983
=======================================
在做前端專案時，如果沒有測試資料，可以透過mock來生成模擬資料。
Mock.mock( rurl, rtype, template )記錄資料模板。當攔截到匹配 rurl 和 rtype 的 Ajax 請求時，將根據資料模板 template 生成模擬資料，並作為響應資料返回。
Mock.mock( rurl, rtype, function( options ) )記錄用於生成響應資料的函式。當攔截到匹配 rurl 和 rtype 的 Ajax 請求時，函式 function(options) 將被執行，並把執行結果作為響應資料返回。
Mock.mock( template )根據資料模板生成模擬資料。
Mock.mock( rurl, template )記錄資料模板。當攔截到匹配 rurl 的 Ajax 請求時，將根據資料模板 template 生成模擬資料，並作為響應資料返回。
Mock.mock( rurl, function( options ) )記錄用於生成響應資料的函式。當攔截到匹配 rurl 的 Ajax 請求時，函式 function(options) 將被執行，並把執行結果作為響應資料返回。
引數如下：
rurl
可選。
表示需要攔截的 URL，可以是 URL 字串或 URL 正則。例如 //domain/list.json/、‘/domian/list.json’。
rtype
可選。
表示需要攔截的 Ajax 請求型別。例如 GET、POST、PUT、DELETE 等。
template
可選。
表示資料模板，可以是物件或字串。例如 { ‘data|1-10’:[{}] }、‘@EMAIL’。
function(options)
可選。
表示用於生成響應資料的函式。
options
指向本次請求的 Ajax 選項集，含有 url、type 和 body 三個屬性，參見 XMLHttpRequest 規範。
REF
https://blog.csdn.net/Amouzy/article/details/127784302
=======================================
mock方法裡面一些引數的含義
Mock.mock( rurl?, rtype?, template|function( options ) )
rurl ： url 表示要攔截的介面，可以是絕對地址或者正規表示式
rtype：表示請求型別 get / post 等等
template|function( options ) ：處理的函式
連結：https://blog.csdn.net/qq_51357960/article/details/127285388
=======================================
一、mock解決的問題
開發時，後端還沒完成資料輸出，前端只好寫靜態模擬資料。資料太長了，將資料寫在js檔案裡，完成後挨個改url。某些邏輯複雜的程式碼，加入或去除模擬資料時得小心翼翼。想要儘可能還原真實的資料，要麼編寫更多程式碼，要麼手動修改模擬資料。特殊的格式，例如IP,隨機數，圖片，地址，需要去收集
二、mock優點
https://www.cnblogs.com/liuhaov/p/13503321.html
=======================================
=======================================