前端脫離後端一[模擬後端接口Mockoon]

使用 Mockoon 軟件製造接口

文檔教程

文獻資料

api

您能夠保留它並今後處構建，也能夠建立一個新的。要建立新的模擬API，請打開左側的可摺疊環境菜單，而後按藍色的「加號」按鈕,好比以前的接口端口3001,而後新建一個爲3002

重命名環境

建立一個接口

模擬請求延遲的時間

設置請求頭

打開環境設置

勾選複選框啓用CORS選項。若是環境名稱旁邊顯示藍色盾牌，則表示該選項已成功激活。

將CORS標頭添加到環境連接將相同的CORS標頭添加到模擬API

設置 HTTPS模式

環境設置

HTTPS選項

從新啓動環境就能生效

修改請求的狀態和規則

添加請求的狀態和返回字段

設置請求的規則

or 或者 , and 且

當設置隨便返回的時候,規則將忽略

代理

這是是本地的照片到時候改改

咱們就能夠直接先開啓代理，而後把代碼的代理改爲這個就能夠啦

模板化

讓數據動起來

https://mockoon.com/docs/latest/templating/

小鬍子語法

https://handlebarsjs.com/

Faker.js

{{faker 'address.cityPrefix'}}
參數的狀況
{{faker 'random.number' 100}}

random

字母數字  長度
"{{faker 'random.alphaNumeric' 10}}"
boolean
{{faker 'random.boolean'}}
圖片
"{{faker 'random.image'}}"
環境
 "{{faker 'random.locale'}}"
number
參數最大值 0-最大值
{{faker 'random.number' 10}}
返回一堆字符串的的單個值
"{{faker 'random.objectElement' 'xxxx' }}"
uuid
 "{{faker 'random.uuid' }}"
單詞
 "{{faker 'random.word'}}"
單詞 幾個長度,默認1,3之間
"{{faker 'random.words'}}"
// 傳參10個單詞
 "{{faker 'random.words' 10}}"

commerce

價格
						// min max 小數點位數  前面的字符串
 "{{faker 'commerce.price' 10 20 4 'xxx'}}"

dummy-json

https://github.com/webroo/dummy-json

repeat

repeat 重複區域的值用於數組,會自動逗號隔開

