node.js - express #2 - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

node.js - express #2

node.js express.js

pyk 2017-04-20 09:06:46 ‧ 30341 瀏覽

分享至

在上篇文章做了一個很簡單的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號碼試試

嘗試看看你剛剛輸入的規則

如果輸入沒有寫到的規則就會進入 app.get('*', ...

以上都只是簡單的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檔所在的位置

執行畫面如下