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

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/249676.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/249676.shtml
英文地址,請注明出處:http://en.pswp.cn/news/249676.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

前端開發掌握nginx常用功能之rewrite

上一篇博文對nginx最常用功能的server及location的匹配規則進行了講解&#xff0c;這也是nginx實現控制訪問和反向代理的基礎。掌握請求的匹配規則算是對nginx有了入門&#xff0c;但是這些往往還是不能滿足實際的需求場景&#xff0c;例如請求url重寫、重定向等等&#xff0c;…

vue2.0腳手架的webpack 配置文件分析

前言 作為 Vue 的使用者我們對于 vue-cli 都很熟悉&#xff0c;但是對它的 webpack 配置我們可能關注甚少&#xff0c;今天我們為大家帶來 vue-cli#2.0 的 webpack 配置分析 vue-cli 的簡介、安裝我們不在這里贅述&#xff0c;對它還不熟悉的同學可以直接訪問 vue-cli 查看 …

一個可供中小團隊參考的微服務架構技術棧

一個可供中小團隊參考的微服務架構技術棧

WinSxS文件夾瘦身

WinSxS文件夾瘦身2014-5-8 18:03:32來源&#xff1a;IT之家作者&#xff1a;阿象責編&#xff1a;阿象 評論&#xff1a;27剛剛&#xff0c;我們分享了如何用DISM管理工具查看Win8.1 WinSxS文件夾實際大小。對于WinSxS文件夾&#xff0c;幾乎每個Windows愛好者都認識到其重要性…

bcrypt的簡單使用

前段時間在搗鼓個人項目的時候用到了nodejs做服務端&#xff0c;發現使用加密的方法和之前常用的加密方式不太一致&#xff0c;下面以demo的形式總結一下bcrypt對密碼進行加密的方法。 一、簡介 Bcrypt簡介&#xff1a; bcrypt是一種跨平臺的文件加密工具。bcrypt 使用的是布…

盒子居中

1、未脫標 margin&#xff1a;0 auto&#xff1b; 2、脫標&#xff08;absolute、fixed&#xff09; left&#xff1a;50%&#xff1b; margin-left&#xff1a;width/2&#xff1b; 轉載于:https://www.cnblogs.com/liujianing/p/10356984.html

織夢無子欄目時禁止調用同級欄目

1. 修改文件 \include\taglib\channel.lib.php 把代碼 if($typeson && $reid!0 && $totalRow0) 改為 if($typeson && $reid!0 && $totalRow0 && $noself) 2. 使用channel標簽時添加noself屬性 {dede:channel noselfyes} {/dede:channe…

nodejs實現文件上傳

前段時間在做個人項目的時候&#xff0c;用到了nodejs服務端上傳文件&#xff0c;現在回頭把這個小結一下&#xff0c;作為記錄。 本人上傳文件時是基于express的multiparty&#xff0c;當然也可以使用connect-multiparty中間件實現&#xff0c;但官方似乎不推薦使用connect-m…

python騰訊語音合成

一、騰訊語音合成介紹 騰訊云語音合成技術&#xff08;TTS&#xff09;可以將任意文本轉化為語音&#xff0c;實現讓機器和應用張口說話。 騰訊TTS技術可以應用到很多場景&#xff0c;比如&#xff0c;移動APP語音播報新聞&#xff1b;智能設備語音提醒&#xff1b;依靠網上現有…

鉤子函數和回調函數的區別

一般認為&#xff0c;鉤子函數就是回調函數的一種&#xff0c;其實還是有差異的&#xff0c;差異地方就是&#xff1a;觸發的時機不同。 先說鉤子函數&#xff1a; 鉤子&#xff08;Hook&#xff09;概念源于Windows的消息處理機制&#xff0c;通過設置鉤子&#xff0c;應用程…

【bzoj4712】洪水

Portal --> bzoj4712 Description 給你一棵樹&#xff0c;節點從\(1\)到\(n\)編號&#xff0c;每個節點有一個權值&#xff0c;有若干次操作&#xff0c;操作有以下兩種&#xff1a; \((C,x,delta)\)&#xff1a;將編號為\(x\)的點的權值改為\(delta\) \((Q,x)\)&#xff1a…

[USACO]地震 (二分答案+最優比率生成樹詳解)

題面&#xff1a;[USACO 2001 OPEN]地震 題目描述&#xff1a; 一場地震把約翰家的牧場摧毀了&#xff0c; 堅強的約翰決心重建家園。 約翰已經重建了N個牧場&#xff0c;現在他希望能修建一些道路把它們連接起來。研究地形之后&#xff0c;約翰發現可供修建的道路有M條。碰巧的…

HTTP協議學習筆記

1.HTTP協議簡介 &#xff08;1&#xff09;客戶端連上web服務器后&#xff0c;若想獲得web服務器中的某個web資源&#xff0c;需遵守一定的通訊格式&#xff0c;HTTP協議用于定義客戶端與web服務器通迅的格式。 &#xff08;2&#xff09;HTTP是hypertext transfer protocol&…

defer和async的原理與區別

上一篇剛轉載了一篇有關于網站性能優化的文章&#xff0c;其中提及到了頁面的加載和渲染的過程&#xff0c;提到了defer和async的相關區別&#xff0c;但是本人在此之前并沒有深究其中的區別。 defer和async是script標簽的兩個屬性&#xff0c;用于在不阻塞頁面文檔解析的前提…

一些奇妙的線段樹操作

學過數據結構和會做題完全是兩個概念orz 各種各樣的題目都應該見識一下 簡單的目錄&#xff1a; 最大連續長度 吉司機線段樹 線段樹合并/分裂 最大連續長度問題 典型題目&#xff1a;HDU 3911 &#xff08;$Black$ $And$ $White$&#xff09; 題目大意&#xff1a;有一個長度為…

微服務實踐沙龍-上海站

微服務的概念最早由Martin Fowler與James Lewis于2014年共同提出&#xff0c;核心思想是圍繞業務能力組織服務&#xff0c;各個微服務可被獨立部署&#xff0c;服務間是松耦合的關系&#xff0c;以及數據和治理的去中心化管理。微服務能夠幫助企業應對業務復雜、頻繁更新以及團…

Spring的refresh()方法調用過程

Spring的refresh()方法調用過程 refresh()是Spring中比較核心的方法&#xff0c;Spring所有的初始化都在這個方法中完成 具體代碼如下 public void refresh() throws BeansException, IllegalStateException {synchronized (this.startupShutdownMonitor) {// Prepare this co…

Web數據存儲之localStorage和sessionStorage

Web數據存儲之localStorage和sessionStorage 學習前端以來&#xff0c;自己了解有localStorage和sessionStorage的相關存儲的知識&#xff0c;也有實踐過&#xff0c;但是之前只限于能用的基礎上&#xff0c;但最近看了一本書&#xff0c;深入了解了localStorage和sessionStor…