Egg.jsとは何ですか？

Egg.jsはnodejsベースの開発であり、エンタープライズレベルのフレームワークとアプリケーションのために生まれました。Egg.jsがより上位レベルのフレームワークを育成し、開発チームと開発者が開発とメンテナンスのコストを削減できるようになることを願っています。

githubアドレス：

https://github.com/eggjs/egg

特性

Eggに基づいて上位フレームワークをカスタマイズする機能を提供します
高度に拡張可能なプラグインメカニズム
組み込みのマルチプロセス管理
コア開発に基づいて、優れたパフォーマンス
安定したフレームワークと高いテストカバレッジ
進歩的な開発

クイックスタート

この記事では、例の観点からEgg.jsアプリケーションを段階的に構築し、Egg.jsをすぐに使い始めることができるようにします。

環境への備え

オペレーティングシステム：macOS、Linux、Windowsをサポート
動作環境：LTSバージョンを選択することをお勧めします。最小要件は8.xです。

クイック初期化

スキャフォールディングを直接使用することをお勧めします。いくつかの簡単な手順（npm> = 6.1.0）でプロジェクトをすばやく生成できます。

$ mkdir egg-example && cd egg-example
$ npm init egg --type=simple
$ npm i

スタートアッププロジェクト：

$ npm run dev
$ open http://localhost:7001

ステップバイステップで構築する

通常、npm init eggを使用して、対応するビジネスモデルに適したスキャフォールディングをすばやく選択し、前のセクションの方法を使用してEgg.jsプロジェクトの開発をすばやく開始できます。

しかし、誰もがEgg.jsをよりよく理解できるようにするために、次に、足場をスキップして、HackerNewsを段階的に手動で作成します。

注：実際のプロジェクトでは、直接初期化するために前のセクションのスキャフォールディングを使用することをお勧めします。

フロントエンド開発-AliのWebバックエンド開発フレームワークegg.js

プロジェクトを初期化する

まず、ディレクトリ構造を初期化します。

$ mkdir egg-example
$ cd egg-example
$ npm init
$ npm i egg --save
$ npm i egg-bin --save-dev

npmスクリプトをpackage.jsonに追加します。

{
  "name": "egg-example",
  "scripts": {
    "dev": "egg-bin dev"
  }
}

書き込みコントローラー

Web開発またはMVCに精通している場合は、作成する必要のある最初のステップがコントローラーとルーターであると推測する必要があります。

// app/controller/home.js
const Controller = require('egg').Controller;

class HomeController extends Controller {
  async index() {
    this.ctx.body = 'Hello world';
  }
}

module.exports = HomeController;

ルートマッピングを設定します。

// app/router.js
module.exports = app => {
  const { router, controller } = app;
  router.get('/', controller.home.index);
};

構成ファイルを追加します。

// config/config.default.js
exports.keys = <此处改为你自己的 Cookie 安全字符串>;

このときのディレクトリ構造は次のとおりです。

egg-example
├── app
│   ├── controller
│   │   └── home.js
│   └── router.js
├── config
│   └── config.default.js
└── package.json

OK、アプリを起動して体験できるようになりました

$ npm run dev
$ open http://localhost:7001

注意：

Controllerには、classとexportsの2つの書き込みメソッドがあります。この記事では、前者について説明します。Controllerのドキュメントを参照する必要がある場合があります。Configには、module.exportsとexportsという表現もあります。詳細については、Node.jsモジュールのドキュメントを参照してください。

静的リソース

Eggには静的プラグインが組み込まれているため、オンライン環境でCDNにデプロイすることをお勧めします。このプラグインは必須ではありません。

静的プラグインのデフォルトマッピング/ public / *-> app / public / *ディレクトリ

ここで、すべての静的リソースをapp / publicディレクトリに配置できます。

app/public
├── css
│   └── news.css
└── js
    ├── lib.js
    └── news.js

テンプレートレンダリング

ほとんどの場合、データを読み取った後にテンプレートをレンダリングし、それをユーザーに提示する必要があります。したがって、対応するテンプレートエンジンを導入する必要があります。

フレームワークは、特定のテンプレートエンジンの使用を強制するものではなく、Viewプラグイン開発仕様に同意するだけです。開発者は、さまざまなプラグインを導入して、差別化されたカスタマイズを実現できます。

その他の使用法については、「表示」を参照してください。

この例では、Nunjucksを使用してレンダリングし、最初に対応するプラグインegg-view-nunjucksをインストールします。

$ npm i egg-view-nunjucks --save

プラグインを開きます。

// config/plugin.js
exports.nunjucks = {
  enable: true,
  package: 'egg-view-nunjucks'
};

