初識Express之express基本操作和留言本

阿新 • • 發佈：2018-12-15

最近在學習express，真的是發現到了他的強大之處，這篇部落格介紹了express的基本操作，也會做一個簡單的留言本demo，嘻嘻~

一、express 的介紹和安裝

1. 為什麼要使用express？

首先express是一個node框架。其次，原生的http在某些方面的表現不足以應對開發需求，則使用框架，一是提高效率，二是讓程式碼高度統一。 express官網：http://expressjs.com/

2. express 的安裝

npm install express --save

3. express基本感知

首先先建立一個資料夾，配置package.json檔案：

npm init -y

下載node_modules：

npm install

下載express

npm install express --save

(如果還存在對這些命令有疑惑的地方，請翻看上一篇部落格npm的使用)

在這裡我的目標檔案叫做 app.js

var express = require('express')  //引包
app.get('/',function(req, res){    
	res.send('hello my is express!')
})
app.listen(3000, function(){    
	console.log('app is running at port 3000...' 
)
})

然後在終端裡輸入 node app.js之後，在瀏覽器開啟127.0.0.1:3000，則會看到以下頁面：

express基本感知

4. 利用express開啟頁面

我的檔案結構如下圖所示，與app.js同級的目錄下有一個views檔案下的index.html檔案，內容如下：需要引入fs：


var express = require('express')
var fs = require('fs')
var app = express()
p.get('/', function(req, res){
    fs.readFile('.iews/index.html', function(err, data) 
{
        if(err){
            return res.end('404 not found')
        }else{
            res.end(data)
        }
    })

})
app.listen(3000, function(){
    console.log('app is running at port 3000...')
})

開啟瀏覽器埠號就可以看到輸出的頁面了~ 輸出頁面

二、 Exprerss基本操作

1. send

res.send(“hello”)

其實原來在node裡使用的end()，write()都可以在express中使用，但是express有一個更好用的函式send()，使用之後就可以不用end()來結束了，可以自動節結束響應。

2. Express中的static-sever靜態資源服務

基本路由有兩種形式：get 和 post 使用一個基本路由需要做三件事： -1. 請求方法 -2. 請求路徑 -3. 請求處理函式例如：在public下有一個index.html檔案，需要訪問這個檔案可以使用以下三種方式：

必須是 /a/puiblic目錄中的資源具體路徑

省略 /public 的方式來訪問

通常第一種方法容易辨識，推薦使用第一種方法。

3.使用nodemon 工具自動重啟服務

nodemon：一個第三方命令列工具，用來解決頻繁修改程式碼重啟伺服器問題 是一個基於node.js開發的命令列工具 下載：

npm install --global nodemon

使用：

nodemon app.js

將原來的node換成nodemon就可以了，用來監視檔案變化

4. 在Express中配置使用art-template模板引擎

a. 安裝

npm install --save art-template npm install --save express-art-template

b. 使用

app.engine(‘html’, require(‘express-art-template’))

參一表示：當渲染以 .art 結尾的檔案的時候，使用 art-template 模板引擎

解釋為什麼express使用模板引擎時還要裝art-template

express-art-template 是專門用來在 Express 中把 art-template 整合到 Express 中，雖然外面這裡不需要記載 art-template 但是也必須安裝，原因就在於 express-art-template 依賴了 art-template

5. 在Express中渲染模板引擎

Express 為 Response 相應物件提供了一個方法：render render 方法預設是不可以使用，但是如果配置了模板引擎就可以使用了 使用方法：

res.render(‘html模板名’, {模板資料})

第一個引數不能寫路徑，預設會去專案中的 views 目錄查詢該模板檔案，也就是說 Express 有一個約定：開發人員把所有的檢視檔案都放到 views 目錄中

如果想要修改預設的 views 目錄，則可以：

app.set(‘views’, render函式的預設路徑)

6. 在Express中配置解析表單Post請求體資料

當以 POST 請求 /post 的時候，執行指定的處理函式

app.post(’/post’)

參一是方法，參二是路徑標識

作用是： 這樣的話我們就可以利用不同的請求方法讓一個請求路徑使用多次

在get請求裡，有一個req.query，但是這個只能拿get請求引數在post請求裡，沒有內建獲取表單post請求的API，則可以使用body-parser

使用方法：

引包：

var bodyParser = require(‘body-parser’)

2.配置body-parser

// 配置 body-parser 中介軟體（外掛，專門用來解析表單 POST 請求體）
// parse application/x-www-form-urlencoded
app.use(bodyParser.urlencoded({ extended: false }))
// parse application/json
app.use(bodyParser.json())

只要加入了這個配置，則在req的請求物件上會多出來一個屬性：body 可以直接通過req.body來獲取表單post請求資料。

留言本例項

1.配置檔案和下載node-modules

npm init -y npm install --save express npm install --save art-template npm install --save express-art-template

2. 編寫入口檔案

1. 檔案結構

這是我的一個檔案結構

4. 配置要使用的包

在public目錄的lib下放入要使用的bootstrap檔案，按照

href="/public/lib/bootstrap/dist/css/bootstrap.css"

3. 編寫入口檔案


var express = require('express')
var bodyParser = require('body-parser')
var app = express()
app.use('/public/', express.static('./public/'))
app.engine('html', require('express-art-template'))

// 配置 body-parser 中介軟體（外掛，專門用來解析表單 POST 請求體）
// parse application/x-www-form-urlencoded
app.use(bodyParser.urlencoded({ extended: false }))
// parse application/json
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 = '2018-10-14 11:01:22'
    comments.unshift(comment)
    res.redirect('/')//返回首頁
})*/
app.post('/post', function(req, res){
    var comment = req.body
    comment.dateTime = '2018-10-14 11:01:22'
    comments.unshift(comment)
    res.redirect('/')//返回首頁
})
app.listen(3000, function(req, res){
    console.log('running...')
})

4.編寫頁面

a. index頁面


<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>留言本</title>
<link rel="stylesheet" href="/public/lib/bootstrap/dist/css/bootstrap.css">
</head>

<body>
  <div class="header container">
    <div class="page-header">
      <h1>Example page header <small>Subtext for header</small></h1>
      <a class="btn btn-success" href="/post">發表留言</a>
    </div>
  </div>
  <div class="comments container">
    <ul class="list-group">
      {{each comments}}
      <li class="list-group-item">{{ $value.name }}說：{{ $value.message }} <span class="pull-right">{{ $value.dateTime }}</span></li>
      {{/each}}
    </ul>
  </div>
</body>

</html>

b. post頁面


<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <link rel="stylesheet" href="/publicb/bootstrap/dist/css/bootstrap.css">
</head>

<body>
  <div class="header container">
    <div class="page-header">
      <h1><a href="/">首頁</a> <small>發表評論</small></h1>
    </div>
  </div>
  <div class="comments container">
   <form action="/post" method="post">
      <div class="form-group">
        <label for="input_name">你的大名</label>
        <input type="text" class="form-control" required minlength="2" maxlength="10" id="input_name" name="name" placeholder="請寫入你的姓名">
      </div>
      <div class="form-group">
        <label for="textarea_message">留言內容</label>
        <textarea class="form-control" name="message" id="textarea_message" cols="30" rows="10" required minlength="5" maxlength="20"></textarea>
      </div>
      <button type="submit" class="btn btn-default">發表<tton>
    </form>
  </div>
</body>

</html>

c. 404 頁面


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <h1>抱歉!  您訪問的頁面失聯啦...</h1>
</body>
</html>