nodejs里的koa-static中間件是什么

這篇文章主要介紹“nodejs里的koa-static中間件是什么”，在日常操作中，相信很多人在nodejs里的koa-static中間件是什么問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”nodejs里的koa-static中間件是什么”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

  本篇文章給大家介紹一下node里的靜態文件中間件koa-static。有一定的參考價值，有需要的朋友可以參考一下，希望對大家有所幫助。

相關推薦：《nodejs 教程》

細說koa-static使用

在app.js里，若想指定當前目錄為托管目錄，我們一般會這樣做：

const static=require('koa-static')
const Koa=require('koa')
const app=new Koa()

app.use(static('.'))
app.listen(8081)

koa-static 就是koa（node框架）中最常用的、較為成熟的 靜態web托管服務中間件 ，在koa中常用于比如外鏈靜態資源（如CSS文件）：

//下載
npm install koa-static --save

//引入
const server=require('koa-static')

//使用
app.use(server('static'))//或：app.use(server(__dirname+'/static'))

總之，server里面一定是靜態模板（相對）路徑

然后我們就可以這樣使用static目錄下的css文件夾中的xxx.css文件了：

<link rel="stylesheet" href="css/xxx.css" />

這么簡單？那它的原理是啥？

根據文件后綴名設置請求頭 「Content-Type」值，使之與瀏覽器渲染相匹配！

就拿上面說的static說吧：

• 尋找 static/css/xxx.css 是否存在

• （若存在）設置 Content-Type: text/css;charset=utf-8;

• 通過response返回給瀏覽器

前面說了koa-static作用是 ?靜態文件托管? ，那肯定不只是對于CSS、JavaScript這類資源文件。

事實上，對于圖片，koa-static同樣可以用于設置 圖片緩存 ！就像這樣

const server=require('koa-static')
const path=require('path')   //path模塊：設置路徑信息

const staticPath=path.resolve(__dirname,'static')
const staticServer=server(staticPath,{
	setHeadears:(res,path,stats)=>{
		if(path.indexOf(/[jpg|png|gif|jpeg]/)>-1){
			res.setHeader('Cache-Control',['private','max-age=60'])
		}
	}
})
app.use(staticServer);

——如果對應路徑中是jpg/GIF/png/jpeg格式的圖片，那么就將其緩存60s。

我們都知道，在express（node框架）中有一個關于靜態服務的“便捷方式”：

app.use('/teacher',express.static('/public'))

它可以指定靜態服務的“請求前綴” —— 就是指定加載相對于哪個url的靜態資源。

很明顯，這是非常實用的。我們突然想到，本文上面我們所說的koa-static都是相對于“全局 ”作用的？

如何在koa中實現這個功能呢？koa為開發者提供了另一個（輔助）模塊 —— koa-mount

const Koa=require('koa')
const server=require('koa-static')
const mount=require('koa-mount')

const app=new Koa()
app.use(mount('/teacher',server('/public')))

koa-mount是一個將中間件掛載到指定路徑的Koa中間件。它可以掛載任意Koa中間件！
前面說過，koa-static是一個中間件，所以koa-mount可以和koa-static結合，以實現和express一樣的靜態服務請求前綴的功能。

static原理探究

學習了上面神奇的使用方式，你有沒有想過它是怎么實現的？
通過 npm info koa-static ，你會發現 koa-static 依賴兩個模塊，分別是 debug 和 koa-send 。
找到 koa-static 源碼的index文件，其核心實現如下：

const send = require('koa-send');
//...
function serve (root, opts) {
	//...
	return async function serve (ctx, next) {
		await next()
		if (ctx.method !== 'HEAD' && ctx.method !== 'GET') return
		if (ctx.body !== null && ctx.status !== 404) return // eslint-disable-line
		try {
			await send(ctx, ctx.path, opts)
		}catch (err) {
			if (err.status !== 404) {
				throw err
			}
		}
	}
}

而經過這段代碼，我們發現其中實現核心是 send() 方法，而這是由模塊 koa-send 提供的！

找到koa-send的源碼，發現其核心實現原理也是很簡單的：

if (!ctx.type) ctx.type = type(path, encodingExt)
ctx.body = fs.createReadStream(path)

其中type方法是根據文件后綴來設置 Content-Type ！很實用，但是我們這里更要關注的是另一個比較有趣的事 —— koa-send的原理：

• 設置 Content-Type ，可通過文件后綴進行設置；

• 以Stream形式為ctx.body賦值

為什么說它有趣呢？
除了它竟然也是以設置content-type為目標外，stream流的方式一直受到業界大拿們的推崇：因為它比 fs.readFileSync 更高效！

讓我們拿下面這段代碼和上面 koa-send 的源碼作比較：

app.use(function(ctx){
	const fs=require('fs')
	const result=fs.readFileSync('xxx')
	ctx.type=type(result, encodingExt)
	ctx.body=result
})

Koa回顧

其實在koa中，ctx.body的工作原理其實就和本文所說 koa-static、koa-send 中間件相似：根據賦值類型來進行不同 Content-type 的處理

• 根據body類型設置對應的Content-type

• 根據Content-type調用res.write或者res.end，將數據寫入瀏覽器

關于Content-type值：
字符串——又分為“text/html”和“text/plain”兩種類型（不一樣）；
Buffer / Stream類型；
若不是以上任何類型，那么應該就是JSON對象了
（源碼中是通過typeof來判定其類型，這種技巧非常實用！

到此，關于“nodejs里的koa-static中間件是什么”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！