// config/config.default.js
exports.keys = <此处改为你自己的 Cookie 安全字符串>;
// 添加 view 配置
exports.view = {
  defaultViewEngine: 'nunjucks',
  mapping: {
    '.tpl': 'nunjucks',
  },
};

注：これはconfigディレクトリであり、app / configではありません。

リストページのテンプレートファイルを作成します。通常はapp / viewディレクトリに配置されます

<!-- app/view/news/list.tpl -->
<html>
  <head>
    <title>Hacker News</title>
    <link rel="stylesheet" href="/public/css/news.css" />
  </head>
  <body>
    <ul class="news-view view">
      {% for item in list %}
        <li class="item">
          <a href="{
   
   { item.url }}">{
   
   { item.title }}</a>
        </li>
      {% endfor %}
    </ul>
  </body>
</html>

コントローラーとルーターを追加する

// app/controller/news.js
const Controller = require('egg').Controller;

class NewsController extends Controller {
  async list() {
    const dataList = {
      list: [
        { id: 1, title: 'this is news 1', url: '/news/1' },
        { id: 2, title: 'this is news 2', url: '/news/2' }
      ]
    };
    await this.ctx.render('news/list.tpl', dataList);
  }
}

module.exports = NewsController;

// app/router.js
module.exports = app => {
  const { router, controller } = app;
  router.get('/', controller.home.index);
  router.get('/news', controller.news.list);
};

ブラウザを起動し、http：// localhost：7001 / newsにアクセスして、レンダリングされたページを確認します。

ヒント：開発プラグインは、開発期間中はデフォルトで有効になっています。バックエンドコードを変更すると、ワーカープロセスが自動的に再起動されます。

書き込みサービス

実際のアプリケーションでは、コントローラーは通常、それ自体でデータを生成することも、複雑なロジックを含むこともありません。複雑なプロセスは、ビジネスロジックレイヤーサービスとして抽象化する必要があります。

次のように、HackerNewsデータをフェッチするサービスを追加しましょう。

フレームワークは、開発者がHTTPリクエストを使用するのを容易にする組み込みのHttpClientを提供します。

// app/service/news.js
const Service = require('egg').Service;

class NewsService extends Service {
  async list(page = 1) {
    // read config
    const { serverUrl, pageSize } = this.config.news;

    // use build-in http client to GET hacker-news api
    const { data: idList } = await this.ctx.curl(`${serverUrl}/topstories.json`, {
      data: {
        orderBy: '"$key"',
        startAt: `"${pageSize * (page - 1)}"`,
        endAt: `"${pageSize * page - 1}"`,
      },
      dataType: 'json',
    });

    // parallel GET detail
    const newsList = await Promise.all(
      Object.keys(idList).map(key => {
        const url = `${serverUrl}/item/${idList[key]}.json`;
        return this.ctx.curl(url, { dataType: 'json' });
      })
    );
    return newsList.map(res => res.data);
  }
}

module.exports = NewsService;

次に、前のコントローラーを少し変更します。

// app/controller/news.js
const Controller = require('egg').Controller;

class NewsController extends Controller {
  async list() {
    const ctx = this.ctx;
    const page = ctx.query.page || 1;
    const newsList = await ctx.service.news.list(page);
    await ctx.render('news/list.tpl', { list: newsList });
  }
}

module.exports = NewsController;

また、app / service /news.jsで読み取った構成を追加する必要があります。

// config/config.default.js
// 添加 news 的配置项
exports.news = {
  pageSize: 5,
  serverUrl: 'https://hacker-news.firebaseio.com/v0',
};

拡張機能を書く

小さな問題が発生しましたが、情報時間データはUnixTime形式であり、読みやすい形式で表示したいと考えています。

フレームワークは、すばやく拡張する方法を提供します。app/ extendディレクトリに拡張スクリプトを提供するだけです。詳細については拡張機能を参照してください。

ここでは、Viewプラグインでサポートされているヘルパーを使用して次のことを実現できます。

$ npm i moment --save

// app/extend/helper.js
const moment = require('moment');
exports.relativeTime = time => moment(new Date(time * 1000)).fromNow();

テンプレートでの使用：

<!-- app/view/news/list.tpl -->
{
   
   { helper.relativeTime(item.time) }}

ミドルウェアを書く

需要があるとします。私たちのニュースサイトは、Baiduクローラーによる訪問が禁止されています。

賢い学生は、次のように、User-Agentがミドルウェアによって判断できるとすぐに考える必要があります。

// app/middleware/robot.js
// options === app.config.robot
module.exports = (options, app) => {
  return async function robotMiddleware(ctx, next) {
    const source = ctx.get('user-agent') || '';
    const match = options.ua.some(ua => ua.test(source));
    if (match) {
      ctx.status = 403;
      ctx.message = 'Go away, robot.';
    } else {
      await next();
    }
  }
};

