vue中 mock使用教程
生活随笔
收集整理的這篇文章主要介紹了
vue中 mock使用教程
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
//mock/index.js
import Mock from 'mockjs' //引入mockjs，npm已安裝
import { Random,toJSONSchema } from 'mockjs' // 引入random對象,隨機生成數據的對象，（與占位符@一樣）
Mock.setup({timeout:1000 //設置請求延時時間
})
const getdata = function(option){ //定義請求數據方法let datalist = [];var template = {'key|1-10': '★'}for (let i = 0; i < 20; i += 1) {const o = { //mockjs模擬隨機生成數據，生成20條
recipeId: Random.guid(),billId: Random.string(10),orgId: Random.string('number', 8, 10),Date:Random.date('yyyy-MM-dd'),time:Random.time('A HH:mm:ss'),adress:Random.county(),viewName: Random.cword(4, 16), // 隨機生成任意名稱
personName:toJSONSchema(template) ,reason: Random.csentence(10, 32),}datalist.push(o)}return{data:datalist}
}const produceData = function (opt) {console.log("opt",opt);let articles = [];for(let i=0;i<30;i++){let newArticleObject = {title:Random.csentence(5,30),thumbnail_pic_s:Random.dataImage('200x100','Mock.js'),author_name:Random.range(10),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會攔截請求并返回
Mock.mock('/user', /post|get/i,getdata) //調用模擬數據方法
?
?
?
轉載于:https://www.cnblogs.com/caoruichun/p/9506609.html
總結
以上是生活随笔為你收集整理的vue中 mock使用教程的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： windows10 CTCP
- 下一篇： 对类Vue的MVVM前端库的实现