---
# System prepended metadata

title: Web企業運算_Week5_許家維

---

# Web企業運算_Week5_許家維
## 學習清單
1.理解Node.js Server 原理
2.履歷練習 : https://jacky030hsu.github.io/myweb/
3.技術文章 : https://ithelp.ithome.com.tw/articles/10191355
4.本篇文章網址 : https://hackmd.io/5fCRJwWaQheIYkqSKFRgAQ?both

## Code

* **Router 程式碼**
```
var express = require('express');
var app = express();
// process : node內的一個全局變量，process.env 設置環境變量
var port = process.env.PORT || 8080;
// 將路由定義成模組
var router = express.Router();

router.use(function(req, res, next) {
    console.log(req.method, req.url);
    next();
});

router.get('/', function(req, res) {
    res.send('首頁');
});

router.get('/about', function(req, res) {
    res.send('關於家維');
});

// 回應使用者輸入的name
router.get('/name/:name', function(req, res) {
    res.send('user name is ' + req.params.name + '!');
});

app.use('/', router);
app.listen(port);
console.log('連線成功 ' + port);
```
* **利用Express-gererator 配合過去練習，利用Pug建立頁面**

![](https://i.imgur.com/mnt52iY.jpg)


## 成果
### Express
* Node下的應用框架，幫助創建Web應用與Http工具，快速創建一個完整網站
* 基本指令
    * **$ npm init** - 在資料夾內建立package.json檔，設定版本資訊等等..
    * **$ npm install express --save** - 將 Express 安裝在目錄中，並**儲存在相依關係清單中**
    * 如果指定了 --save ，則會**將這些模組新增至 package.json 檔中的 dependencies 清單**。之後當您在目錄中執行 npm install 時，就會自動安裝相依關係清單中的模組
* Router 路由
    * 是指**判斷應用程式如何回應用戶端對特定端點的要求**，而這個特定端點是一個 URL（或路徑）與一個特定的 HTTP 要求方法（GET、POST 等）
    * 路由定義 app.METHOD(PATH, HANDLER)
        * METHOD : HTTP 要求方法
        * PATH = 伺服器上的路徑
        * HANDLER = 路由相符時要執行的函數
* Jade(後應版權問題改名Pug)
    * 是一款 base on Node.js的模板引擎
    * Pug寫法簡要
    ```
    #buylist
      h1 資管租書網 書籍清單
      .buy_item.control_panel
        label 書本名
        input#input_name(placeholder="欲新增書本名稱...")
        labe1 價錢
        input#input_price(placeholder="欲新增書本價格...")
        span.addbtn +新增
      #item_list
    ```
* EJS(Embedded JavaScript templating)
    * 可以當作 HTML 的擴充版。以下展示 EJS 處理 if 判斷，轉成 HTML 的結果
    ```
    <%
      var user = {
        name: 'how bro',
        age: 30
      }
    %>
    <% if (user) { %>
      <h2><%= user.name %></h2>
    <% } %>
    ```
    轉為HTML的結果
    ```
    <h2>how bro</h2>
    ```
* **SPA**（Single Page Application）
    * 僅有一個頁面的應用程式，也就是說網頁不需跳轉頁面就可以達到基本的建立、讀取、修改、刪除資料功能。
    * 參考網站 : https://medium.com/@mybaseball52/%E5%96%AE%E4%B8%80%E9%A0%81%E9%9D%A2%E6%87%89%E7%94%A8%E7%A8%8B%E5%BC%8F-c98c8a17081
* **MVC** ( Model View Controller )
    * 控制器（Controller）- 處理控制流程和回應，以路由傳遞資料為主
    * 視圖（View） - 前端畫面與邏輯顯示
    * 模型（Model） - 後端資料庫進行運作
    * MVC架構圖 
    ![](https://i.imgur.com/HdVa9HE.png)
* **全域安裝 VS 本地安裝**
    * **全域安裝後可以在命令列(command line)使用**
    * 本地安裝後可以通過require()的方式引入項目中node_modules目錄下的模塊
    * 參考文章 : https://www.jianshu.com/p/e839326ce30d
* 程式碼解析
    * $ mkdir myapp // 建立myapp這個目錄
    * $ cd myapp // 移動到這個目錄內
    * (Terminal) npm init 初始化npm
        * 輸入後，會被要求輸入幾個欄位
        1. package name: 你這個 Project 要叫什麼名字
        1. version: 你決定這個 Project 現在該是第幾版
        1. description: Project 基本介紹
        1. entry point: 進入點，如果要跑你的 Project 應該要執行哪個檔案
        1. author: 作者(自己)
        1. license: 你這個 Project 是採用什麼授權的
        1. test command: 這個不太重要，待會會說明
    * $npm install express –save // Local install
    * $npm install express // Global install
    * 建立Server
    ```
    <!--   引入express模組   -->
    var express = require('express');
    var app = express();
    
    <!--   設定伺服器上的路經與回傳參數   -->
    app.get('/', function (req, res) {
        res.send('Hello World');
    })
    <!--   設定port位置，本範例使用8081port  -->
    <!--   設定完畢後，即可使用127.0.0.1:8081進入頁面  -->
    var server = app.listen(8081, “localhost”,function () {
    var host = server.address().address
    var port = server.address().port
    console.log("Example app listening at http://%s:%s", host, port)
    })
    ```
    * 如果現行中介軟體函數不會結束要求/回應循環，它必須呼叫 next()，以便將控制權傳遞給下一個中介軟體函數。否則，要求將會停擺。
    ```
    // 本例利用next進行404回報，利用err參數進行錯誤處理
    app.use(function(err, req, res, next) {
        console.error(err.stack);
        res.status(404).send('Sorry cant find that!');
    });
    ```
* Status 狀態表
    * 1xx Informational 參考資訊
    * 2xx Successful 成功
        * 200 OK - 代表請求成功。
    * 3xx Redirection 重新導向
        * 302 Found - 代表目標資源 (target resource) 暫時存在於不同的 URI
    * 4xx Client Error 用戶端錯誤
        * 404 Not Found - 找不到
    * 5xx Server Error 伺服器錯誤
        * 500 Internal Server Error - 內部伺服器錯誤

* HTTP Request 主要方法
    * **GET** : 此方法只能向指定的資源要求取得資料，並不會更動到內部資源
    * **POST** : 向指定的資源提交資料
    * PUT : 向指定資源位置提交更新內容
    * DELETE : 向指定資源位置請求刪除內容

* Express 應用程式產生
    * 參考文章 : https://ithelp.ithome.com.tw/articles/10198117
    * npm install express-generator –g  安裝套件
    **express-generator : 建立web app架構**
    * express –h  顯示指令選項(在cmd中使用)
    * express myapp 建立應用程式要放的資料夾myapp
    * cd myapp 移動到該資料夾內
    * npm install 在此資料夾內安裝
    * set DEBUG=myapp:* & npm start 設定需要顯示的debug方式並啟動app
    * **啟動也可使用預設路徑 node ./bin/www 開啟**
    * 模組內容
        * bin/www : 整個程式的進入點
        * app.js : body-parser、morgan 以及 router 都寫在 app.js 中被 www 啟動時所 import 進去
        * 前端畫面是 public 與 views 這兩個資料夾管理
        * 


## 心得
這個禮拜課堂上學習了Express的安裝以及利用Express框架快速開發一個網站。過去沒有利用框架開發的經驗，所以花了蠻多時間去理解整個框架，我覺得框架方便的是你可以省下一些建立環境的時間(網址等等框架都幫你搞定了)，但也相對的可能會有一些限制。這次僅僅寫一個簡單的畫面來顯示在前端，未來如果有機會的話，希望可以利用Express框架製作一個包含一些後端的專案。

