iT邦幫忙

第 11 屆 iT 邦幫忙鐵人賽

DAY 13
0
自我挑戰組

轉職道上的萌芽人生 − 自學程式開發ing系列 第 13

Day 13- 190929學習筆記 Node.js Express 結構分析

今天的內容要來理解使用 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。

結構分析:

https://ithelp.ithome.com.tw/upload/images/20190929/20120981bvjpu0xrHd.png

  • 在 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')
})

上一篇
Day 12- 190928學習筆記 Node.js Express 環境設定
下一篇
Day 14- 190930學習筆記 建立Database (Mongoose/MongoDb)
系列文
轉職道上的萌芽人生 − 自學程式開發ing30

尚未有邦友留言

立即登入留言