Express框架入門總結

使用Express框架搭建服務器會比原生js寫法更簡潔。

// npm install express 下載插件

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

// 接收全部請求的中間件，任何請求都會先通過這個use中間件
//這裏能夠攔截全部的請求，進行判斷
app.use((req, res, next) => {
    console.log('請求走了app.use中間件');
    //next能夠進入下一個中間件，不然會停留在此
    next()
})

// 當客戶端訪問/request請求的時候走當前中間件
app.use('/request', (req, res, next) => {
        console.log('請求走了app.use / request中間件')
        next()
    })
    //設置get請求
app.get('/request', (req, res, next) => {
    req.name = "張三";
    next();
})

app.get('/request', (req, res) => {
    // 最終返回"張三"
    res.send(req.name)
})

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

錯誤處理中間件；

app.get('/index', (req, res, next) => {
    fs.readFile('./01.js', 'utf8', (err, result) => {
        if (err != null) {
            //若是出錯，將錯誤傳給中間件
            next(err)
        } else {
            res.send(result)
        }
    })
})

// 錯誤處理中間
app.use((err, req, res, next) => {
    //設置狀態碼爲500並輸出錯誤信息
    res.status(500).send(err.message);
})

異步函數錯誤的捕獲；

// 引入express框架
const express = require('express');
const fs = require('fs');
const promisify = require('util').promisify;
const readFile = promisify(fs.readFile);
// 建立網站服務器
const app = express();

app.get('/index', async(req, res, next) => {
    try {
        //異步函數錯誤須要手動捕獲，成功則會跳過catch
        await readFile('./aaa.js')
    } catch (ex) {
        //若是代碼出錯會執行catch語句內的方法
        next(ex);
    }
})

// 錯誤處理中間
app.use((err, req, res, next) => {
    res.status(500).send(err.message);
})

構建模塊化路由；

//admin.js文件內容
const express = require('express');
//建立路由
const admin = express.Router();

admin.get('/index', (req, res) => {
    res.send('歡迎來到博客管理頁面')
});
//模塊導出，值是admin
module.exports = admin;

-----------------------------------------
//home.js文件內容
const express = require('express');
//建立路由
const home = express.Router();
home.get('/index', (req, res) => {
	res.send('歡迎來到博客首頁頁面')
});
//模塊導出，值是home
module.exports = home;
-----------------------------------------

// 導入模塊
const home = require('./route/home');
const admin = require('./route/admin');
//經過不一樣的請求參數訪問不一樣的頁面
app.use('/home', home);
app.use('/admin', admin);

獲取get參數

//訪問：localhost:3000/index?user=root&password=root
app.get('/index', (req, res) => {
	//req.query能夠獲取get請求參數，輸出的結果爲{"user":"root","password":"root"}
	res.send(req.query)
})

獲取post參數

// npm install body-parser 下載插件

// 引入express框架
const express = require('express');
const bodyParser = require('body-parser');
// 建立網站服務器
const app = express();
// 攔截全部請求
// extended: false 方法內部使用querystring模塊處理請求參數的格式
// extended: true 方法內部使用第三方模塊qs處理請求參數的格式
app.use(bodyParser.urlencoded({extended: false}))

app.post('/add', (req, res) => {
	// 接收post請求參數,body是bodyParser處理獲得的
	res.send(req.body)
})

路由參數；

//請求必需要有如下上參數才能調用 如：localhost:3000/index/1/zhangsan/18
app.get('/index/:id/:name/:age', (req, res) => {
	// 接收post請求參數,輸出參數
	res.send(req.params)
})

靜態資源訪問功能

// 實現靜態資源訪問功能
// path.join(__dirname, 'public')路徑解析，__dirname當前目錄，public文件夾
// '/static'添加虛擬路徑
// localhost:3000/static/文件名   便可直接訪問
app.use('/static',express.static(path.join(__dirname, 'public')))

模板引擎

// npm install art-template express-art-template  同時下載兩個插件，空格分開

const express = require('express');
const path = require('path');
const app = express();

// 1.告訴express框架使用什麼模板引擎渲染什麼後綴的模板文件
//  1.模板後綴
//  2.使用的模板引擎
app.engine('art', require('express-art-template'))
    // 2.告訴express框架模板存放的位置是什麼
    // 第一個views是框架固定的，第二個是文件名
app.set('views', path.join(__dirname, 'views'))
    // 3.告訴express框架模板的默認後綴是什麼
app.set('view engine', 'art');
//訪問localhost:3000/index  便可訪問
app.get('/index', (req, res) => {
    // res.render渲染模板，res.render作了如下幾件事；
    // 1. 拼接模板路徑
    // 2. 拼接模板後綴
    // 3. 哪個模板和哪個數據進行拼接
    // 4. 將拼接結果響應給了客戶端
    res.render('index', {
        msg: 'message'
    })
});

app.locals對象

//index.art文件跟list.art文件內容
{{ msg }}

<ul>
	{{each users}}
	<li>
		{{$value.name}}
		{{$value.age}}
	</li>
	{{/each}}
</ul>
---------------------------

//公共信息能夠添加到locals中，這樣全部的模板都能獲取到
app.locals.users = [{
	name: 'zhangsan',
	age: 20
},{
	name: '李四',
	age: 30
}]

app.get('/index', (req, res) => {
	res.render('index', {
		msg: '首頁'
	})
});

app.get('/list', (req, res) => {
	res.render('list', {
		msg: '列表頁'
	});
})