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
安裝步驟詳情:
- 建立一個專案
- 切換到專案目錄下去初始化
$ 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模板引擎
安裝
npm install --save art-template
npm install --save express-art-template
#或者同時安裝兩個包
npm install --save art-template express-art-template
使用
- 引入express包
var express = require('express')
var app = express()
- 開發靜態資源
app.use('/public',express.static('./public/'))
- 配置使用 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
- 響應頁面
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
安裝
$ 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...')
})
相關文章
- 學習筆記--Web基礎day04筆記Web
- Node.js學習筆記(一)Node.js筆記
- Node.js學習筆記1Node.js筆記
- <node.js學習筆記(1)>Node.js筆記
- <node.js學習筆記(2)>Node.js筆記
- Node.js stream(流) 學習筆記(一)Node.js筆記
- 機器學習(課堂筆記)Day04:線性迴歸法機器學習筆記
- Node.js 學習筆記_20170924(持續更新…)Node.js筆記
- <node.js學習筆記(3)>url,fs,qs,cryptoNode.js筆記
- <node.js學習筆記(4)>stream和http模組Node.js筆記HTTP
- JavaScript學習筆記(四十八)——Node.js之ExpressJavaScript筆記Node.jsExpress
- Day04——Java新手學習Java
- 機器學習day04機器學習
- <node.js學習筆記(6)>koa-router,模組化Node.js筆記
- [學習筆記]在不同專案中切換Node.js版本筆記Node.js
- numpy的學習筆記\pandas學習筆記筆記
- <node.js學習筆記(5)>koa框架和簡單爬蟲練習Node.js筆記框架爬蟲
- Node.js學習日記7Node.js
- 一點感悟:《Node.js學習筆記》star數突破1000+Node.js筆記
- Node.js 設計模式 學習筆記 之 流程式設計Node.js設計模式筆記程式設計
- 學習筆記筆記
- node.js筆記Node.js筆記
- 【學習筆記】數學筆記
- 《JAVA學習指南》學習筆記Java筆記
- 機器學習學習筆記機器學習筆記
- 學習筆記-粉筆980筆記
- 學習筆記(3.29)筆記
- 學習筆記(4.1)筆記
- 學習筆記(3.25)筆記
- 學習筆記(3.26)筆記
- JavaWeb 學習筆記JavaWeb筆記
- golang 學習筆記Golang筆記
- Nginx 學習筆記Nginx筆記
- spring學習筆記Spring筆記
- gPRC學習筆記筆記
- GDB學習筆記筆記
- 學習筆記(4.2)筆記
- 學習筆記(4.3)筆記