koa-static介紹
在網絡請求中，請求往往分成兩種類型，一種是靜態資源，直接從服務器的文件存儲中讀取，一種是動態資源，一般需要先從數據庫獲取數據，然后經過一定的處理，最后返回給客戶端。
koa-static是靜態資源請求中間件，靜態資源例如html、js、css、jpg、png等等，不涉及其他的處理過程，只是單純的讀取文件，所以單獨抽離出來。原生koa2也可以實現，但是比較麻煩，使用中間件十分方便。
koa-static的使用
首先我們創建一個簡單的node應用，初始化app.js和一個ejs模板index.ejs
var Koa=require('koa') var router = require('koa-router')() var views = require('koa-views') var app=new Koa(); app.use(views('views',{ extension:'ejs' })) router.get('/',async (ctx)=>{ await ctx.render('index'); }) app.use(router.routes()); app.use(router.allowedMethods()); app.listen(3000);
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="../static/css/index.css"> </head> <body> <p class="text">這是一個段落</p> <img src="../static/images/a.png"> </body> </html>
項目中有個文件夾static，里面有images和css兩個文件夾，分別存放css樣式文件和圖片這樣的靜態資源
當我們啟動node服務,瀏覽器運行后發現，index.ejs中引入的靜態資源文件找不到，圖片請求404，樣式文件也沒生效
這時候我們要使用koa-static中間件來托管我們的靜態資源，首先安裝koa-static
npm install koa-static --save
然后再app.js中引入，並且配置這個中間件
var Koa=require('koa') var router = require('koa-router')() var views = require('koa-views') const static = require('koa-static') var app=new Koa(); app.use(views('views',{ extension:'ejs' })) //配置靜態web服務的中間件 //app.use(static('./static')); app.use(static(__dirname+'/static')); // __dirname是當前文件夾 router.get('/',async (ctx)=>{ await ctx.render('index'); }) app.use(router.routes()); app.use(router.allowedMethods()); app.listen(3000);
然后再ejs中不用再../static去查找靜態資源
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="css/index.css"> </head> <body> <p class="text">這是一個段落</p> <img src="images/a.png"> </body> </html>
重啟node服務后，可以看到我們的靜態資源請求回來了
koa-static還可以配置多個靜態資源路勁，項目中再創建一個assert/images，里面放一個b.png，然后再index.ejs中引入這個圖片
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="css/index.css"> </head> <body> <p class="text">這是一個段落</p> <img src="images/a.png"> <img src="images/b.png"> </body> </html>
並且使用koa-static配置這個路勁
var Koa=require('koa') var router = require('koa-router')() var views = require('koa-views') const static = require('koa-static') var app=new Koa(); app.use(views('views',{ extension:'ejs' })) //配置靜態web服務的中間件 //app.use(static('./static')); app.use(static(__dirname+'/static')); // __dirname是當前文件夾 app.use(static(__dirname+'/assert')); //koa靜態資源中間件可以配置多個 router.get('/',async (ctx)=>{ await ctx.render('index'); }) app.use(router.routes()); app.use(router.allowedMethods()); app.listen(3000);
重啟服務后，再運行可以看到b.png圖片也請求回來了
koa-static中間件的實現
判斷請求的文件是否存在，如果存在讀取文件返回
如果請求的文件不存在，則默認查看當前文件夾下是否有指定的靜態資源，如果存在返回當前文件夾下的指定的靜態資源
根據上面的思想，所以實現簡單版的static,可以將static單獨存在一個js文件按中，然后require進來，這樣使用和koa一樣：