YoYoCms.AbpProjectTemplate

デモウェブサイト

まずはこのプロジェクトについて話しましょう。 タイトルのように、これは VUE+.NET をベースに開発されたフレームワークであり、グループ メンバーが vue バージョンを求めていた ABP フレームワークでもあります。 まずはホームページを見てみましょう。

とても素晴らしいデモアカウントを提供します。

デモのアドレス: http://vue.yoyocms.com/ アカウント: demo パスワード: bb123456 もちろん、検証のために自分でアカウントを登録することもできます。

導入

まず、ABP フレームワークを知らない学生のために、ABP フレームワークが何であるかを説明しましょう。

ABPとは「ASP.NET Boilerplate Project（ASP.NETサンプルプロジェクト）」の略称です。 ASP.NET ボイラープレートは、ベスト プラクティスと一般的なテクノロジを使用して最新の WEB アプリケーションを開発するための新しい出発点であり、ユニバーサルな WEB アプリケーション フレームワークおよびプロジェクト テンプレートになることを目指しています。フレームワークABP は、最新の ASP.NET CORE、ASP.NET MVC、および Web API テクノロジに基づくアプリケーション フレームワークです。また、一般的なフレームワークとライブラリを使用して、認可、依存関係注入、検証、例外処理、ローカリゼーション、ロギング、キャッシュなどの使いやすい一般的な機能を提供します。アーキテクチャABP は、マルチレイヤ アーキテクチャ (ドメイン レイヤ、アプリケーション レイヤ、インフラストラクチャ レイヤ、プレゼンテーション レイヤ) とドメイン駆動設計 (エンティティ、リポジトリ、ドメイン サービス、アプリケーション サービス、DTO など) を実装します。依存関係の挿入などのベスト プラクティスを実装するための優れたインフラストラクチャも実装および提供されます。テンプレートABP は、プロジェクトのスタートアップ テンプレートを簡単に作成します。これには、最も一般的に使用されるフレームワークとライブラリがデフォルトで含まれています。また、単一ページ (Angularjs) またはマルチページ アーキテクチャ、EntityFramework または NHibernate を ORM として選択することもできます。詳細については、公式 Web サイトをご覧ください。

構造

今回選定したプロジェクトの構成は以下の通りです。

• .netフレームワーク4.6
• VUE + VUEX + VUE-ROUTER はフロントエンドとバックエンドの分離技術ですが、ABP 設計のため、純粋にフロントエンドとバックエンドを分離したい場合は、分離があまり純粋ではありません。認可するのが少し面倒なので、トークンメソッドは使用しません。

前回の記事【ABPフレームワーク】Dynamic Web APIのインターセプトの使い方では、認可検証にトークンを使用する方法を説明しましたが、現在も検証にはCookieメソッドが使用されています。 ただし、フロントエンドとバックエンドの開発方法には影響しません。 ログイン ページを見てください。

機能実現

• ログイン 登録
• 多言語切り替え
• メッセージ管理
• テナント管理（マルチテナント）
• 役割管理
• セッション
• 認可（権利管理）
• 設定管理
• 多言語管理
• 監査ログ
• Dynamic WebApiなどの機能は、ぜひご自身で体験していただければと思います。

.NET スキルが十分ではない場合、またはスキルを向上させたい場合は、ABP が最適な学習フレームワークです。

フロントエンド技術スタックの説明:

####フロントエンドで使用されるフレームワーク 1.vue
2.vuex
3.vueルーター
4.jクエリ

UIライブラリ

1.要素-ui
2.波
3.ブートストラップ
4.BSバドミン

プロジェクトの構造

• Webpack によってビルドされたスクリプトをビルドする
• config webpack ビルド設定
• dist ビルド後のファイル
• srcソースコードディレクトリ
  • アセット グローバル リソース ファイル
  • 共通のパブリックスタイルのパブリックメソッド
    • 言語 言語パック (一時的に使用されていません)
    • ユーティリティツールクラス
  • コンポーネント グローバルコンポーネント
  • フィルター フィルター
  • mixins にはさまざまなスタイルの Sass が保存されます
  • ルーターのルーティング設定
  • サービスインターフェースリクエスト層
  • ストアブエックス
  • ベンダーがサードパーティのライブラリを保存する
  • ビュー ビュー ファイル
  • vuePlugin カスタム Vue プラグイン
• static 静的ファイル、コンパイルされたディレクトリは変更されません。

以下はフロントエンドスタッフの原文です。vue のインターフェースを改善するために時間を割いてくださった Huixin666 に感謝します。

開発手順

開発を進める前に、 es6 、 sass 、 vue 、 vue-router 、およびvuexの基本的なスキル ベースがあることを前提としています。
You Yuxi のアドバイスを読むことをお勧めします

フロントエンドの依存関係をインストールする

Web项目の Assets ディレクトリを入力します。

 $ npm i

プロジェクトを実行する

最初にバックグラウンドを開始することを忘れないでください

 $ npm run dev

webpack は Express を使用してポート 8986 で Web サーバーを起動します

展開する

 $ npm run build

このコマンドは、すべてのファイルをdistディレクトリにコンパイルします。上記のプロジェクト構造図を参照してください。

1.ページを追加

• まずsrc/viewsに移動してモジュール ディレクトリを作成します。
  たとえば、現在、 administrationというディレクトリを追加しました。このディレクトリには、すべてのシステム管理ページが含まれています。各モジュールには、 componentsとassetsディレクトリも含まれる場合があります。つまり、その中のコンポーネントとリソースは現在のモジュールにのみ属します。
• 次に、このモジュールの下のすべてのページを制御する親ルーティング ページとしてIndex.vueを追加します。
  キープアライブの役割に注意が必要
• 次に、 User.vueなどの必要なページを追加します。
  データを取得する必要がある場合は、 methodsにfetchDataというメソッドを追加してください。このメソッドでは、データを取得した後にabp.view.setContentLoading(false)を呼び出して、コンテンツ領域の読み込みマスク レイヤーを閉じる必要があります。 (User.vueを参照できます)

2.ルートの追加

• src/routerディレクトリに入り、ルーティング モジュール フォルダーを追加し、そのフォルダー内にindex.jsという名前のファイルを追加します。
• 次に、現在追加されているルーティング情報をsrc/router/index.jsに登録します。

3.サービスの追加

• src/servicesディレクトリに入り、インターフェース要求に対応するモジュールを追加します。たとえば、 roleService.jsファイルによってエクスポートされたオブジェクトはroleService.js abp.services.yoyocms.roleに配置されます。この方法で使用する利点は、均一に管理および拡張できることです。

以上がvue版ABPの基本的な状況です。

ダウンロードアドレス:

vue バージョンのオープンソース アドレス: https://github.com/yoyocms/YoYoCms.AbpProjectTemplate vue バージョンのデモ アドレス: http://vue.yoyocms.com/ angularJS バージョンのオープンソース アドレス: https ://github.com/ltm0203/YoYoCms angularJS バージョンのデモアドレス: http://www.yoyocms.com

良い提案やバグのフィードバックがある場合は、github に問題を提出してください。

同時に、公式の ABP テンプレートと同様の機能を持つプロジェクト ジェネレーターも作成しました。機能は年内にリリース予定ですので、ご期待ください。