Express 是一個保持最小規模的靈活的 Node.js Web 應用程序開發框架,爲 Web 和移動應用程序提供一組強大的功能。css
使用您所選擇的各類 HTTP 實用工具和中間件,快速方便地建立強大的 API。html
Express 提供精簡的基本 Web 應用程序功能,而不會隱藏您瞭解和青睞的 Node.js 功能。node
下載: npm install express --save
git
新建一個server.js
文件,而後輸入:github
const express = require('express'); const app= express(); app.get('/', (req, res)=>{ req.send('Hello world'); }); app.listen(8083, ()=>{ console.log('Server is running at http://localhost:8083') })
而後運行: node server.js
打開:http://localhost:8083/
就出現:express
Express 應用使用回調函數的參數: request 和 response 對象來處理請求和響應的數據。npm
app.get('/', function (request, response) { // -- })
request 和 response 對象的具體介紹:json
request 對象表示 HTTP 請求,包含了請求查詢字符串,參數,內容,HTTP 頭部等屬性。常見屬性有:
req.app:當callback爲外部文件時,用req.app訪問express的實例
req.baseUrl:獲取路由當前安裝的URL路徑
req.body / req.cookies:得到「請求主體」/ Cookies
req.fresh / req.stale:判斷請求是否還「新鮮」
req.hostname / req.ip:獲取主機名和IP地址
req.originalUrl:獲取原始請求URL
req.params:獲取路由的parameters
req.path:獲取請求路徑
req.protocol:獲取協議類型
req.query:獲取URL的查詢參數串
req.route:獲取當前匹配的路由
req.subdomains:獲取子域名
req.accepts():檢查可接受的請求的文檔類型
req.acceptsCharsets / req.acceptsEncodings / req.acceptsLanguages:返回指定字符集的第一個可接受字符編碼
req.get():獲取指定的HTTP請求頭
req.is():判斷請求頭Content-Type的MIME類型安全
response 對象表示 HTTP 響應,即在接收到請求時向客戶端發送的 HTTP 響應數據。常見屬性有:
res.app:同req.app同樣
res.append():追加指定HTTP頭
res.set()在res.append()後將重置以前設置的頭
res.cookie(name,value [,option]):設置Cookie
opition: domain / expires / httpOnly / maxAge / path / secure / signed
res.clearCookie():清除Cookie
res.download():傳送指定路徑的文件
res.get():返回指定的HTTP頭
res.json():傳送JSON響應
res.jsonp():傳送JSONP響應
res.location():只設置響應的Location HTTP頭,不設置狀態碼或者close response
res.redirect():設置響應的Location HTTP頭,而且設置狀態碼302
res.render(view,[locals],callback):渲染一個view,同時向callback傳遞渲染後的字符串,若是在渲染過程當中有錯誤發生next(err)將會被自動調用。callback將會被傳入一個可能發生的錯誤以及渲染後的頁面,這樣就不會自動輸出了。
res.send():傳送HTTP響應
res.sendFile(path [,options] [,fn]):傳送指定路徑的文件 -會自動根據文件extension設定Content-Type
res.set():設置HTTP頭,傳入object能夠一次設置多個頭
res.status():設置HTTP狀態碼
res.type():設置Content-Type的MIME類型服務器
咱們已經瞭解了 HTTP 請求的基本應用,而路由決定了由誰(指定腳本)去響應客戶端請求。
在HTTP請求中,咱們能夠經過路由提取出請求的URL以及GET/POST參數。
路由的基本形式:app.METHOD(PATH, HANDLER)
app
表示的是一個Express的實例METHOD
是http請求的方法(get, psot..)PATH
服務器上的路徑HANDLER
請求以後的執行函數下面的示例說明了如何定義路由:
// 對/news 頁面進行get請求 app.get('news', (req, res)=>{ res.send('Hello news'); }); // 對/about 頁面進行post請求 app.post('about', (req, res)=>{ res.send('Hello about'); }); // 對/list* 可匹配 /list+任意字符 app.get('/list*', (req, res)=>{ res.send('Hello list pages'); })
而後運行:node server.js
打開:http://localhost:8083/
Express 提供了內置的中間件 express.static 來設置靜態文件如:圖片, CSS, JavaScript 等。
你可使用 express.static 中間件來設置靜態文件路徑。例如,若是你將圖片, CSS, JavaScript 文件放在 public 目錄下,你能夠這麼寫:app.use(express.static('public'));
如今,你就能夠訪問 public 目錄中的全部文件了:
public/index.html public/images public/images/bg.jpeg public/css ...
若是要使用多個靜態資源目錄,請屢次調用 express.static 中間件函數:
app.use(express.static('public')) app.use(express.static('files'))
Express 在靜態目錄查找文件,所以,存放靜態文件的目錄名不會出如今 URL 中。
可是您能夠給靜態目錄添加一個路由:app.use('/static', express.static(path.join(__dirname, 'public')))
設置/static
爲/public
目錄的路由。
如今,你就能夠經過帶有 /static 前綴地址來訪問 public 目錄中的文件了。
http://localhost:8083/static/css http://localhost:8083/static/css/index.css http://localhost:8083/static/image http://localhost:8083/static/images/bg.jpeg http://localhost:8083/static/index.html
爲了安全,最好使用絕對路由:app.use('/static', express.static(path.join(__dirname, 'public')))
而後運行:node server.js
打開:http://localhost:8083/static
就能夠訪問public下的全部文件,如圖:
EJS 是一套簡單的模板語言,幫你利用普通的 JavaScript 代碼生成 HTML 頁面。
下載Ejs: npm install ejs --save
同目錄下新建myejs.js
:
const express= require('express'); const app = express(); //設置模板文件的目錄,而且新建一個viwes的目錄 app.set('views', './views'); //註冊模板引擎 app.set('view engine', 'ejs'); //使用res.render()來渲染一個視圖並將呈現的HTML字符串發送給客戶端; app.get('/', function(req, res,) { res.render('index', { title: '測試' }); }); //監聽8083端口 app.listen(8083, ()=>{ console.log('Server is running at http://localhost:8083') })
在新建views目錄中新建index.ejs:
<h1><%= title %></h1>
而後運行:node myejs.js
打開:http://localhost:8083
便可看到:
固然,也能夠返回一個json文件來渲染視圖:
在同目錄下新建一個data.json:
{ "list": [ { "name":"小明" , "age":"6", "sex": "男"}, { "name":"小紅" , "age":"4" ,"sex": "女"}, { "name":"小亮" , "age":"5" ,"sex": "男"} ], "source":"神奇二班" }
而後更改myejs.js:
const express= require('express'); const fs= require('fs'); const app = express(); //設置模板文件的目錄,而且新建一個viwes的目錄 app.set('views', './views'); //註冊模板引擎 app.set('view engine', 'ejs'); //使用res.render()來渲染一個視圖並將呈現的HTML字符串發送給客戶端; app.get('/', function(req, res,) { getDataJson((dataJson)=>{ console.log(dataJson); res.render('index', dataJson); }) }); //訪問data.json 拿到數據解析並返回 const getDataJson=(callBack)=>{ fs.readFile('./data.json', (err, data)=>{ if(!err){ let jsonData= JSON.parse(data); callBack(jsonData); }else{ throw err; } }) } //監聽8083端口 app.listen(8083, ()=>{ console.log('Server is running at http://localhost:8083') })
而後更改index.ejs:
<h4><%=source %></h4> <ul> <% for(var i=0; i<list.length; i++){ %> <li><%= list[i].name %> | <%= list[i].age %> | <%= list[i].sex %></li> <% } %> </ul>
而後在運行:
而後運行:node myejs.js
打開:http://localhost:8083