iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 27
0
Modern Web

網站前端後端與API系列 第 27

API中的GET與POST-3

  • 分享至 

  • xImage
  •  

我們現在試著帶參數,用法是

?參數名=參數值

試著在瀏覽器輸入

http://localhost:3000/getparams?id=123

頁面出現“這是id=123時的頁面123”
Terminal顯示

123
GET /getparams?id=123 200 0.667 ms - -

表示我們輸入的網址,滿足if內的要求,回應對應參數的內容了。

GET是一個滿常用的API溝通方式,而我們的主題-API是Application Programming Interface的縮寫,原意就是應用程式介面。在我們的案例來說,API就是建立前後端溝通的橋樑,後端我們寫好一些端口,準備好當伺服器啟動之後,前面的人丟GET到指定路徑,我們可以收到後給予對應的應對,這樣就是一隻完整的API。而進階的API設計,會包含邏輯檢查、資料庫設計......等部分,是可以深耕的領域,有興趣的朋友可以深入研究。

而我們介紹的API形式屬於RESTful的架構,GET與POST是最常使用的方式,對於RESTful API的介紹,個人覺得這篇文章有做良好的資料整理,我們可以參考:
https://dotblogs.com.tw/jeffyang/2018/04/21/233001

那明天,我們就來認識POST這項溝通方式吧!

附上完整index.js程式碼

var express = require('express');
var router = express.Router();

/* GET home page. */
router.get('/', function(req, res, next) {
  res.render('index', { 
  	title: 'Express',
  	haha: '哈哈',
  	ironMan30: '30天鐵人賽',
  	theTweenty: '第20天'
  });
});

/* 增加新的router位置 */
router.get('/30days', function(req, res, next) {
  res.render('index2', { 
  	title: 'Express',
  	haha: '哈哈',
  	ironMan30: '30天鐵人賽',
  	theTweenty: '第20天'
  });
});

router.get('/downloadimg', function(req, res, next) {
	res.download('public/images/12321.png')
})

/* 增加新的router,用GET帶參數 */
router.get('/getparams', function(req, res, next) {
  var idFromBrowser = req.query.id;
  if (idFromBrowser == "123"){
    console.log(idFromBrowser);
  	res.send('這是id=123時的頁面'+idFromBrowser);
  }else{
    console.log(idFromBrowser);
    res.send('這是其他的頁面'+idFromBrowser);	
  }
});

module.exports = router;


上一篇
API中的GET與POST-2
下一篇
API中的GET與POST-4
系列文
網站前端後端與API30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言