{
 "messages": [
     //10個
  {{#repeat 10}}
  "hello"
  {{/repeat}}
   // 1-10
  {{#repeat 10 comma}}
  "hello"
  {{/repeat}}
   //第一個參數min 第二個參數max
  {{#repeat 5 8}}
   "hello"
   {{/repeat}}
   // 變量
   // @index:number 索引 @first:Boolean 第一個  @last:Boolean 最後一個 @total:number 長度
   {{#repeat 10}}
   //       number      boolean    boolean    長度number
   "hello-{{@index}}-{{@first}}--{{@last}}-{{@total}}"
   {{/repeat}}
]   
}
居然能夠這樣傳參
  {{#repeat (body 'A')}}

隨着分鐘變化的數組

{
  "count":{{now 'mm'}},
  "arr":[
  {{#repeat (now 'mm')}}
  {
    "test": "EMAIL_{{@index}}", 
    "status": true,
  }
  {{/ repeat }}
],

}

數字

整數
{{int 100 200}}
小數
{{float 10 20}}

時間

//		開始   結束      格式化
{{date '2010' '2015' 'YYYY-MM-dd HH:mm:ss'}}
//  默認返回Date 類型
    {{date '2010' '2015'}}
小時
 "{{time '09:00' '17:00'}}"
看了issues
"{{ date '2020' '2021' 'yyyy-MM-dd\'T\'HH:mm:ss.SSS\'Z\'' }}"
原來模板內部能夠 \'T\' 這樣進行拼接

雜七雜八

// 隨機boolean
{{boolean}}  
隨機標題前綴
{{title}}
名稱
{{firstName}}
{{lastName}}
公司
{{company}}
域名
{{domain}}
頂級域名
{{tld}}
電子郵件
{{email}}
街
{{street}}
市
{{city}}
國家
{{country}}
郵政編碼
{{zipcode}}
郵編
{{postcode}}
郵編
{{postcode}}

緯度
{{lat}}
生成從-90到+90的隨機緯度，到6個小數位（精度約爲10cm）

經度
{{long}}
生成從-180到+180的隨機經度，到6個小數位（大約10cm的精度）

電話號碼
{{phone}}
顏色
{{color}}
十六進制顏色
"#{{hexColor}}"

32位GUID
{{guid}}

IPv4地址
{{ipv4}}

IPv6地址
{{ipv6}}
單詞
{{lorem}}

導入/導出數據

看官網當時沒理解意思,後面發現其實就是更新軟件或者換電腦什麼的,用處就是把當前環境拷貝一份

模擬助手

參入參數的數組中一個隨機項
 "{{oneOf (array 'a' 'b' 'c')}}"
傳入參數的數組中返回必定返回的數組 min max
 "[{{ someOf (array 'item1' 'item2' 'item3') 0 3}}]"
測試

  "someItemsAsString": "{{ someOf (array 'item1' 'item2' 'item3') 1 2 }}",
   // "someItemsAsString": "item1,item2",   
  "someItemsAsArray": {{{ someOf (array 'item1' 'item2' 'item3') 1 2 true }}},
//  "someItemsAsArray": ["item3", "item2"],

get問好傳參過來的值

?name=xxx

"{{queryParam 'name'}}"
// 查詢到時有值,查詢不到用默認的第三個參數
"{{queryParam 'names' 'default'}}"
// 返回複雜的值用格式 `key.0.key.5.key`

post 接受

"{{body 'name'}}"

多層判斷

{{# switch (body 'id') }}
      {{# case "1" }}"John"{{/ case }}
      {{# case "2" }}"Jack"{{/ case }}
      {{# default }}"Peter"{{/ default }}
    {{/ switch}}

參數的操做,模擬分頁

post 提交的字段   {A:3}

{
  "count":{{body 'A'}},
  "arr":[
  {{#repeat (body 'A')}}
  {
    "test": "EMAIL_{{@index}}", 
    "status": true,
  }
  {{/ repeat }}
],

}
返回的參數
{
    "count": 3,
    "arr": [
        {
            "test": "EMAIL_0",
            "status": true,
        },
        {
            "test": "EMAIL_1",
            "status": true,
        },
        {
            "test": "EMAIL_2",
            "status": true,
        }
    ],
}

動態接口

cnblogs/:id/:name
返回查詢參數
{
  "arr":"{{urlParam 'id'}}",
  "name":"{{urlParam 'name'}}"
}

請求
http://localhost:3000/cnblogs/12/sex

{
    "arr": "12",
    "name": "sex"
}

動態接口的做用是爲了模擬不一樣下載功能

代碼如何生成文件

咱們思考一個文件,生成一個CSV文件

咱們先思考生成CSV文件須要哪些語法

多個值用逗號分隔,就能夠成表格的形式

咱們能夠用json寫好

firstname,lastname,countryCode
{{# repeat 10 }}
  {{ faker 'name.firstName' }},{{ faker 'name.lastName' }},{{ faker 'address.countryCode' }}
{{/ repeat}}

而後改爲csv格式就好了

動態的輸出文件

假設咱們編寫的兩個01,02.json文件

http://localhost:3000/ad/1或者2就能夠動態的切換　

api

• cookie 'cookie_name' 'default value'：獲取Cookie的內容；若是不存在Cookie，則獲取默認值。
• header 'Header-Name' 'default value'：從任何請求標頭獲取內容，若是沒有標頭，則獲取默認值。
• hostname：獲取請求主機名。
• ip：獲取請求的IP地址。
• method：獲取請求方法（GET，PUT，POST等）。
• newline：添加換行符\n。
• base64 'string'：將參數編碼爲base64
• objectId 'string' | number：建立一個有效的ObjectId。它能夠基於指定的時間（以秒爲單位）或做爲種子的12字節字符串生成ObjectId

返回當前時間

"{{now 'YYYY-MM-DD HH-mm-ss'}}"  
具體複雜的操做查詢data-fns庫format的api

一個接口匹配不一樣的內容

上傳

{
  "name":"{{body}}"
}
能夠拿到form-data 的數據,可是不能進行操做
在issues上面說不支持form-data的操做
這個也是糾結的點