上一次的課程，我們學會如何用 Node 開發老派 CLI 應用程式，很好玩吧！ 再次提醒，上次的開發過程，可是跟 `網站` `瀏覽器` `web 伺服器` 完全沒關係的喔！ 之所以這樣課程設計，是為了先幫大家脫離 `js 一定是網頁相關、一定是 html/css 相關` 的刻板印象 現在，我們回頭來碰 backend programming 開發，銜接回來 web 領域看看！ 這樣的學習順序，吸收才順暢，不會各種觀念一直搞混在一起 雖然之前的教材一直是以前端開發為主，但是我認為稍微教一點 Node.js 後端開發，對於前端工程師的能力會有很大幫助！ 上完之後，會更清楚前後端的分工，以及網頁背後的基本概念！ 別擔心，本課只會深入淺出，學習一點基本的後端觀念，不會是艱難、完整的後端課程！ 準備好的話，讓我們馬上開始吧！
## 課程目標 - 使用 node 與 express 回應 http get request ## 課程內容 在 node 中開發後端程式，通常會使用一款叫做 express 的套件 雖然不用 express 也能夠開發後端應用，但 express 提供很多現成好用功能 所以先來安裝 express 吧！ ``` npm install express ``` 建立一個資料夾，放我們每課的練習內容，這一課就叫 lesson1 吧 然後建立一個 index.js 檔案 此時資料夾會長類似這樣 ``` repo ├── package.json ├── package-lock.json ├── node_modules └── lesson1 └── index.js ``` 在 index.js 檔案放入以下內容 ``` const express = require('express'); const app = express(); app.get('/', function(req, res){ res.send('<h1>恭喜您，成功囉！</h1>'); }); app.listen(3000); ``` 然後去終端機輸入 ``` node lesson1/index.js ``` 接著打開瀏覽器，在網址輸入 ``` http://localhost:3000/ ``` 你會看到一段大大的打招呼訊息！ --- 讓我們逐行說明一下 前面兩句是載入 express 套件，然後建立主程式物件 `app.get()` 是註冊登記一個處理 `HTTP GET 請求` 第一個參數是 `要處理的網址` 第二個參數是放進一段「函式定義」代表要如何處理 函式定義通常會用 `(req, res)` 當參數，有人會寫 `(request, response)`，都可以，分別是代表 `請求` 與` 回應` 的物件 這段看不太懂沒關係，需要稍微研究一下「HTTP 協定」才會知道定義 反正就先用 `res.send` 來回應一段 html 就對了！ 最後用 `app.listen(3000);` 來在 port 3000 跑這段後端程式 --- 在一台電腦上，多個程式之間彼此溝通，通常會在電腦上各自使用一個 port 號碼 在瀏覽器中，通常只會輸入網址，例如 `https://www.google.com.tw` 之類的 只輸入網址，代表使用 443 當作 port，舉例來說，你可以在網址輸入 `https://www.google.com.tw:443` 看看，結果一模一樣 一個 port 只能同時給一個程式使用，為了避免用到別的程式在用的 port，我們請 node 在這邊使用 3000 這個冷門的 port，方便我們測試 然後 `localhost` 不是真的網址，是請瀏覽器直接在本機電腦上尋找網站開啟的意思！ 以上通通看不懂沒關係，需要對 `網際網路協定` 稍微研讀才比較懂，先照做即可！ ## 課後作業 這次的系列作業，要練習開發一個「個人日記 APP」 首先來練習如何用 node 回應 http get request 請開發一個 app，打開首頁 `http://localhost:3000/` 會顯示 `<h1>我的個人日記 APP</h1>`，先做到這樣就好 完成以上任務，你就完成這次的課程目標了！ --- 交作業的方法： 請建立一個 repo 上傳到 github 這個 repo 的檔案結構應該會是這樣： ``` repo ├── package.json ├── package-lock.json ├── node_modules └── hw1 └── index.js ``` 接下來的每次作業，都新開一個小資料夾 然後把 github 專案連結，貼到留言區即可
## 課程目標 - 使用 ejs 模板渲染出 html ## 課程內容 上一課我們成功讓後端回應 html 給瀏覽器了，很棒 可是每次都讓 res.send 回應一大串 html，就太奇怪了 至少要讓 html 內容放在單獨一個檔案，才有寫網頁的感覺吧！ 這課來學習如何做到這點吧！ --- 來安裝一款新套件，請在終端機輸入 ``` npm install ejs-locals ``` 替這課建立一個資料夾，然後建立一個 index.js 檔案與一個 hello.ejs 檔案 此時資料夾會長類似這樣 ``` repo ├── package.json ├── package-lock.json ├── node_modules ├── lesson1 │ └── index.js └── lesson2 ├── hello.ejs └── index.js ``` 在 hello.ejs 放入以下內容 ``` <h1>恭喜您，成功囉！</h1> <h2>您真的做得很棒！</h2> <p>繼續學習，不斷進步吧！</p> ``` 然後在 index.js 放入以下內容 ``` const express = require('express'); const app = express(); const engine = require('ejs-locals'); app.engine('ejs', engine); app.set('views', './lesson2'); app.set('view engine', 'ejs'); app.get('/', function(req, res){ res.render('hello') }); app.listen(3000); ``` 然後去終端機輸入 ``` node lesson2/index.js ``` 接著打開瀏覽器，在網址輸入 ``` http://localhost:3000/ ``` 你會看到一段打招呼訊息！ --- ejs 是 javascript 社群常用的一款「模板引擎」套件 我們不是直接安裝 ejs 套件，而是安裝 ejs-locals 套件，這是一款把 ejs 整合進 express 的方便套件！ 在載入 ejs-locals 之後，接著用 app.engine 告訴 express 我們要設定模板引擎 然後用 app.set 告訴 express 要去哪邊找到 `模板檔案` 最後，處理 http 請求的地方，把原本的 res.send 改成 res.render 並放進模板檔案名稱，就可以囉！ 多看幾眼這段程式，這就是後端開發，用 node、express 來讀取一段 html，並且回應給瀏覽器的方式，不難吧！ ## 課後作業 這次要練習使用 ejs 模板 請新建立 hw2 資料夾，採用以下結構 ``` /repo /hw2 /index.js /homepage.ejs ``` 並開發一個 app，打開首頁 `http://localhost:3000/` 會顯示 homepage.ejs 的內容作為部落格首頁，homepage.ejs 的內容先放這些 html 就好： ``` <h1>我的個人日記 APP</h1> <div> <h2>第一篇日記</h2> <div>今天天氣很好，夏天太陽很大，讓我心情很好</div> </div> <div> <h2>第二篇日記</h2> <div>早起出門運動，回家沖個澡，整天心情很好</div> </div> <div> <h2>第三篇日記</h2> <div>下大雨一整天，整天在家追劇，滿舒服的</div> </div> ``` 完成以上任務，你就完成這次的課程目標了！ --- 請更新你的 github 專案內容，此時應該變成這樣 ``` /repo /hw1 /index.js /hw2 /index.js /homepage.ejs ``` 依此類推，之後就這樣交作業！
## 課程目標 - 使用 ejs 模板並讀取變數 ## 課程內容 這一課來學習如何讀取變數之後，放進 ejs 模板呈現！ 先來安裝之前用過的 readline-sync 套件 ``` npm install readline-sync ``` 替這課建立一個資料夾，然後建立 `index.js` `hello.ejs` `users.json` 這幾個檔案 此時資料夾會長類似這樣 ``` repo ├── package.json ├── package-lock.json ├── node_modules ├── lesson1 │ └── index.js ├── lesson2 │ ├── hello.ejs │ └── index.js └── lesson3 ├── users.json ├── hello.ejs └── index.js ``` 在 users.json 放入以下內容 ``` [ { "name": "小明", }, { "name": "小華", }, { "name": "小王", } ] ``` 在 hello.ejs 放入以下內容 ``` <div> <% for(var i = 0; i < users.length; i++) { %> <p> <%= users[i].name %>同學，你好！ </p> <% } %> </div> ``` 在 index.js 放入以下內容 ``` const express = require('express'); const app = express(); const engine = require('ejs-locals'); const fs = require('fs'); app.engine('ejs', engine); app.set('views', './lesson3'); app.set('view engine', 'ejs'); app.get('/', function(req, res){ const data = fs.readFileSync('./lesson3/users.json'); const users = JSON.parse(data); res.render('hello', { users: users }); }); app.listen(3000); ``` 然後去終端機輸入 ``` node lesson3/index.js ``` 接著打開瀏覽器，在網址輸入 ``` http://localhost:3000/ ``` 你會看到很多則訊息，分別跟多位同學打招呼！ --- 這段程式不用我多加說明了吧！檔案讀取也是之前教過的內容！ 這邊唯一多學的東西，就是 ejs 關於 for 迴圈的語法，反正就是 `<%` 跟 `%>` 之類的東西包起來而已 ejs 還有支援很多豐富的語法＆功能，有興趣的話，自行研究一下吧！ ## 課後作業 這次要練習匯入資料到 ejs 模板 請新建立 hw3 資料夾，採用以下結構 ``` /repo /hw3 /index.js /homepage.ejs /posts.json ``` 請修改 homepage.ejs 內容，將文章內容移出來，放在 posts.json 裡面 ``` [ { "title": "第一篇日記", "content": "今天天氣很好，夏天太陽很大，讓我心情很好" }, { "title": "第二篇日記", "content": "早起出門運動，回家沖個澡，整天心情很好" }, { "title": "第三篇日記", "content": "下大雨一整天，整天在家追劇，滿舒服的" } ] ``` 這樣 homepage.ejs 內就不會只是 html 了，你會練習到 ejs 獨有的模板語法！ 完成以上任務，你就完成這次的課程目標了！ --- 請更新你的 github 專案內容，此時應該變成這樣 ``` /repo /hw1 /index.js /hw2 /index.js /homepage.ejs /hw3 /index.js /homepage.ejs /posts.json ``` 依此類推，之後就這樣交作業！
## 課程目標 - 使用 node 與 express 提供靜態檔案 ## 課程內容 目前為止的網頁，都是純 html，太陽春了！ 這一課來學習，如何用 node 來提供 css 或圖片之類的「靜態檔案」！ 替這課建立 lesson4 資料夾，內容跟 lesson3 同樣之外，再建立一個 public 資料夾，裡面新增 style.css 檔案 ``` /repo /lesson4 /index.js /hello.ejs /users.json /public /style.css ``` 在 index.js 裡面多加一行程式碼 ``` app.use(express.static('./lesson4/public')); ``` 在 style.css 裡面加入一些樣式 ``` p { color: green; } ``` 接著在 hello.ejs 加入樣式連結 ``` <link rel="stylesheet" href="/style.css"> ``` 然後去終端機輸入 ``` node lesson4/index.js ``` 接著打開瀏覽器，在網址輸入 ``` http://localhost:3000/ ``` 你會看到原本的打招呼訊息，文字變成了綠色！ --- 後端程式設計，不論何種程式語言，在提供圖片、css 這種靜態檔案的時候，通常會開一個獨立的 public 資料夾來放檔案 所以本課使用的 `app.use(express.static('./lesson4/public'));` 程式碼 就只是設定一下，請 express 從某個資料夾提供靜態檔案，就這樣而已！ ## 課後作業 這次要練習用 node 回應靜態檔案 請把 hw3 的內容複製到 hw4，然後增加 public 資料夾與 style.css 檔案 ``` /repo /hw4 /index.js /homepage.ejs /posts.json /public /style.css ``` 請在 style.css 中，稍微替你的日記首頁加一些樣式，弄得漂亮一點！ 完成以上任務，你就完成這次的課程目標了！
## 課程目標 - 使用 node 與 express 處理 url 參數 ## 課程內容 在瀏覽網站的時候，點擊不同頁面時，有時需要透過 url（網址）附帶一些參數 這課來學習如何用 node 處理 url 參數 替這課建立 lesson5 資料夾，內容跟 lesson4 一樣即可 在 index.js 加入這段程式碼 ``` app.get('/view', (req, res) => { const data = fs.readFileSync('./lesson5/users.json'); const users = JSON.parse(data); const index = req.query.index; const user = users[index]; res.send('<h1>' + user.name + '同學，你好！</h1>'); }); ``` 然後把 hello.ejs 的內容修改成 ``` <div> <% for(var i = 0; i < users.length; i++) { %> <p> <%= users[i].name %>同學，你好！ <a href="/view?index=<%= i %>">單獨打招呼頁面</a> </p> <% } %> </div> ``` 然後去終端機輸入 ``` node lesson5/index.js ``` 接著打開瀏覽器，在網址輸入 ``` http://localhost:3000/ ``` 你會看到每段訊息旁邊，多了一個單獨連結，點下去，就會到單獨打招呼頁面！ 操作看看吧！試試看「透過網址傳參數」的感覺！ --- 在 http 協定中，網址中出現問號 `?` 代表後面的部份是參數，參數的值應該可以單獨被抓出來 前面說過 `(req, res)` ，很多人會寫 `(request, response)`，兩者意思一樣，就是在 express 中代表請求＆回應的物件 這邊是我們第一次使用「請求」物件！我們在請求物件中，使用 `req.query.index` 找出名為 `index` 的參數 然後在首頁，透過迴圈，加上每個單獨頁面的連結，通通使用 `index` 作為參數傳遞 --- 實務上，開發後端應用時，只要是 http get request，有時會透過網址本身代表參數，例如 ``` /view/1 /view/2 /view/3 ``` 有時會透過 url parameter 傳遞參數，例如 ``` /view?id=1 /view?id=2 /view?id=3 ``` 這是一個主觀偏好問題，其實都可以！效果也差不多 這兩種寫法，在各種程式語言中，處理起來有點不一樣 本課就以 url parameter 作為示範，先照做即可，別擔心！ ## 課後作業 這次要開發「閱讀單篇文章」的功能 並且練習 url 參數的傳遞＆取得 請把 hw4 的內容複製到 hw5，然後增加 view.ejs 檔案 ``` /repo /hw5 /index.js /homepage.ejs /view.ejs /posts.json /public /style.css ``` 修改部落格首頁，替每篇文章加上 <a> 超連結，點擊之後會前往單篇文章的網址 舉例來說，第一篇文章的網址會是 ``` <a href="/view?index=0"> ``` 第二篇的網址會是 ``` <a href="/view?index=1"> ``` 第三篇的網址會是 ``` <a href="/view?index=2"> ``` 接著修改主程式 index.js 的內容，讓網站能夠回應 `/view` 這種網址 然後根據從網址取得的索引參數，找出 posts.json 中對應的文章資料 接著把資料放進 view.ejs 模板中，回應顯示為網頁 請自行設計 view.ejs 的內容，簡單顯示一篇文章內容即可 請稍微加上一點樣式，弄得漂亮一點！ 完成以上任務，你就完成這次的課程目標了！
## 課程目標 - 使用 node 與 express 回應 http post request ## 課程內容 前面幾課我們學習了 http get 的寫法，這次來學 http post 的寫法 在「會更新主機資料狀態」的操作時，通常都會用 http post 例如，新增資料、更新資料、刪除資料，等等常見操作！ 通常主機資料狀態會放在「資料庫軟體」例如 mysql 裡面，我們簡單起見，放在一個 json 檔案就好！ --- 替這課建立 lesson6 資料夾，內容跟 lesson5 一樣即可 新增一個 new.ejs 檔案，放入以下內容 ``` <h1>新同學報到！</h1> <form method="post" action="/create"> name: <input type="text" name="name"> </form> ``` 然後在 index.js 加入這段程式碼 ``` const bodyParser = require('body-parser'); app.use(bodyParser.urlencoded({ extended: true })); app.get('/new', function(req, res){ res.render('new'); }); app.post('/create', (req, res) => { const fs = require('fs'); const name = req.body.name; const data = fs.readFileSync('./lesson6/users.json'); const users = JSON.parse(data); users.push({ name: name }); fs.writeFileSync('./lesson6/users.json', JSON.stringify(users)); res.send('<h1>新增成功！</h1>'); }) ``` 然後去終端機輸入 ``` node lesson6/index.js ``` 接著打開瀏覽器，在網址輸入 ``` http://localhost:3000/new ``` 你會看到新增同學的頁面與表單！ 輸入姓名之後，送出表單就可以新增同學的資料了！ --- 開頭跟 bodyParser 有關的兩行，要引入並設定好，才能使用 req.body 的參數 為什麼要加這兩行？這跟 express 的 middleware 機制設計有關，這邊不深入說明 反正就是在需要使用某些功能的時候，express 不會預設通通提供給你，要請你去設定啟用之後，才會支援 --- 之前處理 http get 的 url 參數時，我們使用 req.query 來取得參數 這次處理 http post 的表單參數時，我們使用 req.body 來取得參數 express 會這樣設計，是因為在 http 協定中，這兩種參數本來就放在不同地方喔！ 看不太懂沒關係，先照做就對了！ --- 檔案處理、新增資料放進 json 檔案的段落，跟之前的課程一樣，忘記的話就回頭翻閱一下吧！ ## 課後作業 這次要開發「新增文章」的功能 並且練習用 node 回應 http post request 請把 hw5 的內容複製到 hw6，然後增加 new.ejs 檔案 ``` /repo /hw6 /index.js /homepage.ejs /view.ejs /new.ejs /posts.json /public /style.css ``` 接著修改主程式 index.js 的內容，讓網站能夠回應 `/new` 這個網址 這網址會把 new.ejs 的內容 render 出來，內容就放一個 form 表單 表單內可輸入 `標題` 以及 `文章內容`，點擊送出按鈕會以 http post 的形式發送到 `/create` 接著修改主程式 index.js 的內容，讓網站能夠回應 `/create` 這個網址 將接收到的資料，存進 `posts.json` 裡面 完成以上任務，你就完成這次的課程目標了！ --- 在上傳到 github 時，你會注意到因為 `posts.json` 有改變，所以會帶著新資料一起上傳，好像有點怪？ 其實，實務上會把資料存在 mysql 這類專門資料庫軟體，不會這樣存在 json 檔案中 本課程為了簡化，所以直接存在 json 檔案，這不是實務正常做法～ 為了方便起見，每次新增文章 `posts.json` 都會改變，就都一起上傳，沒關係～
## 課程目標 - 整合練習各種 node 與 express 觀念 ## 課程內容 現在你已經會用 nodejs/express 處理 http get 與 http post 請求囉！ 這一課，讓我們用兩個作業，進一步練習上述技能吧！ ## 課後作業 恭喜來到最後一課，這次要挑戰「融合前面幾課所學」！ 請開發出「編輯文章」以及「刪除文章」功能！ 請在文章下方開發一個「編輯文章」連結，以及一個「刪除文章」按鈕！ --- 請以 http get request 顯示 `edit.ejs` 編輯文章頁面 然後發送資料並且以 http post request 處理更新～ --- 關於刪除文章的功能，請用 form 表單以 http post request 送出 index 參數 然後發送資料並且以 http post request 刪除相關文章～ --- 完成以上任務，你就完成這次的課程目標了！
簡單複習一下，在這次的課程中，我們學會了 - 用 express 處理 http get 請求 - 用 express 處理 http post 請求 - 用 express 提供靜態檔案 - 取得 url 參數 - 取得表單參數 是不是很有趣呢？ --- 再次說明，這次的課程主要是學習網頁協定＆基本觀念，實務上後端開發有很多東西要學 舉例來說，下面這些東西本課程都省略了： - ejs 模板的 layout 功能 - 連接資料庫軟體 - 會員系統、註冊登入、驗證功能 雖然省略了很多東西，但我認為已經能讓你對於 http 協定與後端開發，有大致的了解 因此基本功比一般的前端開發者更好！這也是本課的目的所在！ 很多前端工程師，工作了好一陣子，卻還是搞不清某些觀念、任務屬於前端還是後端！要避免這種混淆，職業發展才能順利又有效率！ 後面的課程，我會進一步教你清楚認識前端、後端的區別、以及釐清一些常見迷思！讓你在前端之路上，走得更順遂！ --- 消化、研究完本課程之後，請接著前往下一份教材，繼續邁向資深之路吧！ **教材研發中，敬請期待**
你的轉職路上，還缺少一份自學作業包！寫完這幾包，直接拿作品去面試上班！
本論壇另有附設一個 LINE 新手發問＆交流群組！歡迎加入討論！
