Node.js學習筆記----day04

認真學習，認真記錄，每天都要有進步呀！！！
加油叭！！！

---

一、Express

原生的http在某些方面上不足以滿足我們的開發需求，所以我們需要使用框架來提高我們的開發效率，框架的目的就是提高開發效率，讓我們的程式碼更高度統一

1. 什麼是express

Express 是一個簡潔而靈活的 node.js Web應用框架, 提供了一系列強大特性幫助你建立各種 Web 應用，和豐富的 HTTP 工具。
使用 Express 可以快速地搭建一個完整功能的網站。
express官網： http://expressjs.com/

2.Express 框架核心特性：

1）可以設定中介軟體來響應 HTTP 請求。
2）定義了路由表用於執行不同的 HTTP 請求動作。
3）可以通過向模板傳遞引數來動態渲染 HTML 頁面。

3.Express的安裝

安裝文件： http://expressjs.com/en/starter/installing.html

安裝步驟詳情：

1. 建立一個專案
   
2. 切換到專案目錄下去初始化

$ npm init -y

3. 安裝express

$ npm install express --save / npm i --S express 

4. hello world example

官方文件：http://expressjs.com/en/starter/hello-world.html

栗子：

// 1. 引包
var express = require('express')
// 2. 建立你伺服器應用程式
//    也就是原來的 http.createServer
var app = express()
// 3.當伺服器收到請求/的時候，執行回撥處理函式
app.get('/', function (req, res) {
  res.send('Hello World!')
})
// 4. 相當於 server.listen
app.listen(3000, function () {
  console.log('app is running at port 3000.')
})

5. 基本路由

get:

//當你以 GET 方法請求 / 的時候，執行對應的處理函式
app.get('/',function(req,res){
res.send('GET Request')
})

post:

//當你以 POST 方法請求 / 的時候，執行對應的處理函式
app.post('/',function(req,res){
res.send('POST Request')
})

靜態服務：

//寫法一：
// 當省略第一個引數的時候，則可以通過 省略 /public 的方式來訪問
// 這種方式的好處就是可以省略 /public/
app.use(express.static('public'))
app.use(express.static('./static/'))
//寫法二：
app.use('/public/', express.static('./public/'))
app.use('/static/', express.static('./static/'))

開發公共目錄（靜態服務）栗子：

var express = require('express')
var app = express()
// 公開指定目錄
// 只要這樣做了，你就可以直接通過 /public/xx 的方式訪問 public 目錄中的所有資源了
app.use('/public/', express.static('./public/'))
app.use('/static/', express.static('./static/'))

app.get('/', function (req, res) {
  res.send('Hello World!')
})
// 4. 相當於 server.listen
app.listen(3000, function () {
  console.log('app is running at port 3000.')
})

專案結構：

來吧展示：

/public/與 /abc/d/的區別

app.use('/public/', express.static('./public/'))

app.use('/abc/d/', express.static('./public/'))

總結：
當以 /public/ 開頭的時候，去 ./public/ 目錄中找找對應的資源
這種方式更容易辨識，推薦這種方式
app.use(’/public/’, express.static(’./public/’))

二、使用nodemon工具自動重啟服務

• nodemon可以幫助我們解決頻繁修改程式碼重啟伺服器的問題

• nodemon是一個基於Node.js開發的一個第三方命令列工具。我們在使用的時候需要獨立安裝

• 安裝

$ npm install --global nodemon

該命令在任意目錄下執行都可以

• 使用

$ node app.js
 
 #使用nodemon執行命令
$ nodemon app.js

只要使用nodemon啟動的服務，則它就會監視你的檔案變化，當檔案發生變化的時候，也就是當我們 ctrl + s儲存檔案時，就會自動幫助我們重啟伺服器

三、在Express中配置使用art-template模板引擎

art-template官方中文文件

安裝

npm install --save art-template
npm install --save express-art-template
#或者同時安裝兩個包
npm install --save art-template express-art-template

使用

1. 引入express包

var express  = require('express')
var app = express()

2. 開發靜態資源

app.use('/public',express.static('./public/'))

3. 配置使用 art-template 模板引擎

app.engine('art', require('express-art-template'))

第一個引數，表示，當渲染以 .art 結尾的檔案的時候，使用 art-template 模板引擎
express-art-template 是專門用來在 Express 中把 art-template 整合到 Express 中
雖然外面這裡不需要記載 art-template 但是也必須安裝
原因就在於 express-art-template 依賴了 art-template

4. 響應頁面

app.get('/', function (req, res) {
  res.render('404.art')
})

Express 為 Response 相應物件提供了一個方法：render
render 方法預設是不可以使用，但是如果配置了模板引擎就可以使用了
res.render(‘html模板名’, {模板資料})
第一個引數不能寫路徑，預設會去專案中的 views 目錄查詢該模板檔案
也就是說 Express 有一個約定：開發人員把所有的檢視檔案都放到 views 目錄中

