提醒：由於看到這系列鐵人訂閱人數漸漸變多，標記一下這些內容是在「非常萌新時期」所寫，更多技術內容請參考我的 Github，歡迎跟我一起討論 ^ ^

今天的內容要來理解使用 Express Application Generator 所產生的網站專案基本結構(MVC)。

Express建立時選擇所需的engine

• 在此教學中使用了 Pug templating engine 、原生 css，因此改以下列方式建立：

  express express-locallibrary-tutorial --view=pug
  

  • --view=pug：選擇 Pug templating engine （可以 express -h 查看說明）

• 然而每次修改內容都需要restart才能改變網站內容，因此安裝了另一個套件 nodemon，來協助在跟改內容後自動restart。

  npm install --save-dev nodemon
  

  • 此套件我只先安裝給此專案開發使用，因此使用 --save-dev
  • 一般開發網站都會使用此套件，也可安裝給全域環境使用 -g
  • 因為不是安裝在全域，所以需設定在 NPM script 來使用。（NPM安裝的所有套件都可用此方式啟動）
  • 在 package.json 的 "scripts" 中，加入"devstart": "nodemon ./bin/www"，如下：

  "scripts": {
    "start": "node ./bin/www",
    "devstart": "nodemon ./bin/www"
  },
  

  • 接著即可將原本的 npm start 部分，改成 npm run devstart 來啟動。（npm run <scriptname>）
  • 或是用 rs 在任何時候進行 restart。

結構分析：

• 在 package.json 中，可發現 express package 已包含了幾個 middleware：cookie-parser、debug、http-errors、morgan。

  • cookie-parser ：用來分析 cookie
  • debug：debug用
  • morgan：HTTP request時，可以在console上顯示訊息。
  • http-errors：錯誤發生時，在網頁中顯示錯誤訊息。

• /bin/www：從 package.json 的設定中可以看到啟動時執行"nodemon ./bin/www"，也就是會執行 /bin/www 這個檔案，大致內容是設定一個port來以 app.js 建立server。

• app.js：

  • 首先輸入 middleware：

  const createError = require('http-errors')
  const express = require('express')
  const path = require('path')
  const cookieParser = require('cookie-parser')
  const logger = require('morgan')
  

  (其中包括 path 模組以提供一些方法供路徑使用)

  • 將 routes 中設定的路徑引進來：

  const indexRouter = require('./routes/index')
  const usersRouter = require('./routes/users')
  

  • 用 app.set() 設定 views 的檔案位置＆使用的 view engine
    • __dirname：當前檔案所在資料夾名稱
    • path.join(A, B)：AB路徑連接在一起形成新路徑。

  const app = express()
  
  app.set('views', path.join(__dirname, 'views'))
  app.set('view engine', 'pug')
  

  • 使用 app.use() 將 middleware 依順序安排在 request handling chain。
  • 使用 express.static 讓 Express 可以作用在 /public 中所有的靜態頁面。

  app.use(logger('dev'))
  app.use(express.json())
  app.use(express.urlencoded({ extended: false }))
  app.use(cookieParser())
  app.use(express.static(path.join(__dirname, 'public')))
  

  • 將路徑加進 request handling chain
    • 例如：設定在 “/users” 位址，會請求伺服器啟動 usersRouter（也就是./routes/users）這個檔案內容
    • 注意：此路徑是加在位址的前頭。

  app.use('/', indexRouter)
  app.use('/users', usersRouter)
  

  • 設定發生錯誤後，需顯示的內容。

  app.use(function(req, res, next) {
    next(createError(404))
  })
  
  app.use(function(err, req, res, next) {
    res.locals.message = err.message
    res.locals.error = req.app.get('env') === 'development' ? err : {}
  
    res.status(err.status || 500)
    res.render('error')
  })
  

  • 最後再將 app 輸出

  module.exports = app
  

• routes：設定各路徑回傳的內容，以 /routes/users.js 為例：

  const express = require('express')
  const router = express.Router()
  
  router.get('/', function(req, res, next) {
    res.send('respond with a resource')
  })
  
  module.exports = router;
  

  • 首先先從 express 中叫出 Router()
  • 最後再將 router 輸出給 app.js 使用
  • 加上 app.js 上的路徑設定，其路徑為 “/users/”
  • 因此當收到Client端，位址為“/users/”的請求時，會回傳“respond with a resource”到頁面上。

• Views：templates所在的資料夾，以 /routes/index.js 為例：

  router.get('/', function(req, res, next) {
    res.render('index', { title: 'Express' })
  })
  

  • 收到Client端，位址為“/”的請求時，以變數 title 等於 'Express'，帶入index.pug 以進行 render。

挑戰：最後試著讓 ”/users/cool/“ 位址能顯示 "You're so cool" ，在 /routes/users.js 中，加入以下 code ，即可達成。

router.get('/cool', function (req, res, next) {
  res.send('You\'re so cool')
})