node中express框架基礎詳情 - 中間件,錯誤處理,服務器,Python,後端開發 wx638422bd63072 博客

express框架學習

express框架怎麼創建

前提：創建文件夾，下載express（npm i express），創建js文件，在js文件中寫入下面代碼

1.引入express框架

const express = require('express')

2.創建網絡服務器

const app = express()

3.get，post請求

app.get('/', (req, res) => {
    // send()
    // 1.send方法內部會檢測響應內容的類型
    // 2.send方法會自動設置http狀態碼
    // 3.send方法會幫我們自動設置響應內容類型和編碼
    res.send('Hello world')
})

4.監聽端口

app.listen(3000)

express中間件

注：可以使用app.use()，也可以使用app.get('路徑')

app.use匹配所有的請求方式，代表接收所有的請求，必須使用next(); 不然會卡到這一步

app.use((req,res,next)=>{
    next();
})

app.use第一個參數也可以傳入請求地址，表示只要是這個請求地址的，不管什麼請求方式都可以接受

app.use('/admin',(req,res,next)=>{
	next();
})

express中間件應用

1.路由保護，客户端在訪問需要登錄的頁面時，可以先使用中間件判斷用户的登錄狀態，從而判斷是否禁止用户進入頁面

app.get('/list', (req, res, next) => {
    let isLogin = false
    if (isLogin) {
        // 如果isLogin為true，則證明用户登錄了
        next();
    } else {
        res.send('您沒有登錄，沒有權利訪問這個站點')
    }
})

app.get('/list', (req, res) => {
    res.send('這是list頁面的內容')
})

2.網頁維護公告，在所有路由的最上面定義接收所有請求的中間件，直接為客户端做出響應，網站正在維護中

app.use((req, res, next) => {
    res.send('網頁正在維護中')
    // 頁面維護，只需要把next去掉，不讓他接着走就可以了
    // next();
})

3.自定義404頁面，並改變請求狀態為404，沒改變之前為200，這是express框架自己定義的

app.use((req,res)=>{
    // 改變請求狀態
    res.status(404)
    res.send('沒有這個頁面')
})  // 寫在所有請求後

錯誤處理中間件

注: next()如果沒有參數，就執行下一個處理函數，如果有參數，就執行錯誤處理函數

同步方法，遇到throw new Error會執行錯誤處理中間件

app.get('/', (req, res)=>{
    // 只要走到了throw new Error這一步，就證明出現了錯誤，直接調用錯誤處理中間件
    throw new Error('程序發生率未知錯誤')
})

// 錯誤處理中間件
app.use((err,req,res,next)=>{
    // err.message就是錯誤信息，也就是throw new Error中的內容
    res.status(500).send(err.message)
})

異步方法，是通過next(err)來觸發錯誤處理中間件的

// 引入文件讀取模塊
const fs = require('fs')

app.get('/list', (req, res, next) => {
    fs.readFile('./demo.txt', 'utf8', (err, result) => {
        // err為錯誤內容，result為讀取文件的內容
        if (err) {
            // 如果有錯誤內容，通過next(err)觸發錯誤處理中間件
            next(err)
        } else {
            res.send(result)
        }
    })
})

// 錯誤處理中間件
app.use((err, req, res, next) => {
    // err.message就是錯誤信息，也就是throw new Error中的內容
    res.status(500).send(err.message)
})

捕獲異常/錯誤

不管是異步還是同步，都可以通過try{}catch(err){}

// 引入fs文件讀取模塊
const fs = require('fs')
// 引入promise異步處理
const promisify = require('util').promisify
const readFile = promisify(fs.readFile)

app.get('/index', async (req, res, next) => {
    try {
        await readFile('./aaa.json')
    } catch (ex) {
        next(ex)
    }
})

// 錯誤處理中間件
app.use((err, req, res, next) => {
    // err.message就是錯誤信息，也就是throw new Error中的內容
    res.status(500).send(err.message)
})

構建模塊化路由

// 創建路由對象
const home = express.Router()
// 將路由和請求路徑進行匹配
app.use('/home', home)
// 在home路由下繼續創建路由
home.get('/index', (req, res) => {
    res.send('歡迎來到展示頁面')
})
// 訪問/home/index

實際運用中

home.js

const express = require('express')
const home = express.Router()
home.get('/index', (req, res) => {
    res.send('這是home下的index')
})
// 導出home
module.exports = home

express.js

// 引入express框架
const express = require('express')
// 創建網站服務器
const app = express()

// 在express.js中引入home.js
const home = require('./router/home')
// 使用app.use來將路由和請求路徑進行匹配
app.use('/home', home)


// 監聽端口
app.listen(3000)
console.log('網站服務器啓動成功');

GET參數的獲取

express框架使用req.query即可獲取GET參數，框架內部會將GET參數轉換為對象並返回

// 例如: http://localhost:3000?name=zhangsan&age=30
app.get('/', (req, res) => {
    console.log(req.query); // {"name": "zhangsan","age": "30"}
})

POST參數的獲取

express獲取post請求，需要解析post數據

// 解析post數據
app.use(express.urlencoded())
//接受請求
app.post('/add',(req,res)=>{
	// 接受請求參數
	console.log(req.body);
})

express路由傳參

注：這也叫做RESTful API 路由

// 例子:localhost:3000/10
app.get('/index/:id',(req,res)=>{
    // 通過req.params來接受參數
    res.send(req.params) // 結果 {"id": "10"}
})

靜態資源的訪問處理

在請求路徑的同級目錄下，新建public文件夾，下面放一些靜態資源，如：images圖片等

node中express框架基礎_服務器

// 引入express框架
const express = require('express')
// 引入path  
// path.join(__dirname, "public")   這是連接路徑的，__dirname是域名端口 
// 如：http://localhost:3000  加上public 就成了 http://localhost:3000/public
const path = require('path')
// 創建網站服務器
const app = express()

// 實現靜態資源的訪問
app.use(express.static(path.join(__dirname, "public")))

// 例子: http://localhost:3000/images/4.9-1.jpg


// 監聽端口
app.listen(3000)
console.log('網站服務器啓動成功');

模板引擎

注：需要下載npm i art-template express-art-template

// 1.告訴express框架使用什麼模板引擎，渲染什麼後綴的模板文件
    // 01.模板後綴
    // 02.使用的模板引擎
app.engine('art', require('express-art-template'))
// 2.告訴express框架模板存放的位置是什麼
app.set('views', path.join(__dirname, 'views'))
// 3.告訴express框架模板的默認後綴是什麼
app.set('view engine', 'art')

app.get('/index', (req, res) => {
    // res.render都幹了什麼事
    // 1.拼接模板路徑
    // 2.拼接模板後綴
    // 3.哪一個模板和哪一個數據進行拼接
    // 4.將拼接結果響應給了客户端
    res.render('index', {
        msg: "message"
    })
})

node中express框架基礎_服務器_02

app.locals對象

將變量設置到app.locals對象下面,這個數據在所有的模板(art)中都可以獲取到.

express.js中

// app.locals對象可以在所有的模板中訪問
app.locals.users = [{
    name: "張三",
    age: 20
},{
    name: "李四",
    age: 20
}]

index.art模板中

<ul>
	// 循環開始
    {{each users}}
    <li>
        {{$value.name}}
        {{$value.age}}
    </li>
    // 循環結束
    {{/each}}
</ul>

wx638422bd63072 博客

wx638422bd63072 博客

博客 / 詳情