如果想要修改預設的 views 目錄，則可以
app.set(‘views’, render函式的預設路徑)

頁面會報錯的栗子：

var express  = require('express')
var app = express()
app.use('/public',express.static('./public/'))
app.engine('art', require('express-art-template'))
app.get('/', function (req, res) {
  res.render('404.html')
})
app.listen(3000, function () {
  console.log('running...')
})

解決方法一：
將404.html檔案的檔名更改成404.art
並且將 res.render('404.html')更改成 res.render('404.art')
解決辦法二：
將engine()方法中的第一個引數art更換成html

app.engine('html', require('express-art-template'))
app.get('/', function (req, res) {
  res.render('404.html')
})

頁面響應正常的栗子：

var express  = require('express')
var app = express()
app.use('/public',express.static('./public/'))
app.engine('art', require('express-art-template'))
app.get('/', function (req, res) {
  res.render('404.html')
})
app.listen(3000, function () {
  console.log('running...')
})

四、使用Express重寫留言本案例（只使用GET方式）

var express  = require('express')
var app = express()
app.use('/public',express.static('./public/'))
app.engine('html', require('express-art-template'))
var comments = [{
    name: '張三',
    message: '今天天氣不錯！',
    dateTime: '2015-10-16'
  },
  {
    name: '張三2',
    message: '今天天氣不錯！',
    dateTime: '2015-10-16'
  },
  {
    name: '張三3',
    message: '今天天氣不錯！',
    dateTime: '2015-10-16'
  },
  {
    name: '張三4',
    message: '今天天氣不錯！',
    dateTime: '2015-10-16'
  },
  {
    name: '張三5',
    message: '今天天氣不錯！',
    dateTime: '2015-10-16'
  }
]
app.get('/', function (req, res) {
  res.render('index.html', {
    comments: comments
  })
})

app.get('/post', function (req, res) {
  res.render('post.html')
})
app.get('/pinglun', function (req, res) {
  var comment = req.query
  comment.dateTime = '2020-10-10'
  comments.unshift(comment)
  res.redirect('/')
  //在express也可以寫http的原生語法
  // res.statusCode = 302
  // res.setHeader('Location', '/')
 })
app.listen(3000, function () {
  console.log('running...')
})

五、在Express中配置解析表單POST請求體資料

在Express中沒有內建獲取表單POST請求體的API，這裡我們需要使用一個第三方包：body-parser

Express body-parse官方文件

安裝

$ npm install body-parser

配置

var express = require('express')
var bodyParser = require('body-parser')
var app = express()
//只要加入這個配置，則在req請求物件上多出一個屬性：body
//也就是說可以直接通過req.body來獲取post請求的資料了
app.use(bodyParser.urlencoded({ extended: false }))
app.use(bodyParser.json())

app.post('/login', function (req, res) {
  res.send('welcome, ' + req.body.username)
})
app.post('/api/users', function (req, res) {
  // create user in req.body
})

把post.html中的form表單元素的method方式更改成post
當以post請求/pinglun時，req.body列印的結果就是表單中填寫的值

app.post('/pinglun', function (req, res) {
  console.log(req.body)
})

六、使用Express重寫留言本案例（使用GET方式和POST方式）

var express  = require('express')
var app = express()
var bodyParser = require('body-parser')
app.use('/public',express.static('./public/'))
app.engine('html', require('express-art-template'))
app.use(bodyParser.urlencoded({ extended: false }))
app.use(bodyParser.json())
var comments = [{
    name: '張三',
    message: '今天天氣不錯！',
    dateTime: '2015-10-16'
  },
  {
    name: '張三2',
    message: '今天天氣不錯！',
    dateTime: '2015-10-16'
  },
  {
    name: '張三3',
    message: '今天天氣不錯！',
    dateTime: '2015-10-16'
  },
  {
    name: '張三4',
    message: '今天天氣不錯！',
    dateTime: '2015-10-16'
  },
  {
    name: '張三5',
    message: '今天天氣不錯！',
    dateTime: '2015-10-16'
  }
]

app.get('/', function (req, res) {
  res.render('index.html', {
    comments: comments
  })
})
app.get('/post', function (req, res) {
  res.render('post.html')
})
// app.get('/pinglun', function (req, res) {
//   var comment = req.query
//   comment.dateTime = '2020-10-10'
//   comments.unshift(comment)
//   res.redirect('/')
//   //在express也可以寫http的原生語法
//   // res.statusCode = 302
//   // res.setHeader('Location', '/')
//  })

app.post('/pinglun', function (req, res) {
  var comment = req.body
  comment.dateTime = '2017-11-5 10:58:51'
  comments.unshift(comment)
  res.redirect('/')
})
app.listen(3000, function () {
  console.log('running...')
})