// config/config.default.js
// add middleware robot
exports.middleware = [
  'robot'
];
// robot's configurations
exports.robot = {
  ua: [
    /Baiduspider/i,
  ]
};

これで、curl http：// localhost：7001 / news -A "Baiduspider"を使用して効果を確認できます。

詳細については、ミドルウェアのドキュメントを参照してください。

構成ファイル

ビジネスを書くとき、構成ファイルを持つことは避けられません。フレームワークは強力な構成マージ管理機能を提供します：

config.local.js、config.prod.jsなどの環境変数に応じてさまざまな構成ファイルの読み込みをサポートします。
アプリケーション/プラグイン/フレームは独自の構成ファイルを構成でき、フレームワークは順番にマージおよびロードされます。
特定のマージロジックは、構成ファイルにあります。

// config/config.default.js
exports.robot = {
  ua: [
    /curl/i,
    /Baiduspider/i,
  ],
};

// config/config.local.js
// only read at development mode, will override default
exports.robot = {
  ua: [
    /Baiduspider/i,
  ],
};

// app/service/some.js
const Service = require('egg').Service;

class SomeService extends Service {
  async list() {
    const rule = this.config.robot.ua;
  }
}

module.exports = SomeService;

ディレクトリ構造

クイックスタートでは、誰もがフレームワークの予備的な印象を持っている必要があります。次に、次のカタログ規則の仕様を簡単に理解します。

egg-project
├── package.json
├── app.js (可选)
├── agent.js (可选)
├── app
|   ├── router.js
│   ├── controller
│   |   └── home.js
│   ├── service (可选)
│   |   └── user.js
│   ├── middleware (可选)
│   |   └── response_time.js
│   ├── schedule (可选)
│   |   └── my_task.js
│   ├── public (可选)
│   |   └── reset.css
│   ├── view (可选)
│   |   └── home.tpl
│   └── extend (可选)
│       ├── helper.js (可选)
│       ├── request.js (可选)
│       ├── response.js (可选)
│       ├── context.js (可选)
│       ├── application.js (可选)
│       └── agent.js (可选)
├── config
|   ├── plugin.js
|   ├── config.default.js
│   ├── config.prod.js
|   ├── config.test.js (可选)
|   ├── config.local.js (可选)
|   └── config.unittest.js (可选)
└── test
    ├── middleware
    |   └── response_time.test.js
    └── controller
        └── home.test.js

上記のように、フレームワークによって合意されたディレクトリ：

app / router.jsは、URLルーティングルールを構成するために使用されます。詳細については、ルーターを参照してください。
app / controller / **は、ユーザーの入力を解析し、処理後に対応する結果を返すために使用されます。詳細については、Controllerを参照してください。
app / service / **は、ビジネスロジック層の記述に使用されます。これはオプションであり、推奨されます。詳細については、「サービス」を参照してください。
app / middleware / **は、オプションのミドルウェアを作成するために使用されます。詳細については、ミドルウェアを参照してください。
app / public / **は、静的リソースを配置するために使用されます。オプションです。詳細については、組み込みのプラグインegg-staticを参照してください。
app / extends / **はフレームワークを拡張するために使用されますが、オプションです。詳細については、フレームワーク拡張機能を参照してください。
config/config。{env}.jsは、構成ファイルの書き込みに使用されます。詳細については、構成を参照してください。
config / plugin.jsは、ロードする必要のあるプラグインを構成するために使用されます。詳細については、プラグインを参照してください。
test / **は単体テストに使用されます。詳細については、単体テストを参照してください。
app.jsとagent.jsは、起動時の初期化作業をカスタマイズするために使用されます。これらはオプションです。詳細については、「カスタマイズの開始」を参照してください。agent.jsの役割については、エージェントメカニズムを参照してください。

組み込みプラグインによって合意されたディレクトリ：

app / public / **は、静的リソースを配置するために使用されます。オプションです。詳細については、組み込みのプラグインegg-staticを参照してください。
app / schedule / **は、スケジュールされたタスクに使用されます。オプションです。詳細については、スケジュールされたタスクを参照してください。

独自のカタログ仕様をカスタマイズする必要がある場合は、ローダーAPIを参照してください。

app / view / **は、テンプレートファイルを配置するために使用されます。これはオプションであり、テンプレートプラグインによって合意されます。詳細については、テンプレートのレンダリングを参照してください。
app / model / **は、egg-sequelizeなどのドメイン関連プラグインによって合意されたオプションのドメインモデルを配置するために使用されます。

効果が良いと思われる場合は、フォーカスと賞賛を追加し、フロントエンドの実践的な開発スキルを毎日共有してください