iT邦幫忙

1

node.js - express #2

pyk 2017-04-20 09:06:4626679 瀏覽

在上篇文章做了一個很簡單的server
他會顯示出 Hello World

var express = require('express'); //call express來用
var app = express();

app.get('/', function (req, res) {
   res.send('Hello World');
});

var server = app.listen(8081, function () {

  var host = server.address().address;
  var port = server.address().port;

  console.log("Example app listening at http://%s:%s", host, port);

});

那接下來就要開始設定路由(Route)了
路由就像是地址一樣,你進到了帝寶之後想要找3F305號房的林先生,
地址就會是 帝寶/3F/305/林先生 這樣,
這只是粗淺的概念,所以我們現在要來設定路由的規定,
不同的網址會呈現不同的畫面


第二個應用:簡單的路由規則

 var express = require('express');
 var app = express();
 app.get('/', function(req, res) {
     res.send('Hello World');
 });
 app.get('/me', function(req, res) {
     res.send('我是pyk');
 });
 //:<variable name>? 可以放入變數
 app.get('/who/:name?', function(req, res) {
     var name = req.params.name;
     res.send('名字: ' + name);
 });
 app.get('/who/:name?/:age?', function(req, res) {
     var name = req.params.name;
     var age = req.params.age;
     res.send('名字: ' + name + ' ' + age + '歲');
 });
 //*代表出現錯誤(上面沒有的規則)
 app.get('*', function(req, res) {
     res.send('還沒有設定哦');
 });
 var server = app.listen(8082, function() {
     console.log('Listening on port 8082');
 });

: 和 :? 的差別在於多了 "?" 代表可以選填(可以不要有這個參數)
基於資安考量,現實不太適合使用這樣的方法。

app.all

代表所有的HTTP請求(request)都要經過它,之後再用next給下個中間件(middleware)處理。

app.get

則是指有GET的HTTP請求才會經過,因為沒有next(),只要執行完就不會在調用下個中間件了。

除了get方法以外,Express還提供post、put、delete方法,即HTTP動詞都是Express的方法。

如果出現 throw er Unhandled error event 多半是那個port有應用程式正在使用
可以換一個port號碼試試

嘗試看看你剛剛輸入的規則
http://ithelp.ithome.com.tw/upload/images/20170420/20105154ssuc6RykzG.png
如果輸入沒有寫到的規則就會進入 app.get('*', ...
http://ithelp.ithome.com.tw/upload/images/20170420/20105154fpKrcrq9qI.png

以上都只是簡單的response給HTML,下一步要做的是根據網址轉到不同的頁面
首先先建立 index.html 和 about.html,內容是什麼都可以

index.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>index</title>
</head>
<body>
	<h1>This is 'index' page</h1>
</body>
</html>

about.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>about</title>
</head>
<body>
	<h1>This is 'about' page</h1>
</body>
</html>

修改原本的server.js檔案

 var express = require('express');
 var app = express();
 app.get('/', function(req, res) {
     res.sendfile('./views/index.html');
 });
 app.get('/about', function(req, res) {
     res.sendfile('./views/about.html');
 });

 app.get('*', function(req, res) {
     res.send('404 not found');
 });
 var server = app.listen(8082, function() {
     console.log('Listening on port 8082');
 });

把原本的send() 改成sendfile() 加上HTML檔所在的位置

執行畫面如下
http://ithelp.ithome.com.tw/upload/images/20170420/20105154fFrTnJ1idI.png

http://ithelp.ithome.com.tw/upload/images/20170420/20105154459c00ScSG.png

這樣就完成了一個簡易的路由了


尚未有邦友留言

立即登入留言