Express框架
一、Express框架簡介及初體驗
1.express框架是一個基于node平臺的web應用開發框架。
npm install express 命令進行下載。
2.express框架特性
提供了方便簡潔的路由定義方式
對獲取Http請求參數進行了簡化處理
對模具引擎支持程度高，方便渲染動態HTML頁面
提供了中間件機制有效控制Http請求
擁有大量第三方中間件對功能進行擴展
3.原生node.js和express框架對比之路由
原生
app.on('request',(req,res) => {
? ? //獲取客戶端的請求路徑
? ? let {pathname} =url.parse(req.url);
? ? if(pathname == '/' || pathname == '/index') {
? ? ? ? res.end('歡迎來到首頁');
? ? } else if ( pathname == '/list') {
? ? ? ? res.end('歡迎來到列表頁');
? ? } else {
? ? ? ? red.end('抱歉，您訪問的頁面出游了');
? ? }
});
Express框架路由
app.get('/',(req,res) => {
? ? //對客戶端做出響應
? ? res.send('Hello Express');
});
//當客戶端以post方式訪問/add路由時
app.post('/add', (req,res) => {
? ? res.send('使用post方式請求了/add路由');
});
4.原生node.js與express框架對比之獲取請求參數
原生
express
app.get('/', (req,res) => {
? ? //獲取GET參數
? ? console.log(req.query);
});
app.post('/', (req,res) => {
? //獲取POST參數
? console.log(req.body);
});
5.express初體驗
6.使用express框架創建web服務器及其簡單，調用express模塊返回的函數即可。
//引入express框架
const express = require('express');
//使用框架創建web服務器
const app = express();
//當客戶端以get方式訪問/路由時
app.get('/',(req,res) => {
? //對客戶端做出響應send方法會根據內容的類型自動設置請求頭
? ? res.send('hello express');
? //<h2>hello express</h2> {say: 'hello'}
});
//程序監聽3000端口
app.listen(3000);
二、中間件
1.中間件:一堆方法，可以接收客戶端發來的請求，可以對請求做出響應，也可以將請求繼續交給下一個中間件繼續處理。
中間件主要由兩部分組成，中間件方法以及請求處理函數。
中間件方法由express提供，負責攔截請求，請求處理函數由開發人員提供，負責處理請求。
app.get('請求路徑','處理函數')? //接收并處理get請求
app.post('請求路徑','處理函數')? //接收并處理post請求
可以針對同一個請求設置多個中間件，對同一個請求進行多次處理。
默認情況下，請求從上到下依次匹配中間件，一旦匹配成功，終止匹配。
可以調用next方法將請求的控制權交給下一個中間件，直到遇到結束請求的中間件。
app.get('/request',(req,res,next) => {
? ? req.name = "張三";
? ? next();
});
app.get('/request',(req,res) => {
? ? res.send(req.name);
});
2. app.use中間件用法
app.use匹配所有的請求方式，可以直接傳入請求處理函數，代表接收所有的請求。
app.use((req,res,next) => {
? ? console.log(req.url);
? ? next();
});
app.use第一個參數也可以傳入請求地址，代表不論什么請求方式，只要是這個請求地址就接受這個請求。
app.use('/admin',(req,res,next) => {
? ? console.log(req.url);
? ? next();
});
3.中間件應用
路由保護，客戶端在訪問需要登錄的頁面時，可以先使用中間件判斷用戶登錄狀態，用戶如果未登錄，則攔截請求，直接響應，禁止用戶進入需要登錄的頁面。
網站維護公告，在所有路由的最上面定義接收所有請求的中間件，直接為客戶端做出響應，網站正在維護中。
自定義404頁面。
4.錯誤處理中間件
在程序執行的過程中，不可避免的會出現一些無法預料的錯誤，比如文件讀取失敗，數據庫連接失敗。
錯誤處理中間件是一個集中處理錯誤的地方。
app.use((err,req,res,next) => {
? ? res.status(500).send('服務器發生未知錯誤');
})
當程序出現錯誤時，調用next()方法，并且將錯誤信息通過參數的形式傳遞給next()方法，即可觸發錯誤處理中間件。
app.get("/",(req,res,next) => {
? ? fs.readFile("/file-does-not-exist",(err,data) => {
? ? ? ? if(err) {
? ? ? ? ? next(err);
? ? ? ? }
? ? });
});
5.捕獲錯誤
在node.js中，異步api的錯誤信息都是通過回調函數獲取的，支持Promise對象的異步api發生錯誤可以通過catch方法捕獲。
異步函數執行如果發生錯誤要如何捕獲錯誤呢。
try catch 可以捕獲異步函數以及其他同步代碼在執行過程中發生的錯誤，但是不能其他類型的api發生的錯誤。
app.get("/",async (req,res,next) => {
? ? try {
? ? ? ? ? await User.find({name : '張三'})
? ? }catch(ex) {?
? ? ? ? next(ex);
? ? }
});
三、Express 框架請求處理
1.構建模塊化路由
const express = require('express');
//創建路由對象
const home = express.Router();
//將路由和請求路徑進行匹配
app.use('/home',home);
//在home路由下繼續創建路由
home.get('/index',() => {
? ? //? /home/index
? ? res.send('歡迎來到博客展示頁面');
});
2.構建模塊化路由
//home.js
const home = express.Router();
home.get('/index',()=>{
? ? res.send('歡迎來到博客展示頁面');
});
module.exports = home;
//admin.js
const admin = express.Router();
admin.get('/index',() => {
? ? res.send('歡迎來到博客管理頁面');
});
module.exports = admin;
//app.js
const home = require('./router/home.js');
const admin = require('./router/admin.js');
app.use('/home',home);
app.use('/admin',admin);
3.GET參數獲取
Express框架中使用req.query即可獲取GET參數。框架內部會將GET參數轉換為對象并返回。
//接收地址欄中問號后面的參數
//http://localhost:3000/?name=zhangsan&age=18
app.get('/',(req,res) => {
? console.log(req.query);//{'name' : 'zhangsan', 'age' : '18'}
});
4.POST參數獲取
Express中接收post請求參數需要借助第三方包body-parser。
//引入body-parser模塊
const bodyParser = require('body-parset');
//配置body-parser模塊
app.use(bodyParser.urlencoded({ extended : false}));
//接收請求
app.post('/add',(req,res) => {
? ? console.log(req.body);
});
5.Express路由參數
app.get('/find/:id',(req,res) =>{?
? ? console.log(req.params);? //{id:123}
});
localhost:3000/find/123
6.靜態資源的處理
通過Express內置的express.static可以方便地托管靜態文件，例如img,css,js文件等。
app.use(express.static('public'));
現在，public目錄下面的文件就可以訪問了。
http://localhost:3000/images/kitten.jpg
http://localhost:3000/css/style.css
http://localhost:3000/js/app.js
http://localhost:3000/images/bg.png
http://localhost:3000/hello.html
四、express-art-template模塊引擎
1.模塊引擎
為了是art-template模塊引擎能夠更好的和express框架配合，模板引擎官方在原art-template模塊引擎的基礎上封裝了express-art-template.
使用npm install art-template express-art-template命令進行安裝。
//當渲染后綴為art的模板引擎時，使用express-art-template
app.engine('art',require('express-art-template'));
//設置模板存放目錄
app.set('view',path.join(__dirname,'view'));
//渲染模板時不寫后綴默認拼接art后綴
app.set('view engine','art');
app.get('/',(req,res) => {
? ? //渲染模板
? ? res.render('index');
});
2. app.locals對象
將變量設置到app.locals對象里面，這個數據在所有的模板中都可以獲取到。
app.locals.user = [{
? ? name : 'ls',
? ? age : 18
},{
? ? name : 'lc',
? ? age : 19
}]
