程式狂想筆記

一個攻城師奮鬥史

0%

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

最近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
功能真的太多了…

範例檔案