Express框架

時間 2019-11-18

標籤 express 框架简体版

原文原文鏈接

Express是一個簡潔、靈活的nodejs web應用開發框架，它提供一系列強大的功能使咱們能夠快速的開發一個web應用。javascript

安裝npm install expresscss

安裝express命令行工具，能夠初始化一個express項目html

npm install -g express-generatorjava

執行express -e my_express_project 建立一個express項目,建立成功後根據命令行提示執行命令node

路由控制git

根據請求路徑來處理客戶端發出的get請求 app.get(path,function(request,response))github

app.all()函數能夠匹配全部的HTTP動詞，也就是說它能夠匹配全部路徑的請求web

路由處於整個架構的樞紐位置，至關於各個接口之間的粘合劑，因此在項目規劃時，應該優先考慮express

/** * 1.安裝 * 2.使用 */
//加載express
var express = require('express'); //獲取配置對象
var app = express(); //配置路由 //當用戶訪問/的時候，會執行後面的回調函數
app.get('/hello',function(req,res){ //send是express提供的方法，它能夠自動判斷參數類型,自動轉換響應信息。一旦匹配成功，就不會執行後面的路由配置。send包含end方法
    //而且自動設置Content-Type
    res.send('get hello'); }); app.post('/hello',function(req,res){
    res.send('post hello'); }); app.all('/hello',function(req,res){
    res.send('all hello'); }); //啓動服務器
app.listen(3000);

中間件npm

中間件就是處理HTTP請求的函數，用來完成各類特定的任務，好比檢查用戶是否登陸、添加公共方法、記錄日誌等。

中間件最大的特色就是，一箇中間件處理完，能夠把相應數據再傳遞給下一個中間件。

//加載express
var express = require('express'); //獲取配置對象
var app = express(); //計算一個處理請求一共花了多少時間 /** * 開始時間 */ app.use(function(req,res,next){ res.start = Date.now(); //console.time('cost');
    //暫存原來的end方法
   var originalEnd = res.end; //爲res.end從新賦值爲咱們自定義函數
    res.end = function(){ //先把原來的end方法調用一次
 originalEnd.apply(res,Array.prototype.slice.call(arguments)); //加入本身的小邏輯
        console.timeEnd('cost') // console.log('timecost',Date.now() - res.start);
 } next(); }); //中央
app.use('/money',function(req,res,next){ res.mny = 100; next(); }); //省裏，下面的路徑不匹配，因此下面的中間件不會執行
app.use('/hello',function(req,res,next){ res.mny = res.mny - 10; next(); }); //市裏
app.use('/money',function(req,res,next){ res.mny = res.mny - 30; next(); }); //村，在這一層，若是調用next()而且不調用send()，會執行到get方法。如今這種寫法不會執行到get路由配置那裏。狀態碼返回會以狀態短語’Not Found‘顯示
app.use(function(req,res,next){ res.mny = res.mny - 60; res.send(404); }); //好比中央要給農民發送補貼100元。send方法不能返回數字，以此避免與狀態碼衝突，
app.get('/money',function(req,res){ res.send(""+res.mny); }); app.listen(8080);

app就是個配置，裏面放了函數隊列，上述例子中先經過use方法放了三個中間件函數，再經過路由配置了一個函數。接收到請求的時候，會從上往下依次執行，每層均可以決定是否繼續向下執行。use方法的第三個參數next方法若是調用，則能夠繼續向下走，若是不執行use方法中的next方法，則不會繼續向下執行。

獲取請求參數

req.host返回請求頭裏取的主機名（不包含端口號）

req.path返回請求的URL的路徑名

req.query是一個可獲取客戶端get請求查詢字符串轉成的對象，默認爲{}

req.params是一個路徑參數組成的對象

var express = require('express'); //獲取配置對象
var app = express(); // localhost:8080/hello?name=zfpx
app.get('/hello',function(req,res){ //var urlObj = url.parse(req.url,true); console.log(req.host);//主機名
    console.log(req.path);// 路徑 urlObj.pathname
    console.log(req.query);// urlObj.query
    res.send('歡迎來到首頁'); }); //路徑參數 把向服務器端傳遞的參數放在路徑裏 正則匹配。localhost:8080/user/id/age
app.get('/user/:id/:age',function(req,res){ console.log(req.params.id); console.log(req.params.age); console.log(req.host); console.log(req.path); console.log(req.query); res.send('歡迎來到user'); }); app.listen(8080);

send方法

