# 使用 NodeJS 建構前端網頁 (教學) ## 方便編輯的好夥伴 : VSCode Remote Explorer 這是本教學助教的習慣，會使用VSCode Remote Explorer 來開發放在遠端的程式 如果各位已經有各自習慣使用的平台，本章節可以跳過 實作之前，先記得VPN要連接成功 ![image](https://hackmd.io/_uploads/HJf_6ihHa.png) 本質上就是使用ssh進行連線，我們使用的Putty也是用SSH這個協定進行連線的 ![image](https://hackmd.io/_uploads/SyEbRj3r6.png) 連線成功後可以選擇資料夾，選擇到專案相同目錄的資料夾底下即可開始編輯處理 ![image](https://hackmd.io/_uploads/SyUukhnSp.png) ## 淺談 ExpressJS 框架 本次教學有使用到 expressJS 這是一套前端開發框架，方便使用者自由調度後端資料以及將資料印到前方 它提供了一系列強大的特性，用於快速開發Web應用程序和API。Express.js簡化了在Node.js上構建Web應用程式的過程，並提供了一個清晰、靈活的架構，讓開發者可以專注於應用程式的邏輯而不必擔心底層細節。 教學參考連結：https://ithelp.ithome.com.tw/m/articles/10194968 ![image](https://hackmd.io/_uploads/r1KKmNXI6.png) 不得不知道的一些檔案 * package.json 定義應用程式的依賴關係、安裝套件等 * \bin\www 程式進入點， "require" 引入外部模組的關鍵字 * app.js 真正的程式進入點 * routes/ 定義路由點，從app.js中定義路由接口，再從routes資料夾內設計介面 * view/ 產生html文件 * db.js 存放連線資訊 ## 練習1 - 建立一個新的簡單網頁(hello world) ```javascript // app.js var indexRouter = require('./routes/index'); var usersRouter = require('./routes/users'); ... app.use('/', indexRouter); app.use('/users', usersRouter); ``` ```javascript // user.js router.get('/', function(req, res, next) { res.send('respond with a resource'); }); ``` 當選擇 /user 時，就可以讀取到頁面 ![image](https://hackmd.io/_uploads/SJCNdLsrp.png) - [ ] 小練習：創建helloworld.js，使用 <IP>:3000/helloworld 可以回傳Hello World ! 字段 ## 練習2 簡單HTML網頁 在views資料夾內創建test.html檔案 ![image](https://hackmd.io/_uploads/rkJ2fvsrT.png) ```htmlembedded= <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> TEST! </body> </html> ``` 在users.js內追加以下程式碼 ```javascript const path = require('path'); ... router.get('/TEST', function(req,res,next){ // 使用path.join()來組合路徑 const filePath = path.join(__dirname, '../views', 'test.html') // 使用res.sendFile()來傳送 HTML 檔案 res.sendFile(filePath); }); ``` 使用 http://localhost:3000/users/TEST 來訪問 html 網頁 ![image](https://hackmd.io/_uploads/SyR7Vwjrp.png) - [ ] 小測驗：創建 homepage.html，並且可以用 http://localhost:3000/Home/ 訪問到該網頁 ### 好用CSS 模板 Bootstrap 5 https://getbootstrap.com/ ## 練習3 Select / Insert / Delete ### EJS（Embedded JavaScript） 檔 它是一種用於在Node.js應用程式中嵌入JavaScript代碼的模板引擎。模板引擎的主要目的是使開發者能夠動態生成HTML內容，根據數據來自於應用程序的邏輯。 EJS 使用嵌入式JavaScript代碼，允許你在HTML中嵌入JavaScript，這樣你就可以使用變數、條件語句、循環等來生成動態內容。 在 routes/Auhors.js 內的程式碼，可以看到sql query 的語法被嵌入其中 res.render 會導引到views/author.ejs中，並且後面的傳值可以被<% %>抓出 routes/authors.js ![image](https://hackmd.io/_uploads/HJluPrm8a.png) views/author.ejs 使用forEach逐筆將authors資料抓出，表單method使用get 抓取資料 ![image](https://hackmd.io/_uploads/BkqUDBmLT.png) 透過pNo 把資料取出 routes/authors.js ![image](https://hackmd.io/_uploads/BkWMtHQLa.png) views/author.ejs action = "/author/pNo" ![image](https://hackmd.io/_uploads/SyoVFBX8p.png) 新增資料 使用post處理資料 routes/auhors.js ![image](https://hackmd.io/_uploads/ByBX9BXUp.png) action="author/pNo" views/author.ejs action = /author method = post ![image](https://hackmd.io/_uploads/Byqt5SQ8p.png) 刪除資料 使用delete ![image](https://hackmd.io/_uploads/rkB1irm8a.png) express中沒有直接支援method = delete 的方法 所以仍然使用method : post 、action = "/author?method=DELETE" ![image](https://hackmd.io/_uploads/r10fsBQIa.png) - [ ] 小練習 : 對資料庫進行update ## 衍生閱讀 HTML / CSS / JS https://ithelp.ithome.com.tw/articles/10202326 網路基礎 HTTP / Request / Response https://yakimhsu.com/project/project_w4_Network_http.html RestFulAPI https://medium.com/itsems-frontend/api-%E6%98%AF%E4%BB%80%E9%BA%BC-restful-api-%E5%8F%88%E6%98%AF%E4%BB%80%E9%BA%BC-a001a85ab638 MVC 架構 https://ithelp.ithome.com.tw/m/articles/10194968