シャオシャオは再び学習状態に入りました、この時シャオシャオは最近jsのコンテンツに接触し、その後tsに関連するいくつかのコンテンツに接触しました、従ってシャオシャオの主な学習コンテンツはtsです。
依存関係のインストール
ここではeggとtsという2つの依存関係がインストールされています。
tsのインストール
ここで、npm関連のツールが最初にインストールされていることを確認する必要があります。tsのグローバルインストール
npm install -g typescript
グローバルテストの実施
$ tsc -v
Version 3.2.2
これでローカルグローバルtsのインストールは完了です。
eggのインストール
ここでは、eggのグローバルインストールを実装し、依存するプロジェクトを初期化します。作業ディレクトリの作成
mkdir showcase && cd showcase
関連する依存関係のインストール
npm init egg --type=ts
依存関係のインストール
npm i
ランニング・プロジェクト
npm run dev
以下のプロンプトが表示されたら、インストールが開始され、完了したことを意味します。
C:\Users\Administrator\Desktop\untitled4555\ming>npm run dev
> ming@1.0.0 dev C:\Users\Administrator\Desktop\untitled4555\ming
> egg-bin dev
[egg-ts-helper] create typings\app\controller\index.d.ts (5ms)
[egg-ts-helper] create typings\config\index.d.ts (16ms)
[egg-ts-helper] create typings\config\plugin.d.ts (10ms)
[egg-ts-helper] create typings\app\service\index.d.ts (5ms)
[egg-ts-helper] create typings\app\index.d.ts (2ms)
2020-07-31 14:27:49,701 INFO 12416 [master] node version v
2020-07-31 14:27:49,703 INFO 12416 [master] egg version 2.27.0
2020-07-31 14:27:59,512 INFO 12416 [master] agent_worker#1:28076 started (9799ms)
2020-07-31 14:28:10,469 INFO 12416 [master] egg started on "http://...1:7100" (20
765ms)
上記のページにアクセス
コントローラの書き込み
対応するコントローラはここに書き込まれます。
対応するクラスのメソッドの追加
public async show() {
const { ctx } = this;
// eslint-disable-next-line @typescript-eslint/no-unused-vars
const page = ctx.query.page;
console.log(page);
const result = 'ming';
console.log(result);
await ctx.render('ming.tpl', result);
}
関連するルートの追加
import { Application } from 'egg';
export default (app: Application) => {
const { controller, router } = app;
router.get('/', controller.home.index);
router.get('/ming', controller.home.show);
};
テンプレートレンダリングプラグインの追加
デフォルト設定ファイルの編集
import { EggAppConfig, EggAppInfo, PowerPartial } from 'egg';
export default (appInfo: EggAppInfo) => {
const config = {} as PowerPartial<EggAppConfig>;
// override config from framework / plugin
// use for cookie sign key, should change to your own and keep security
config.keys = appInfo.name + '_1596175919808_6331';
// add your egg config in here
config.middleware = [];
// add your special config in here
const bizConfig = {
sourceUrl: `https://.com/eggjs/examples/tree/master/${.name}`,
};
config.view = {
defaultViewEngine: 'nunjucks',
mapping: {
'.tpl': 'nunjucks',
},
};
// the return config will combines to EggAppConfig
return {
...config,
...bizConfig,
};
};
関連プラグインの追加
import { EggPlugin } from 'egg';
const plugin: EggPlugin = {
nunjucks: {
enable: true,
package: 'egg-view-nunjucks',
},
};
export default plugin;
リンクへのアクセス
"http://...1:7100"/ming
テンプレートの内容が表示されます
サービス層の書き込み
ここで関連するサービス・レイヤーを設定します。
関連するインターフェースの定義
export interface NewsItem {
id: number;
title: string;
}
関連するコントローラを書き込みます。
// 関連するメソッドを定義する
// eslint-disable-next-line @typescript-eslint/no-unused-vars
public async list(name: number): Promise<NewsItem[]>{
name = name;
return [{id:3, title: "ming"}] ;
}
制御層で
public async show() {
const { ctx } = this;
// eslint-disable-next-line @typescript-eslint/no-unused-vars
const page = ctx.query.page;
console.log(page);
const result = 'ming';
console.log(result);
await ctx.render('ming.tpl', result);
}
この時点で、最も基本的なサービスレイヤーが構築されました。
ミドルウェア
ミドルウェアは一般的にjwtバリデーション関連のコンテンツに使用されます。ここでは、フロントエンドとバックエンドのバリデーションにjwtが使われています。
新しいミドルウェアカタログの作成
import { Context, Application, EggAppConfig } from "egg";
export default function uuidMiddleWare(options: EggAppConfig['uuid'], app: Application): any {
return async (ctx: Context, next: () => Promise<any>) => {
// name はコンフィグ.default.js のuuid以下の属性は
ctx = ctx;
console.info(options.name);
await next();
};
}
ミドルウェアが関連コンテンツを読み込むための関連設定ファイルの作成
config.default.js
import { EggAppConfig, EggAppInfo, PowerPartial } from 'egg';
export default (appInfo: EggAppInfo) => {
const config = {} as PowerPartial<EggAppConfig>;
// override config from framework / plugin
// use for cookie sign key, should change to your own and keep security
config.keys = appInfo.name + '_1596175919808_6331';
// add your egg config in here
config.middleware = ['uuid'];
// add your special config in here
const bizConfig = {
sourceUrl: `https://.com/eggjs/examples/tree/master/${.name}`,
local: {
msg: 'local',
},
uuid: {
name: 'ebuuid',
maxAge: 1000 * 60 * 60 * 24 * 365 * 10,
},
};
config.view = {
defaultViewEngine: 'nunjucks',
mapping: {
'.tpl': 'nunjucks',
},
};
// the return config will combines to EggAppConfig
return {
...config,
...bizConfig,
};
};
読書の効果は以下の通りです。