向瀏覽器發送響應，並能夠智能處理不一樣類型的數據。並在輸出響應時會自動進行一些設置，好比header信息、http緩存支持等

　　·當參數是一個String時，Content-Type默認設置爲text/html

　　　　res.send([body|status],[body])

　　·當參數爲Array或Object時，Express會返回一個JSON

　　·不能使用數字做爲參數，若是要返回狀態碼要用res.sendStatus方法

模板

　　·指定渲染模板引擎 app.set('view engine','ejs')

　　·設置放模板文件的目錄 app.set('views',path.join(__dirname,'/'))

　　·render函數，對網頁模板進行渲染在渲染模板時locals可爲其模板傳入變量值，在模板中就能夠調用所傳變量了

　　　　res.render(view,[locals],callback);

var express = require('express'); var path = require('path'); var app = express(); /** * 1. 動態內容 當前時間 * 2. 靜態內容 tmpl.html * 3. 動靜結合 */
//配置屬性值 //配置模板引擎 先執行npm install ejs // jade ejs
app.set('view engine','ejs'); //指定模板存放的目錄 // 模板文件放在views文件夾下，resolve 先獲取當前文件的所在在絕對目錄 ，而後再拼上後面的參數。
app.set('views',path.resolve('views')); app.get('/',function(req,res){ //把模板和數據混合成HTML頁面 express提供的render方法對模板進行渲染 ejs語法 <%變量名%>
    res.render('index.ejs',{title:'首頁',books:{ name:'node.js' }}); }); app.get('/reg',function(req,res){ res.render('index',{title:'註冊'}); }); app.listen(8080);

ejs模板

ejs的標籤系統很是簡單，只有三種標籤：

<%code%>:javascript代碼

<%=code%>:顯示替換過HTML特殊字符的內容

<%-code%>:顯示原始HTML內容，當code爲普通字符串時與<%=code%>沒有區別

<%- include include/header%>這種片斷引入其餘html片斷的ejs文件

<body>
<%=title%>
<%=books.name%>
<%
 for(var i=0;i<10;i++){
     %>
      <h1>hello</h1>
    <%
 }
%>
</body>

模板原理

//渲染模板
function render(tmpl,data){ //用真實的值替換佔位變量 
    return tmpl.replace(/\{\{(\w+)\}\}/,function(matched,group1){ console.log(arguments); return data[group1]; }) }//把模板裏的變量替換成對象裏的屬性，變量和屬性名必定要相同
var result = render('<h1>{{title}}</h1>',{title:'歡迎'}); console.log(result);

靜態文件服務中間件

express.static是Express內置的惟一一箇中間件，負責託管Express應用內的靜態資源

　　·若是要在網頁中加載靜態文件（css,js,img），就須要另外指定一個存放靜態文件的目錄

　　·項目目錄下添加一個存放靜態文件的目錄爲public

　　·在public目錄下再添加三個js、css、img的目錄，把相關文件放到相應的目錄下

　　·當瀏覽器發出文件請求時，服務器端就會到這個目錄下去尋找相關文件

　　　　app.use(express.static(require('path').join(__dirname,'public')),{options})

var express = require('express'); var path = require('path'); var fs = require('fs'); var app = express(); /*app.use(function(req,res,next){ fs.createReadStream(__dirname+'/public'+req.url).pipe(res); });*/
//參數的值是靜態文件目錄的根目錄 中間件是經過use方法調用的
app.use(express.static(__dirname+'/public')); app.listen(8080);

post方法

根據請求路徑來處理客戶端發出的post請求

　　var bodyParser = require('body-parser');

　　app.use(bodyParser.urlencoded({extended:true}))

　　app.post(path,function(req,res));

req.body屬性解析客戶端的post請求參數，經過它能夠獲取請求路徑的參數值

var express = require('express'); var app = express(); app.use(express.static(__dirname)); var bodyParser = require('body-parser'); //extended 爲true時，用querystring,若是爲false會用bodyParser本身的轉換方法 // 若是請求頭裏的content-type是application/x-www-form-urlencoded, 會用此中間件轉成對象放到req.body上，不然 什麼都不作
app.use(bodyParser.urlencoded({extended:true}));//此中間件會把請求體提取出來放到req.body上 //若是請求頭裏的content-type是application/json的時候，, 會用此中間件轉成對象放到req.body上，不然 什麼都不作 //app.use(bodyParser.json());
app.post('/reg',function(req,res){ //把請求體裏的數據轉變成對象放在req.body上
 console.log(req.body); res.end('reg'); }); app.listen(8080);