# 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建立頁面**


## 成果
### 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架構圖
* **全域安裝 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框架製作一個包含一些後端的專案。