iT邦幫忙

2022 iThome 鐵人賽

DAY 20
0
Modern Web

用Node.js建立專屬於你的API吧系列 第 20

Day20 - POST 簡單應用

  • 分享至 

  • xImage
  •  

前情提要

在設計 API 時,POST 東西時也會想要看一下到底新增了什麼,但如果沒有對應的套件,回傳回來看到的只會是 undefiend,因此今天要來分享 Post 的簡單應用和需要用到的套件。

簡單應用

  1. 在 routerStarsign.js 中,使用 HTTP Method 的 POST。

    router.post('/', (req, res) => {
        console.log(req.body);
    };
    
  2. 接著到 Postman 的網站上把你的網址(http://localhost:3000/starsign)放進去並選取 POST。

  3. 在網址下面有一列東西可以讓你選,選取 Body -> raw -> JSON。
    https://ithelp.ithome.com.tw/upload/images/20220911/20151565tYtnSQRi8R.png

  4. 之後在下面打以下的東西,這邊是在打說要輸入什麼資料進去。

    {
        "starsign": "Canser",
        "startDate": "6月22日",
        "endDate": "7月22日"
    }
    
  5. 按下旁邊的『 Send 』後,回到程式碼那邊會在你終端機那邊看到有回傳東西,但是是 undefined。
    https://ithelp.ithome.com.tw/upload/images/20220911/20151565AB8rc5gMPm.png

  6. 會發生此問題是因為終端機這邊不知道那是什麼資料,因此就需要下載一個套件叫做『 body-parser 』,輸入 npm install body-parser 即可,他的功用在於幫你翻譯傳進來的資料,以免發生 undefined 的問題。

  7. 把 body-parser 引進進來,並使用 app.use。

    const bodyParser = require('body-parser');
    
    app.use(bodyParser.json());
    
  8. 之後在 send 一次後就大功告成啦!
    https://ithelp.ithome.com.tw/upload/images/20220911/20151565lqWL3XnssT.png

程式碼講解

  1. 這邊要注意,你 app.use(bodyParser.json()) 的位置要記得在 app.use('/starsign', routerStarsign) 前面,因為 app.use() 的使用有前後順序,因此如果把翻譯的放在輸出後面,會導致輸出出來了,但因為順序還沒到翻譯而因此變成 undefined。

上一篇
Day19 - Postman 介紹
下一篇
Day21 - POST 應用
系列文
用Node.js建立專屬於你的API吧30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言