ホームページ  >  記事  >  ウェブフロントエンド  >  Node.js は Koa を使用して基本的なプロジェクトを構築するサンプル チュートリアル

Node.js は Koa を使用して基本的なプロジェクトを構築するサンプル チュートリアル

小云云
小云云オリジナル
2018-01-09 09:06:272995ブラウズ

多くの人が、NodeJ や Express フレームワークや Koa フレームワークなどの新しいテクノロジーに注目しています。 Koa は Express のオリジナルチームによって作成された超軽量のサーバーサイド フレームワークであり、Express と比較して自由度が高く、さらに重要なのは、ES6 + async を使用しているため、コールバック地獄を回避できます。ただし、コードのアップグレードのため、Koa2 には v7.60 以降の Node.js 環境が必要です。

1. プロジェクトを作成します

プロジェクト ディレクトリを手動で作成し、すぐに package.json ファイルを生成します

npm init -y

koa をインストールします //現在のバージョンは 2.4.1 です

npm install koa -S

次に、app.js を作成します

// app.js

const Koa = require('koa');
const app = new Koa();

app.use(async ctx => {
 ctx.body = 'Wise Wrong';
});

app.listen(3000);

最後にパッケージにスタートアップコマンドを追加します

このように最も基本的なkoaアプリケーションが完成します

npm startを実行し、ブラウザでhttp://localhost:3000/にアクセスして確認できます。その効果

手動で作成したい場合は、プロジェクトが面倒なので、スキャフォールディング koa-generato を使用してプロジェクトを生成できます

npm install koa-generator -g
koa2 project_name

次に、npm install でプロジェクトの下に依存関係をインストールし、npm start でプロジェクトを開始します

koa を初めて使用する場合は、最初にこのブログを読んでから、スキャフォールディング ツールを使用することをお勧めします。これにより、各依存パッケージの役割をよりよく理解できます

2. ルーティングを構成します

app.js には ctx がありますこれは Koa が提供する Context オブジェクトで、リクエストとレスポンスをカプセル化します

すべての HTTP リクエストで Context オブジェクトが作成されます

Context.request.path を通じてユーザーがリクエストしたパスを取得し、コンテンツを送信できますContext.response.body を通じてユーザーに送信します

Koa のデフォルトの戻り値の型は text/plain です。HTML ファイル (またはモジュール ファイル) を返したい場合は、Context.response.type を変更する必要があります

さらに、 Context.response は省略できます。たとえば、Context.response.type は Context.type と省略され、Context.response.body は Context.type と省略されます

プロジェクトの下に HTML ファイルを保存するディレクトリ ビューを作成し、このディレクトリにindex.htmlを追加し、app.js

// app.js// 原生路由

const Koa = require('koa');
const fs = require('fs');
const app = new Koa();

app.use(async (ctx, next) => {
 if (ctx.request.path === '/index') {
 ctx.type = 'text/html';
 ctx.body = fs.createReadStream('./views/index.html');
 } else {
 await next();
 }
});

app.listen(3000);

を変更してから、ブラウザでhttp://localhost:3000/indexにアクセスしてindex.htmlページを表示しますが、他のアドレスにアクセスすると、ページが見つかりません。

この方法で URL を扱うのは非常に不器用なので、ルーティング ミドルウェア koa-router を導入する必要があります

npm install koa-router -S

koa-router をインポートするときは、最後に括弧を追加する必要があることに注意してください:

const router = require('koa-router')();

以下と同等:

const koaRouter = require('koa-router');
const router = koaRouter();

ルーティング ファイルを保存するルート ディレクトリを作成し、そのディレクトリにindex.js を作成します

// routes/index.js

const fs = require('fs');
const router = require('koa-router')()

router.get('/index', async (ctx, next) => {
 ctx.type = 'text/html';
 ctx.body = fs.createReadStream('./views/index.html');
});

module.exports = router

ここでプレフィックス メソッドを使用してファイルを追加することもできます。 BaseUrl を追加します

// app.js

// app.js

const Koa = require('koa');
const app = new Koa();

const index = require('./routes/index')
app.use(index.routes(), index.allowedMethods())

app.listen(3000);

のすべてのインターフェイスにrouter.prefix('/about')

を追加します。app.js

router.get('/about/:name', async (ctx, next) => {
 ctx.body = `I am ${ctx.params.name}!`;
});

の上記のallowedMethodsを変更して、リクエストメソッドを確認します。postリクエストを使用してgetインターフェイスにアクセスする場合は、直接失敗を返します

さらに、必要に応じて、URL に変数を追加して、Context.params.name

npm install koa-static -S

3. 静的リソース

を介してアクセスすることもできます。 cssなどの静的リソースを導入するには、koa-static

const static = require('koa-static');
// 将 public 目录设置为静态资源目录
const main = static(__dirname + '/public');
app.use(main);

を使用する必要があります

静的リソースを保存するためにpublicディレクトリを作成します

次に、app.jsに次のコードを追加します

app.use(require('koa-static')(__dirname + '/public'));

実際、これらの3行はコードも最適化できます

npm install koa-views -S

その後、index.htmlに対応するファイルを導入することができます

4. テンプレートエンジン

上記のルートは、fsモジュールを使用してHTMLファイルを直接読み込む

開発時には、ページのレンダリングにkoa-viewsミドルウェアを使用するには

const views = require('koa-views')
app.use(views(__dirname + '/views'));

app.jsのテンプレートディレクトリとしてviewsディレクトリを設定します

// routes/index.js

const router = require('koa-router')()

router.get('/index', async (ctx, next) => {
 await ctx.render('index');
});

module.exports = router
そして、ルーティングファイル内で、renderメソッドを使用できます

app.use(views(__dirname + '/views', {
 extension: 'pug' // 以 pug 模版为例
}))
上記は直接レンダリングする方法ですテンプレートエンジンを導入したい場合は、拡張子フィールドを追加してテンプレートタイプを設定できます

5. 結論

Expressがウェブストームとみなされる場合、Koaは崇高です

Expressが普及したとき、その複雑な依存関係は多くの開発者によって批判されました

そこで、Express チームは Express を最も基本的なスケルトンまで分解し、開発者が自分で組み立てられるようにしました

記事で述べたように、最初から始めるのは非常に面倒です。迅速に開発するには、スキャフォールディング koa-generato を使用してください

しかし、私は、Koa に慣れた後、自分のプロジェクトに適したスキャフォールディングを構築することをお勧めします

それ以外の場合は、Express を直接使用してみてはいかがでしょうか

関連する推奨事項:

🎜Koaサービス電流制限方法の例🎜🎜🎜🎜ノードにおけるkoaミドルウェア機構の解析 質問🎜🎜

WeChatパブリックアカウントを開発するためのNode.js+Koaサンプルチュートリアル

以上がNode.js は Koa を使用して基本的なプロジェクトを構築するサンプル チュートリアルの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

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