iT邦幫忙

第 12 屆 iT 邦幫忙鐵人賽

DAY 28
0
Modern Web

到底要怎麼開始開發網站? --- 從入門到使用Vue, Firebase製作老闆交代的網站系列 第 28

【D28 - 用Vue實作網頁】postman是哪個男人?要怎麼用他(羞)!?

postman 不是人而是一個software,專門拿來測試API~ 我曾經在這裡【D19 - 用Vue實作網頁】請GET我然後POST我出去吧!講到API的概念,這邊就教各位要怎麼樣去查看API是否成功發送到我們要的位置!

先安裝辣個男人

我們先到postman官網下載下來postman~

打開來之後你會看到
https://ithelp.ithome.com.tw/upload/images/20200928/201297300s0f7aMBRI.jpg


環境介紹

A: 操作區

我們在這個地方可以新增collection, request的工具,上面也有Import,讓你用json的格式import測試資料,或著是runner: 跑遍你的collection

這邊有一個點就是collection就是folder的概念,我們可以在這裡面有效的去分層跟管理每一隻API

B: 環境 + 網址

這裡你可以看到右上角有一個no environment,我們可以點選眼睛然後去設置一些常用的environment,例如有些API要帳號密碼(token)那這邊也可以先設定好,根據昨天Git Flow的例子我通常也會設定三個environment

  • localhost: 就是當你run serve時他上面的port跟網址位置 (應該都是127.0.0.1:...)
  • dev: 這就是測試版的,讓公司測試工程師跑測資的位置
  • master: 最後發佈的產品,拿來看看有沒有一些user遇到的問題需要開hotfix趕緊修復


網址的地方我們可以放在你看到的GET旁邊,你把GET往下拉之後會看到有很多POST/ PUT/ DELETE...還有很多這輩子不太會用到的XD,這個網址就會是你的serve跑的位置:

C: 參數

在我們發送API,不論是GET或是POST等等都可以搭配一些參數送出去,例如POST:
假設我們要把一個blog增加到現有的列表,我們如果是用post的方式,我們就要body這裡設定我們要送的資料名稱跟值,像是這樣: (等等會細細解釋)
https://ithelp.ithome.com.tw/upload/images/20200928/20129730THGdfuUF2a.jpg


這邊也可以注意到Header,每一隻API不只包含了你的資料本身,他同時也包含了所有關於這支API的資訊,而這些資訊就會放在Header裡面,例如我們如果想要接受到英文的資料,我們就可以在header設定語言

D: 回應

那當我們今天都設定好參數、網址、格式、內容就可以按下Send,這時候就是幾家歡喜幾家愁的時候了!!如果你的程式碼有問題,或著是server出錯等等都有可能會得到error(在右上角的位置),常見的回應有幾種
https://ithelp.ithome.com.tw/upload/images/20200928/20129730kqElobYn1n.jpg

  • 200: 恭喜你成功取得回應!!他會回傳一個server response給你
  • 201: 成功建立完成 (POST)
  • 400: 參數錯誤,可能輸入的格式不符
  • 401: 這隻API需要經過認證(在authentication那裏要設定)
  • 404: 找不到網址位置QQ
  • 500: server出錯了(如果是自己寫的server那就可能是你的code有問題喔!!)

動手來測試API

我們之前很早的時候有用一個網路上的JSON資料來當作blog post的資料來源:
http://jsonplaceholder.typicode.com/posts ,那我們今天就拿它來做測試吧!!

創一個collection

左上角有一個 New,點選之後就可以創立collection~ 創完之後點選collection然後按Add Request
https://ithelp.ithome.com.tw/upload/images/20200928/201297309vXp943ozm.jpg

先來測試GET

我們先到GET這支request,把上面剛剛那個網址放到網址欄 (GET右邊),因為是GET又沒有甚麼限制就不需要去動parameter了,按下Send
https://ithelp.ithome.com.tw/upload/images/20200928/20129730F0pv10OTUf.jpg

你就會得到200!!然後拿到一連串的資料,這邊資料格式通常都是以JSON格式呈現喔~
https://ithelp.ithome.com.tw/upload/images/20200928/201297304cGk3V77bf.jpg

再來試試看POST

進到另外一隻新的API叫做blogPost,我們要先把GET改成POST,然後網址跟剛剛那個一樣

接下來我們既然是POST,勢必就要把一些資料真的夾進API裡面,所以請點選

  1. Body
  2. none的下拉選單選raw
  3. Text下拉選單選JSON
    接下來就在裡面打上你要送上去的資料,那我們就照著GET下來的attributes打上去
{
    "userId": 20,
    "title": "laboriosam dolor voluptates",
    "body": "doloremque ex facilis sit sint culpa\nsoluta assumenda eligendi non ut eius\nsequi ducimus vel quasi\nveritatis est dolores"
  }

這邊的id不需要去設定,因為id是會自動生成的(他會看目前的資料數量,去給定一個特定且不重複的id,我們稱之為primary key)

https://ithelp.ithome.com.tw/upload/images/20200928/201297302fGlFbSQMz.jpg

然後就可以按下Send!! 他就會給你一個201~恭喜你成功created
https://ithelp.ithome.com.tw/upload/images/20200928/201297306Y75A00vAh.jpg


後記

今天就講到這邊,由於我們這次沒有建立自己的server,在前端也比較少有到post/ get (在一開始的專案有,後來就交給firebase大大了XD),這邊都可以自己測試一下例如PUT或是DELETE等等,或甚至可以看看他的parameter要怎麼完,header要怎麼改~


上一篇
【D27 主委加碼】Git講完了那GitFlow又是甚麼啦?
下一篇
【D29 - 用Vue實作網頁】佈署你的專案,分享給朋友你的第一個網站!!
系列文
到底要怎麼開始開發網站? --- 從入門到使用Vue, Firebase製作老闆交代的網站30

尚未有邦友留言

立即登入留言