目次
アプリでの koa-static の使用に関する詳細
ホームページ ウェブフロントエンド jsチュートリアル Nodejs の koa-static ミドルウェアの詳細な分析

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

Mar 08, 2021 am 10:05 AM
nodejs

この記事では、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 ソース コードのインデックス ファイルを見つけます。そのコア実装は次のとおりです: <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;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(&#39;fs&#39;)
	const result=fs.readFileSync(&#39;xxx&#39;)
	ctx.type=type(result, encodingExt)
	ctx.body=result
})
ログイン後にコピー
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 サイトの他の関連記事を参照してください。

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

NodejsとTomcatの違い NodejsとTomcatの違い Apr 21, 2024 am 04:16 AM

Node.js と Tomcat の主な違いは次のとおりです。 ランタイム: Node.js は JavaScript ランタイムに基づいていますが、Tomcat は Java サーブレット コンテナです。 I/O モデル: Node.js は非同期ノンブロッキング モデルを使用しますが、Tomcat は同期ブロッキング モデルです。同時実行処理: Node.js はイベント ループを通じて同時実行を処理しますが、Tomcat はスレッド プールを使用します。アプリケーション シナリオ: Node.js はリアルタイム、データ集約型、同時実行性の高いアプリケーションに適しており、Tomcat は従来の Java Web アプリケーションに適しています。

Nodejsとvuejsの違い Nodejsとvuejsの違い Apr 21, 2024 am 04:17 AM

Node.js はサーバー側の JavaScript ランタイムであり、Vue.js は対話型ユーザー インターフェイスを作成するためのクライアント側の JavaScript フレームワークです。 Node.js はバックエンド サービス API 開発やデータ処理などのサーバー側開発に使用され、Vue.js はシングルページ アプリケーションや応答性の高いユーザー インターフェイスなどのクライアント側開発に使用されます。

Nodejs はバックエンド フレームワークですか? Nodejs はバックエンド フレームワークですか? Apr 21, 2024 am 05:09 AM

Node.js は、高いパフォーマンス、スケーラビリティ、クロスプラットフォーム サポート、豊富なエコシステム、開発の容易さなどの機能を備えているため、バックエンド フレームワークとして使用できます。

Nodejsをmysqlデータベースに接続する方法 Nodejsをmysqlデータベースに接続する方法 Apr 21, 2024 am 06:13 AM

MySQL データベースに接続するには、次の手順に従う必要があります。 mysql2 ドライバーをインストールします。 mysql2.createConnection() を使用して、ホスト アドレス、ポート、ユーザー名、パスワード、データベース名を含む接続オブジェクトを作成します。 connection.query() を使用してクエリを実行します。最後に connection.end() を使用して接続を終了します。

Nodejsのグローバル変数とは何ですか Nodejsのグローバル変数とは何ですか Apr 21, 2024 am 04:54 AM

Node.js には次のグローバル変数が存在します。 グローバル オブジェクト: グローバル コア モジュール: プロセス、コンソール、require ランタイム環境変数: __dirname、__filename、__line、__column 定数: unknown、null、NaN、Infinity、-Infinity

Nodejs インストール ディレクトリ内の npm ファイルと npm.cmd ファイルの違いは何ですか? Nodejs インストール ディレクトリ内の npm ファイルと npm.cmd ファイルの違いは何ですか? Apr 21, 2024 am 05:18 AM

Node.js インストール ディレクトリには、npm と npm.cmd という 2 つの npm 関連ファイルがあります。違いは次のとおりです。拡張子が異なります。npm は実行可能ファイルで、npm.cmd はコマンド ウィンドウのショートカットです。 Windows ユーザー: npm.cmd はコマンド プロンプトから使用できますが、npm はコマンド ラインからのみ実行できます。互換性: npm.cmd は Windows システムに固有ですが、npm はクロスプラットフォームで使用できます。使用上の推奨事項: Windows ユーザーは npm.cmd を使用し、他のオペレーティング システムは npm を使用します。

NodejsとJavaの間に大きな違いはありますか? NodejsとJavaの間に大きな違いはありますか? Apr 21, 2024 am 06:12 AM

Node.js と Java の主な違いは、設計と機能です。 イベント駆動型とスレッド駆動型: Node.js はイベント駆動型で、Java はスレッド駆動型です。シングルスレッドとマルチスレッド: Node.js はシングルスレッドのイベント ループを使用し、Java はマルチスレッド アーキテクチャを使用します。ランタイム環境: Node.js は V8 JavaScript エンジン上で実行され、Java は JVM 上で実行されます。構文: Node.js は JavaScript 構文を使用し、Java は Java 構文を使用します。目的: Node.js は I/O 集中型のタスクに適しており、Java は大規模なエンタープライズ アプリケーションに適しています。

Nodejs はバックエンド開発言語ですか? Nodejs はバックエンド開発言語ですか? Apr 21, 2024 am 05:09 AM

はい、Node.js はバックエンド開発言語です。これは、サーバー側のビジネス ロジックの処理、データベース接続の管理、API の提供などのバックエンド開発に使用されます。

See all articles