初識Express之express基本操作和留言本
最近在學習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.jsvar 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,則會看到以下頁面:
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>