Angular ＋ NestJS 開発環境サンプル2

はじめに

以前作成した Angular ＋ NestJS の開発環境サンプルを改善したので公開。

【ソースコード（GitHub）】
angular-nest-example2

DBはPostgreSQLを使用しています。
最低限の構成で、簡単なCRUD機能のサンプルを動作させることができます。
デモ用などに簡単なWEBアプリを作りたい時とかに、ベースにできればと。

構成

Nxを使ってフロントエンドとバックエンドをmonorepo管理しています。
npm startによってフロントエンド（web）とバックエンド（api）を同時に起動するようにしています。

package.json

  "scripts": {
    "ng": "nx",
    "postinstall": "node ./decorate-angular-cli.js && ngcc --properties es2015 browser module main",
    "start": "run-p start:api start:web",
    "start:api": "nx serve api",
    "start:web": "nx serve web",
    "build": "nx build",
    "test": "nx test"
  },

環境構築方法

細かい手順はGitHubのReadMeに記載しています。
主な流れは、以下の通りです。

１．GitHubからソースコードをクローン。
２．ソースコードのルートでnpm install npm startを実行。
　　これでログイン画面の表示までできる。
３．PostgreSQLのデータベースを作成する。
４．初期テーブルとデータを登録する。
　　これで「admin」または「guest」ユーザでログインできるようになる。

機能

主な機能は以下の通りです。

ログイン

デフォルトで、管理ユーザ（admin）かゲストユーザ（guest）でログインできます。
パスワードはどちらも「123456」です。

ログイン情報はアクセストークン、リフレッシュトークンを使用して管理しています。
デフォルトでは、30分ごとにリフレッシュ、180日で期限切れになります。
また、SecretKeyもenvironment.tsに定義していますので、このあたりは適当に変更してください。

environment.ts

export const environment = {
  production: false,
  // PostgreSQLの接続設定
  pgConf: {
    user: 'postgres',
    password: 'postgres',
    host: 'localhost',
    port: 5432,
    database: 'postgres',
    ssl: false,
  },
  // アクセストークンの設定
  tokenConf: {
    algorithm: 'HS256',
    accessTokenExpiresIn: '30m',          // 有効期限：30分
    refreshTokenExpiresIn: '180 days',    // 有効期限：180日
    accessTokenSecretKey: 'Sv3tnH9pe6DT4Vm9G7UzmDmyM2qTWE38',
    refreshTokenSecretKey: '9JYZxaQfdCjX8iHDC5MLmmv2TgYQLdRv',
  }
};

一覧表示

左のメニューでユーザ管理または入退室管理を選択すると、データを一覧表示します。
列幅とソート順を変更することもできます。（※FireFoxだと幅変更はできないようです。）
また、変更した列幅とソート順はブラウザ（LocalStrage）に記憶させるようにしています。

右上のアイコンから、一覧データをそのままCSV出力することができます。
また、ブラウザに記憶させた列幅を初期化することも可能です。

ダイアログ

登録や編集はダイアログで行うようにしています。

ダイアログはSimpleDialogComponentでコンポーネント化しており、簡単なダイアログであれば以下のようにパラメータを指定するだけで使用することができます。

userMng.component.ts

    // ユーザ登録用のダイアログ表示
    const dialog = this.simpleDialog.open();
    dialog.title = 'user.register';
    dialog.message = '';
    dialog.items = [
      { label: 'user.id', value: data?.id, inputtype: InputType.Display },
      { label: 'user.code', value: data?.code, inputtype: data ? InputType.Display : InputType.Text, required: true, placeholder: '' },
      { label: 'user.name', value: data?.name, inputtype: InputType.Text, required: true, placeholder: 'John Smith' },
      { label: 'user.age', value: data?.age, inputtype: InputType.Text, required: true, placeholder: '20' },
      { label: 'user.sex', value: data?.sex, inputtype: InputType.Radio, required: false, placeholder: '', selectList : Enums.Sex },
      { label: 'user.birthday', value: data?.birthday, inputtype: InputType.Date, required: false, placeholder: '1990/01/01' },
      { label: 'user.password', value: data ? '●●●●●●' : null, inputtype: data ? InputType.Display : InputType.Password, required: true, placeholder: '' },
      { label: 'user.note', value: data?.note, inputtype: InputType.TextArea, required: false, placeholder: '' },
      { label: 'user.auth', value: selectedList, inputtype: InputType.Check, required: false, placeholder: '', selectList : Enums.Auth },
    ];
    dialog.buttons = [
      { class: 'btn-left',                    name: 'cancel', click: async () => { dialog.close('cancel'); } },
      { class: 'btn-right', color: 'primary', name: 'ok',     click: async () => { this.regUserExec(data, dialog); } },
    ];

    // ダイアログの実行待ち
    const result = await dialog.wait();
    if (result !== 'ok') { return; }

その他

その他、右上の歯車アイコンからいくつかの機能を利用できます。

プロフィール

ログインユーザの情報を表示します。

ユーザ管理

ダイアログで簡単な一覧表示、追加、編集、削除を行う機能です。
機能的には左メニューのユーザ管理と同じで、ダイアログで一覧操作するためのサンプルです。

パスワード変更

ログインユーザのパスワードを変更できます。

言語

英語、日本語を切り替えることができます。
現状は日本語しか定義していません。
英語を使用したい場合はapps\web\src\assets\i18n\en.jsonを定義してください。

デフォルトは英語になってますので、日本語しか使用しない場合はapps\web\src\app\common\services\shared.service.tsを変更してください。

shared.service.ts

  constructor(
    private translate: TranslateService,
  ) {
    this.language = localStorage.getItem('language') || '';
    this.theme = localStorage.getItem('theme') || '';

    if (!this.language) { this.setLanguage('en'); }      // ←ここを'ja'に変更
    if (!this.theme) { this.setTheme('default-theme'); }
  }

テーマ

スタイルテーマを変更できます。
Default以外はあまり丁寧に定義していないので、違和感があるかもしれません。

テーマ機能を使用する場合は、apps\web\src\assets\styles\themesの配下にあるscssファイルで細かいスタイルを見直してください。

システム情報

ビルド日時とgit履歴を表示します。

ビルド情報はdistファイルの日時から取得していますので、環境によっては変更が必要かもしれません。
git履歴は、git情報がない（.gitフォルダがない）環境では機能しません。

API

単純なSELECTなどを行いたいだけの場合、簡易的なAPIとしてquery.controller.tsを使用できます。
バックエンド側にはsqlファイルだけを定義し、フロントエンド側からはsqlファイル名とパラメータを指定して呼び出す形です。

userMng.component.ts

      // 検索のクエリを実行
      const values = JSON.stringify([
        this.searchCondition.values[0][0],
        this.searchCondition.values[0][1],
        this.searchCondition.values[1],
        this.searchCondition.values[2],
        this.searchCondition.values[3][0],
        this.searchCondition.values[3][1],
        this.searchCondition.values[4],
        this.searchCondition.values[5][0],
        this.searchCondition.values[5][1],
      ]);

      const ret: any = await this.http.get('api/query?sql=Users/getUsers.sql&values=' + values);
      if (ret.message !== null) {
        alert('Get users failed.\n' + ret.message);
        return;
      }

複雑な処理を行いたい場合や、Restの原則に従った設計にしたい場合は、個別にAPIを作成してください。

ベース

ベースにしたのは以下のアプリです。
Angular ＋ Expressの開発環境サンプル
Angular開発環境サンプル（NestJS版）

また、一部以下のアプリの機能も取り込んでいます。
Angularベースの汎用WEBアプリサンプル