week17(2021/8/2~2021/8/8)

[Lu-yeom]

日期：110年8月2日~4日
進度：[BE201] 後端中階：Express 與 Sequelize

---

課程筆記：

一、不用框架實作Server(使用node.js)

const http = require('http')
const server = http.createServer(handler)

function handler(req, res) {
  console.log(req.url)
  res.write('hello!')
  res.end()
}

server.listen(5001)

以上為簡易server，用node.js執行不會跑出訊息，但代表已連上server。 這時在瀏覽器輸入localhost:5001就會跑出訊息'hello! 也可以寫成html格式

const http = require('http')
const server = http.createServer(handler)

function handler(req, res) {
  console.log(req.url)
  if (req.url === '/hello') {
    res.writeHead(200, { //這段在chrome瀏覽器不一定要加
      'Content-Type': 'twxt/html'
    })
    res.write('<h1>hello!</h1>')
  } else if (res.url === '/bye') {
    res.write('bye')
  } else {
    res.write('Invalid url')
  }
  res.end()
}

server.listen(5001)

二、初探 Express

const express = require('express')
const app = express()
const port = 5001

app.get('/', (req, res) => {
  res.send('hello')
})

app.get('/hello', (req, res) => {
  res.send('hello man')
})

app.get('/bye', (req, res) => {
  res.send('yo bye')
})
app.listen(port, () => {
  console.log(`Example app listening on port ${port}!`)
})

執行後跑出Example app listening on port 5001!代表伺服器已執行
在瀏覽器輸入localhost:5001/hello或/bye就會跳出相應訊息
除了app.send()，還有app.post()、app.delete()

三、與之前 Apache + PHP 組合的差別在哪？

• Apache + PHP
  • 瀏覽器會發 request 給 Apache Server，再交給 PHP 處理，處理完成後再傳 response 回去
  • 檔案系統：預設路徑長什麼樣子，在該資料夾底下就會有對應的 php 檔
• Express
  • 瀏覽器發 request 給 Express Server，經過處理後會根據 url 回傳 response
  • 和前者的最大差別，就是沒有 PHP 處理器，Express 本身就是一個 Server，透過路由系統決定什麼路徑回傳什麼資料，而不會侷限在檔案系統

四、Express 基本架構與MVC
MVC（Model–view–controller）：是一種應用程式架構，透過將程式碼拆成分成模型（Model）、視圖（View）和控制器（Controller）三個部分，並透過路由系統，建立整個應用程式的設計模式。
流程如下：

• 發出的 request 會由 Controller 來處理
• Controller 會跟 Model 拿資料
• Controller 再把拿到的資料給 View，由 View 提供 template
• 最後 Controller 再結合 data 和 template，回傳 response
  Controller是Model和View之間的協調者，Model負責管理data，View負責template

• 以ejs作為template engines使用
  • 設定app.set('view engine', 'ejs')(預設資料夾為views，需新建view資料夾)
  • 修改index.js程式碼

    
    const express = require('express');
    const app = express();
    const port = 5001;

// 設定 view engine app.set('view engine', 'ejs')

app.get('/', (req, res) => { res.send('index') })

app.get('/hello', (req, res) => { // 叫 express 去 render views 底下叫做 hello 的檔案，副檔名可省略 res.render('hello') })

app.listen(port, () => { console.log(Example app listening at http://localhost:${port}) })

* 實作Todo List API  

const app = express() const port = 5001

app.set('view engine', 'ejs')

const todos = [ 'first todo', 'second todo', 'third todo' ]

app.get('/todos', (req, res) => { res.render('todos', { todos }) })

app.get('/todos/:id', (req, res) => { // params: 可拿到網址列上指定的參數 const id = req.params.id const todo = todos[id] res.render('todo', { todo }) })

app.get('/hello', (req, res) => { res.render('hello') })

app.listen(port, () => { console.log(Example app listening on port ${port}!) })

  * 編輯todos.ejs檔案  

Todos

<% for(let i = 0; i < todos.length; i++) { %>
• <%= todos[i]%>
<% } %>

 * EJS語法介紹  

<% JavaScript程式碼 %>

<%- %> 引入HTML 內容

<%= %> 輸出資料，避免被解析成語法，可視為一種 XSS 防禦