vscode套件Rest Client搭配JSON-Server簡單使用小記

2018-09-25 177 words One minute

Contents

最近vscode挖到Rest Client套件
這個有點類似postman
可以直接簡單做Server溝通
簡單測試外，感覺還可以順便寫文件XD
但功能好像有點多，所以我就沒玩很深入

JSON-Server

首先可以先裝JSON-Server

1

npm install -g json-server

設定db.json(注意:一定要xxx.json)

1
2
3


{
    "posts":[]
}

存檔

1

json-server db.json

簡單就架好一個Restful 測試Server XD
想說要模擬分頁、搜尋沒辦法做到
結果一看他的文件
竟然可以做到typicode/json-server: Get a full fake REST API with zero coding in less than 30 seconds (seriously) #paginate
最近要練VueJS
剛好可以用這個練習

NOTE 2018/09/26
json-server db.json --static .可設定index.html可以直接連http://localhost/index.html

REST Client

###用來當分格線

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42


###
# 取得資料
GET http://localhost:3000/posts


# Content-Type 可以參考
# [四种常见的 POST 提交数据方式 | JerryQu 的小站](https://imququ.com/post/four-ways-to-post-data-in-http.html)
### 新增資料

POST http://localhost:3000/posts  HTTP/1.1
Content-Type: application/x-www-form-urlencoded

test=2&a=1


#  傳JSON，一定要加content-type: application/json 一定要填寫，不然會錯
###
# 新增資料
POST http://localhost:3000/posts  HTTP/1.1
content-type: application/json

{
    "test" : 2
}

###
# PUT 更新資料
PUT http://localhost:3000/posts/1  HTTP/1.1
content-type: application/json

{
    "test2" : "3"
}

###
# DELETE 刪除資料
DELETE http://localhost:3000/posts/1  HTTP/1.1
content-type: application/json

{
    "test2" : "3"
}

Huachao/vscode-restclient: REST Client Extension for Visual Studio Code
功能真的太多了…

範例檔案