初始步驟

1.安裝express

npm i express

2. 初始化git,並忽略node_modules包

3. 建立專案入口檔案 meadowlark.js

   • 修改主檔名：npm預設用的主檔名師index.js,如果你想要使用其它的主檔名，需要修改package.json中的main屬性

• meadowlark.js

  // 專案入口檔案
  const express = require('express')
  
  // 建立服務
  const app = express()
  
  // 設定伺服器埠
  app.set('port', process.env.PORT || 3000)
  
  // 開啟並監聽服務
  app.listen(app.get('port'), () => {
    console.log(`express server is running at http://localhost:${app.get('port')}`)
  })
  
  app.get('/hello', (req, res) => {
    res.send('hello')
  } )
  
  
  // 定製404頁面
  app.use((req, res) => {
    console.log(123)
    res.type('text/plain')  // 設定請求響應的資料型別
    res.status(404)  // 請求狀態
    res.send('404 Not-Found')  // 響應的資料
  })
  
  // 定製500頁面（有四個引數的情況下，第一個引數是表示'錯誤'的引數）
  app.use((err, req, res, next) => {
    console.log(345)
    res.type('text/plain')
    res.status(500)
    res.send('500 Server-Error')
  })
   
  

  如上圖： 注意我們定製的404和500頁面使用的是app.use()接收請求。再就是注意這兩個定製頁面的順序，必須放在其他頁面請求的後面，不然訪問的所有url都是404；在就是express根據中介軟體的傳參個數看執行404還是500

• 路由路徑：預設忽略了大小寫和反斜槓，並且在匹配時也不用考慮查詢字串。所以像 /Helle、 /Helle?name=1、 /helle/、 /Helle/?name=1都能匹配/hello的路由

使用handlebars檢視模型

express中支援多種檢視引擎。一個是Jade,express比較偏好，但這種模板引擎對html抽象化比較嚴重，以至於不像html文件；還有一種不錯的模板引擎框架：HandleBars(本專案的學習就是用這個框架) --基於與語言無關的Mustache

1. handlebars的配置
   安裝中介軟體

     npm i express-handlebars
   

   在入口檔案中配置

// 專案入口檔案
const express = require('express')

// 建立服務
const app = express()
var exphbs  = require('express-handlebars')

// 設定伺服器埠
app.set('port', process.env.PORT || 3000)

// 將handlebars設定為檢視引擎
var handlebars = require('express-handlebars').create({
defaultLayout:'main',
// extname: '.hbs',
// default: 配置預設佈局； 預設為views/layout/main.handlebars
// extname: 配置副檔名；使handlebars檔案可以使用這個副檔名
helpers: {
   section: function(name, options){
       if(!this._sections) this._sections = {};
       this._sections[name] = options.fn(this);
       return null;
   }
}
})
app.engine('handlebars', handlebars.engine)
app.set('view engine', 'handlebars')

// 開啟並監聽服務
app.listen(app.get('port'), () => {
  console.log(`express server is running at http://localhost:${app.get('port')}`)
})

app.get('/', (req, res) => { // 預設狀態會返回200
  res.render('home')
} )

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


// 定製404頁面
app.use((req, res) => {
  res.status(404)  // 請求狀態
  res.render('404')  // 響應的資料
})

// 定製500頁面
app.use((err, req, res, next) => {
  res.status(500)
  res.render('500')
})
 

引擎預設會指定返回內容為text/html，狀態為200。所以在404和500d定製頁面，我們要指定狀態碼

handlebars預設會以views/layouts目錄下的main.handlebars檔案作為佈局。路由頁面檔案放在views資料夾下，會根據res.render()方法傳入的字串到views資料夾下面找同名檔案。當然，以上兩個預設配置都是可以改的，具體請看官網。

靜態檔案的配置

通過static中介軟體可以將一個或者多個目錄設定為靜態資源目錄，其中的資源不經過任何特殊處理直接傳送給客戶端。

// meadowlark.js
...
// 設定靜態資源目錄
app.use(express.static(path.join(__dirname, '/public')))
...

上面一段程式碼的意思就是說：把專案目錄下的public資料夾設定為靜態資料夾，現在訪問這個資料夾下的一張圖片

//home.hbs

<img src="/imgs/thPAUB4RV7.jpg" alt="">
// 以/開頭的路徑表示先對於專案根目錄

express.static('public'[, options])，可以傳兩個引數，第一個引數指定要從其提供靜態資產的根目錄。該功能通過req.url與提供的root目錄結合來確定要服務的檔案。當找不到檔案時，它不會發送404響應，而是呼叫next() 繼續前進到下一個中介軟體，從而允許堆疊和回退。第二個引數是一個物件，看不懂。