Nodejs の koa-static ミドルウェアの詳細な分析

この記事では、node の静的ファイルミドルウェア koa-static を紹介します。一定の参考値があるので、困っている友達が参考になれば幸いです。

関連する推奨事項: 「nodejs チュートリアル」

アプリでの koa-static の使用に関する詳細

.js ここで、現在のディレクトリを管理対象ディレクトリとして指定したい場合は、通常これを行います:

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

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

koa-static は、koa で最も一般的に使用され、成熟した です。 (ノード フレームワーク) 外部リンク静的リソース (CSS ファイルなど) などの koa で一般的に使用される静的 Web ホスティング サービス ミドルウェア :

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

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

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

つまり、サーバーには が必要です。静的テンプレート (相対) パス

次に、静的ディレクトリの css フォルダーにある xxx.css ファイルを次のように使用できます。

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

そんなに簡単ですか?では、その原理は何でしょうか？

ブラウザのレンダリングと一致するように、ファイルのサフィックス名に従ってリクエスト ヘッダーの「Content-Type」値を設定してください。

上記の静的変数を見てみましょう:

• static/css/xxx.css を探して、存在するかどうかを確認します

• #(存在する場合)Set

  Content-Type: text/css;charset=utf-8;

  ブラウザに戻る応答サーバー

• 前述したように、koa-static の機能は ☞静的ファイル ホスティング☜ ですが、これは CSS や JavaScript などのリソース ファイルだけを対象としたものではありません。

画像キャッシュ

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);

エクスプレス (ノード フレームワーク) での静的サービスの「便利な方法」があることは誰もが知っています:

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

global

この関数を 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-static が 2 つのモジュール (debug と koa-send) に依存していることがわかります。
koa-static ソース コードのインデックス ファイルを見つけます。そのコア実装は次のとおりです: <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false;">const send = require(&amp;#39;koa-send&amp;#39;); //... function serve (root, opts) { //... return async function serve (ctx, next) { await next() if (ctx.method !== &amp;#39;HEAD&amp;#39; &amp;&amp; ctx.method !== &amp;#39;GET&amp;#39;) return if (ctx.body !== null &amp;&amp; ctx.status !== 404) return // eslint-disable-line try { await send(ctx, ctx.path, opts) }catch (err) { if (err.status !== 404) { throw err } } } }</pre><div class="contentsignin">ログイン後にコピー</div></div>このコードの後、コア実装は
send()

koa-send によって提供されます。 koa-send のソース コードを検索すると、その中心的な実装原理も非常に単純であることがわかりました。

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

Content-Type# に従って設定されます。 ＃＃！非常に実用的ですが、ここでさらに注意を払う必要があるのは、もう 1 つの興味深い点です。koa-send の原則です。

Content-Type を設定します。これは、ファイルのサフィックスを通じて設定できます。 ;

• ストリーム フォームの ctx.body に値を代入する

• なぜ興味深いのでしょうか?

  ストリーム メソッドは、コンテンツ タイプの設定も目的としているという事実に加えて、
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
})