個人筆記③：Express後端架構、Handlebars樣板引入、Body-parser套件、專案初始化要點整理

透過NVM安裝的套件：Node.js、Nodemon、Express、Express-handlebars、Body-parser

本頁面目錄：

    安裝Node.js和Nodemon
    設定NPM以及安裝模板套件
    Package.json建立NPM Scripts和.gitignore
    在app.js中引入express和基本伺服器框架
    樣板引擎Handlebars
    透過Body-parser取得POST表單中的內容

安裝Node.js和Nodemon

$ nvm install x.x.x<version>

$ nvm use x.x.x<version>

AC課程使用10.15.0，寫此篇文章時版本為12.19.0

$ npm install -g nodemon

-g / --global讓nodemon安裝在電腦全域，之後不用每個專案都重新安裝

設定NPM以及安裝模板套件

$ npm init -y

在專案資料夾的路徑下初始化NPM，-y可直接省略初始化的設定（自動選擇yes）；初始化後會產生package.json

$ npm i express

安裝Express套件，i是的install縮寫

$ npm i express-handlebars

安裝Express-handlebars套件

$ npm i body-parser

安裝Body-parser套件，用於透過req.body來接收POST請求後送出的表單

安裝完套件後package.json的dependencies會顯示出已安裝的套件版本

Package.json建立NPM Scripts和.gitignore

// package.json
{
  // ...
  "main": "app.js",
  "scripts": {
    "start": "node app.js",
    "dev": "nodemon app.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  //...
}

在package.json中"scripts":{}內加入"start":"node app.js"和"dev":"nodemon app.js"，一方面方便別人觀看專案的時候知道該使用什麼套件啟用伺服器，也可養成用Scripts開始專案的習慣

$ npm run start

$ npm run dev

即可開啟專案伺服器

#Windows
Thumbs.db
ehthumbs.db
Desktop.ini

#OS X
.DS_Store*
Icon?
._*

#npm
node_module
*.log
*.gz

建立.gitignore並依需求加入內容，可避免git儲存版本節點時紀錄不必要的檔案

在app.js中引入express和基本路由設定

//app.js, include express and define server variables
const express = require('express')
const app = express()
const port = 3000

使用require('express')引入express，並定義app使用express框架；設定port端口，預設為3000

//app.js, basic route setup for express server
app.get('/', (req, res) => {
    res.send(`Send text or HTML to http://localhost:3000/`)
}

當伺服器收到來自localhost:3000/的get請求，透過res.send()會送出後方的內容到瀏覽器

//app.js, listen and send message to console
app.listen(port, () => {
    console.log(`Express server is running on http://localhost:${port}`)
}

建立伺服器監聽，當開啟伺服器時傳送訊息到console

樣板引擎Handlebars

建立Handlebars的需求資料夾和目標讀取檔案

// app.js, require handlebars in the project
const exphbs =  require('express-handlebars')

app.engine('hbs', exphbs({ defaultLayout: 'main', extname: '.hbs' }))
app.set ('view engine', 'hbs')

<!-- ./views/layouts/main.handlebars -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <!-- partial templates will replace the part of "body" here -->
  {{{ body }}}
</body>
</html>

引入Express-handlebars，載入引擎並使用main.hbs作為網頁Layout；局部樣板會經過要求後透過{{{ body }}}渲染到瀏覽器

//app.js, basic route setup for express server
app.get('/', (req, res) => {
    res.render('index')
}

以index.hbs回應localhost:3000/的get請求，渲染至main.hbs當中的{{{ body }}}

// app.js, setting static files
app.use(express.static('public'))

準備上述資料夾以放入Express的靜態檔案，並設定靜態檔案的路由

透過Body-parser取得POST表單中的內容

//app.js, include and setup body-parser
const bodyParser = require('body-parser')

app.use(bodyParser.urlencoded({ extended: true }))

載入並設定Body-parser

// app.js, get POST request and get form content from req.body
app.post('/', (req, res) => {
  console.log('req.body', req.body)
  res.render('index')
})

教案範例