iT邦幫忙

2017 iT 邦幫忙鐵人賽
DAY 12
0
自我挑戰組

通過Node.js了解後端運作原理!系列 第 12

Day12. MVC網站框架(五)接收&處理客戶端資訊

Day4的時候,有使用了url模組來解析網址並把對應的檔案內容呈現在網頁上。
但對Web應用程式來說,還有許多需求必須被滿足,這邊先列出常用的幾個:
1.判斷請求方法
2.解析url路徑
3.解析url中的查詢字串
4.解析cookie
5.basic認證
6.解析表單資料
7.檔案的上傳處理

雖然需求可能比上面列的還多,但一切都是由基本的request事件開始再下去延展

function(req,res) {
    res.writeHead(200,{'Content-Type': 'text/html; charset=utf-8'});
    res.end();
}

requst事件會有兩個參數,一個是http.ServerRequest,一個則是http.ServerResponse,function(req,res)中的req,會記錄客服端發送請求時的一些資訊,像是url或是表單內容等。而res,則是我們用來送回資訊給瀏覽器的物件。
大概的情境是網路連接後便會發生request事件,客服端向伺服器端發送資料包(datagram),伺服器端再加以解析,找出HTTP請求的標頭。
最常見的請求方法應該是GET和POST,其它還有HEAD、DELETE、PUT與CONNECT..等。請求方法通常會用大寫置於資料包中第一行,通常類似下面的表示:

> GET /path?string=nodejs HTTP/1.1
> Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/55.0.2883.95 Safari/537.36
> HOST:127.0.0.1:3000
> Accept: */*

方法1-GET

今天是用GET方法傳送表單資料給伺服器端
先準備一個叫register.html的檔案,並寫一個簡單會員註冊的表單

<form method="GET" id="register" action="http://127.0.0.1:3000/register">
			<div class="form-group">
				<label for="userID">使用者ID</label>
				<input type="text" name="userID" id="userID" placeholder="輸入ID" class="form-control">
			</div>
			<div class="form-group">
				<label for="mobile">手機號碼</label>
				<input type="text" name="mobile" id="mobile" placeholder="輸入手機" class="form-control">
			</div>
			<button type="submit" class="btn btn-primary">確認註冊</button>
		</form>

這個form的method屬性值是用GET,並且它將會將表單資料傳到http://127.0.0.1:3000/register,那資料的形式會是以url傳遞:

http://127.0.0.1:3000/register?userID=jackson&mobile=0912xxxxxx

/register這一段叫作pathname,而?後面的userID=jackson&mobile=0912xxxxxx叫作query
所以在app.js我們要寫一些程式來解析網址,判別請求動作以及資料內容是什麼,再傳送程式處理後的結果回去。

var http = require('http');
var url = require('url');

//建立伺服器
var server = http.createServer(function(req,res){
    //url.parse會將傳入的url字串整理成物件,而第二個參數則是querystringa模組來幫忙處理(預設是false)
    var urlData = url.parse(req.url, true),
        //紀錄下pathname以便判斷之後的請求動作
        action = urlData.pathname,
        //取得query的部份,將利用在程式中
    	user = urlData.query;
    	res.writeHead(200,{'Content-Type': 'text/html; charset=utf-8'});
   if (action === "/register"){
		res.end("<h1>註冊成功!你的ID是"+user.userID+"</h1><p>會員認證碼已經發送到"+user.mobile+"</p>");   	
   }
   else{
   		res.end("<h1>哈囉~歡迎光臨My Node!</h1>")
   }

});

  server.listen(3000);
  console.log('伺服器運行中');

之後我們打指令node app將伺服器運行,並打開register.html將表單內容填好送出


上一篇
Day11. MVC網站框架(四)使用EJS樣版動態生成網頁
下一篇
Day13. MVC網站框架(五)接收&處理客戶端資訊(續)
系列文
通過Node.js了解後端運作原理!30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言