ホームページ  >  記事  >  ウェブフロントエンド  >  Nodejs の koa-static ミドルウェアの詳細な分析

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

青灯夜游
青灯夜游転載
2021-03-08 10:05:242308ブラウズ

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

Nodejs の 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 などのリソース ファイルだけを対象としたものではありません。
実際、画像の場合、koa-static を使用して

画像キャッシュ

を設定することもできます。このように

const server=require(&#39;koa-static&#39;)
const path=require(&#39;path&#39;)   //path模块:设置路径信息

const staticPath=path.resolve(__dirname,&#39;static&#39;)
const staticServer=server(staticPath,{
	setHeadears:(res,path,stats)=>{
		if(path.indexOf(/[jpg|png|gif|jpeg]/)>-1){
			res.setHeader(&#39;Cache-Control&#39;,[&#39;private&#39;,&#39;max-age=60&#39;])
		}
	}
})
app.use(staticServer);
- 対応するパスが jpg/GIF/png/jpeg 形式の画像の場合、60 秒間キャッシュされます。

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

app.use(&#39;/teacher&#39;,express.static(&#39;/public&#39;))

静的サービスの「リクエスト プレフィックス」を指定できます—— どの URL に相対的に静的リソースをロードするかを指定します。

明らかに、これは非常に実用的です。この記事で前述した koa-static はすべて「

global

」に関連して動作するのではないかと突然思いました。

この関数を koa に実装するにはどうすればよいですか? koa は、開発者向けに別の (補助) モジュールを提供します。 koa-mount

const Koa=require(&#39;koa&#39;)
const server=require(&#39;koa-static&#39;)
const mount=require(&#39;koa-mount&#39;)

const app=new Koa()
app.use(mount(&#39;/teacher&#39;,server(&#39;/public&#39;)))
koa-mount は、指定されたパスにミドルウェアをマウントする Koa ミドルウェアです。あらゆる Koa ミドルウェアをマウントできます。

前述したように、koa-static はミドルウェアであるため、koa-mount を koa-static と組み合わせて、express と同じ静的サービス リクエスト プレフィックス機能を実現できます。


静的原理の探求

上記の魔法の使用法を学んだ後、それがどのように実装されるか考えたことはありますか?

npm info koa-static

を見ると、koa-static が 2 つのモジュール (debug と koa-send) に依存していることがわかります。
koa-static ソース コードのインデックス ファイルを見つけます。そのコア実装は次のとおりです: <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>このコードの後、コア実装は
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 のソース コードと比較してみましょう: <pre class="brush:js;toolbar:false;">app.use(function(ctx){ const fs=require(&amp;#39;fs&amp;#39;) const result=fs.readFileSync(&amp;#39;xxx&amp;#39;) ctx.type=type(result, encodingExt) ctx.body=result })</pre>

Koa レビュー

実際、koa では、ctx.body動作原理は実際には、この記事で説明されている koa-static および koa-send ミドルウェアと似ています。
割り当てタイプに応じて異なるコンテンツ タイプを処理します

によるとContent-type に対応する body Type 設定

  • #Content-type に従って res.write または res.end を呼び出し、ブラウザにデータを書き込みます

  • #コンテンツ タイプの値

    について:
  • 文字列 - 2 つのタイプ (異なる) に分かれています: "text/html" と "text/plain";
バッファ / ストリーム タイプ;
上記のいずれの型でもない場合は、JSON オブジェクトである必要があります

(ソース コードでは、typeof を使用して型を決定します。この手法は非常に実用的です。
その他のプログラミング関連の知識については、次のサイトをご覧ください:
プログラミング ビデオ
#!!

以上がNodejs の koa-static ミドルウェアの詳細な分析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事はcsdn.netで複製されています。侵害がある場合は、admin@php.cn までご連絡ください。