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
=======================================
=======================================