ホームページ > 記事 > ウェブフロントエンド > Nodejs の koa-static ミドルウェアの詳細な分析
この記事では、node の静的ファイルミドルウェア koa-static を紹介します。一定の参考値があるので、困っている友達が参考になれば幸いです。
関連する推奨事項: 「nodejs チュートリアル」
.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
を探して、存在するかどうかを確認します
Content-Type: text/css;charset=utf-8;
画像キャッシュ
を設定することもできます。このように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 形式の画像の場合、60 秒間キャッシュされます。
エクスプレス (ノード フレームワーク) での静的サービスの「便利な方法」があることは誰もが知っています:
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-mount は、指定されたパスにミドルウェアをマウントする Koa ミドルウェアです。あらゆる Koa ミドルウェアをマウントできます。 前述したように、koa-static はミドルウェアであるため、koa-mount を koa-static と組み合わせて、express と同じ静的サービス リクエスト プレフィックス機能を実現できます。
静的原理の探求
を見ると、koa-static が 2 つのモジュール (debug と koa-send) に依存していることがわかります。
koa-static ソース コードのインデックス ファイルを見つけます。そのコア実装は次のとおりです: <pre class="brush:js;toolbar:false;">const send = require(&#39;koa-send&#39;);
//...
function serve (root, opts) {
//...
return async function serve (ctx, next) {
await next()
if (ctx.method !== &#39;HEAD&#39; && ctx.method !== &#39;GET&#39;) 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
}
}
}
}</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 に値を代入する
なぜ興味深いのでしょうか?
ストリーム メソッドは、コンテンツ タイプの設定も目的としているという事実に加えて、
次のコードを上記の koa-send のソース コードと比較してみましょう: <pre class="brush:js;toolbar:false;">app.use(function(ctx){
const fs=require(&#39;fs&#39;)
const result=fs.readFileSync(&#39;xxx&#39;)
ctx.type=type(result, encodingExt)
ctx.body=result
})</pre>
によるとContent-type に対応する body Type 設定
#コンテンツ タイプの値
について:上記のいずれの型でもない場合は、JSON オブジェクトである必要があります(ソース コードでは、typeof を使用して型を決定します。この手法は非常に実用的です。
その他のプログラミング関連の知識については、次のサイトをご覧ください:
プログラミング ビデオ
#!!
以上がNodejs の koa-static ミドルウェアの詳細な分析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。