0.はじめ
のブログには、定期的な概要を紹介しています。現時点で物事プラットフォームの最初の版は、完全なものになりました。フレームワークは、基本的には変更されないまま、残りはUIの一部を調整するだけでなく、あそこのハードウェアおよび市場で、このプラットフォームを促進する方法を見てすることです。あなたはお金を固定することができます。初版システムは単純なものですが、物事の全体のビジネスを理解するために多くの助けを持っています。その理由は、10個の餃子を食べるのが好き、最後のフルを食べますが、無駄にフロント9でそれを言うことはできません。私は制御することはできませんが、ハードウェア、マーケティング、プロジェクトなど、。しかし、プラットフォームおよび反復計画の第二版が停止することはできません。Second Editionのプラットフォームのもの、既存のエンタープライズ開発フレームワークを使用すると、フロントとリアの端から分離されているが、フレームのフロントエンドは、Vueのを過ごすために開始します。
しばらく前に、エンタープライズクラスのエンド足場の開発プラットフォームの前と後の人が推奨します。Bladex。Https://bladex.vip/#/テストされています[公式サイト]、本当に良い、いくつかの機能があります。私は自分自身がはるかに良いことを書いたよりも。次のブログは、環境全体と簡単な設定プロセスの開発を記録するように設定します。
1.認定
ここまたは購入の承認、また3999、永久使用することをお勧めします。同社では、このコストは本当に特別な費用対効果の高いです。ここでは、商業的導入としてBladexブートのバージョンのライセンスを取得されます。一度許可、他の側は、プライベートgitリポジトリのアカウントのパスワードを与える、ログイン、ダウンロードの終了前と後に、IDEにインポートしたソースコードをダウンロードしてください。
2.バックエンドを設定し
、私は、IDEのバージョン2.1.0を使用していますここで、私は、Eclipseを使用するには、プラグインロンボクをインストールする必要があります。データベースPostgresqlの、Redisのと同様に、フロントエンドNodeJS、VSCodeこれらの自己インストールするとして。
まず、SQLスクリプトに、データベースを作成します。私は、PostgreSQLの例に来ました。
アプリケーション・dev.yaml設定
の構成application.ymlを、ポートを変更するために注意を払うと私は8080にしています
上記の構成後に、プロジェクトが開始され、開始、原因フロントの分離および後端に、我々はサーベルを設定していない、あなたが最初のhttpを訪問することができます：// 127.0.0.1:8080/doc.html、BladeX通常の開始を確認。
フロントエンドの構成3.
前面と背面にはIが異なるマシンに配備されたここで終了します。まず、VSCodeにコードをダウンロードしてください。
設定vue.config.js、ターゲットアドレスとポートのいくつかの変更がBladeXにアクセスします。devServer.portはBladeXアクセスアドレスです。
設定後、サービスを開始するコマンドを実行します
1本の 糸をインストール 2糸の実行がサーブ
訪問します。http：//172.16.23.241：8080 / 
クリックしてログインし、このために、我々は、インストールBladeX環境を完了して構築してきました。
4.簡単なデモを書く
データベーステーブルを作成します
。1 - テスト表 2は、 作成 表のtb_wunaozaiを（ 3。 ID BIGSERIAL プライマリ キーは、 - 主キーidが、一般的な形式は持参しなければならない 。4 タイトルVARCHAR（255）、 - カスタムタイトル 。5 コンテンツVARCHAR（255）、 - カスタムコンテンツ 6 時間のタイムスタンプ、 - カスタム、時間 7 情報VARCHAR（256）、 - カスタムは、ノート 8 tenant_id VARCHAR（12）、 - あなたはマルチテナンシーを有効にした場合、持参する必要が 9 CREATE_USERのBIGINTを、 - 必要な、ユーザーIDの作成 10 CREATE_DEPTのBIGINTを、 - 必要な、作成部署ID 11 CREATE_TIMEのタイムスタンプを、 - 作成するために必要な時間 12はされ update_user BIGINT、 - 必要なアップデートは、ユーザーID 13がある UPDATE_TIMEのタイムスタンプ、 - 必須、更新 14の ステータスINT、 -必要な状態 15 IS_DELETED のint - 必要な、ソフト削除された 16）。
背景システムは、データソースを設定し、自動的にコードを生成します
ソース：ソースから取得された対応するライブラリデータを選択するため、管理データを配置された
モジュール名：コンフィギュレーションの名前を指定し、コード生成は、同じ効果を生じない
サービス名：発生、対応する接頭コントローラ、及び分割後-名前サブ後者記号列の前端
テーブル名：コード生成に対応するテーブルの名前
テーブル接頭辞：エンティティ・クラスを生成する際に、接頭辞を無視するが設定されていない場合、テーブル作成エンティティはtb_wunaozai TbWunaozaiありますWunaozaiのために生成されたエンティティtb_プレフィックスとして設定した場合は
、テーブルの主キー名：主キー名
パッケージ名：バックエンドのコード生成パッケージ
基礎となるビジネス：[はい]を選択した場合、エンティティは、前章で赤BaseEntityを、継承します事業分野の基礎となるボックスは
、いくつかの複雑なモジュールでは、と選択肢が自身の生成しますされている場合、VOラッパーを使用します：ラッパー
、バックエンドの世代のパスを：バックエンドエンジニアリングのルート
フロントエンドは、パスを生成します：フロントエンドのルートエンジニアリング
パスを生成するには、プロジェクトのルートディレクトリに直接書き込むことができますが、私は考えます リスクポイント、または実際の過去をコピーし、別のディレクトリに保存します。
セイバーディレクトリに生成されたコードに対応する遠位端。
設定メニューは、アクセス許可
メニューを生成し、生成されたSQLバックエンドコードには、直接SQLデータベースを実行することができます。
1 INSERT INTO blade_menu(id, parent_id, code, name, alias, path, source, sort, category, action, is_open, remark, is_deleted) 2 VALUES ('1187567985634902017', 0, 'wunaozai', '', 'menu', '/wunaozai/wunaozai', NULL, 1, 1, 0, 1, NULL, 0); 3 INSERT INTO blade_menu(id, parent_id, code, name, alias, path, source, sort, category, action, is_open, remark, is_deleted) 4 VALUES ('1187567985634902018', '1187567985634902017', 'wunaozai_add', '新增', 'add', '/wunaozai/wunaozai/add', 'plus', 1, 2, 1, 1, NULL, 0); 5 INSERT INTO blade_menu(id, parent_id, code, name, alias, path, source, sort, category, action, is_open, remark, is_deleted) 6 VALUES ('1187567985634902019', '1187567985634902017', 'wunaozai_edit', '修改', 'edit', '/wunaozai/wunaozai/edit', 'form', 2, 2, 2, 1, NULL, 0); 7 INSERT INTO blade_menu(id, parent_id, code, name, alias, path, source, sort, category, action, is_open, remark, is_deleted) 8 VALUES ('1187567985634902020', '1187567985634902017', 'wunaozai_delete', '删除', 'delete', '/api/blade-wunaozai/wunaozai/remove', 'delete', 3, 2, 3, 1, NULL, 0); 9 INSERT INTO blade_menu(id, parent_id, code, name, alias, path, source, sort, category, action, is_open, remark, is_deleted) 10 VALUES ('1187567985634902021', '1187567985634902017', 'wunaozai_view', '查看', 'view', '/wunaozai/wunaozai/view', 'file-text', 4, 2, 2, 1, NULL, 0);
执行后，刷新前端页面，然后需要简单编辑调整一下。这里我放到工作台的下级菜单
重启BladeX和Saber，然后打开新增加的功能页。
6.修改、调整前端代码
修改wunaozai.vue主键里面的data数据的option属性。
1 option: { 2 height:'auto', 3 calcHeight: 350, 4 tip: false, 5 border: true, 6 index: true, 7 viewBtn: true, 8 selection: true, 9 column: [ 10 { 11 label: "标题", 12 prop: "title", 13 span: 12, 14 search: true, 15 rules: [{ 16 required: true, 17 message: "请输入", 18 trigger: "blur" 19 }] 20 }, 21 { 22 label: "时间", 23 prop: "time", 24 span: 12, 25 type: 'date', 26 format: 'yyyy-MM-dd', 27 valueFormat: 'yyyy-MM-dd 00:00:00', 28 rules: [{ 29 required: true, 30 message: "请输入", 31 trigger: "blur" 32 }] 33 }, 34 { 35 label: "内容", 36 prop: "content", 37 span: 24, 38 type: "textarea", 39 minRows: 6, 40 rules: [{ 41 required: true, 42 message: "请输入", 43 trigger: "blur" 44 }] 45 }, 46 { 47 label: "备注", 48 prop: "info", 49 span: 24, 50 rules: [{ 51 message: "请输入", 52 trigger: "blur" 53 }] 54 }, 55 ] 56 }
调整后，显示的效果。
更多配置，请参考这个文档 https://avuejs.com/doc/crud/crud-doc
那个刷新按钮没有响应事件需要增加
@refresh-change="refreshChange"
1 refreshChange(page){ 2 this.onLoad(this.page); 3 }
至于模糊查询，就需要写代码了。本次不详细说明。
到此，简单的搭建环境和CURD功能已经完成，还是比较简单的，需要写代码的地方不多，简单配置一下，就是一个页面。
本文地址：https://www.cnblogs.com/wunaozai/p/11739874.html
个人主页：https://www.wunaozai.com/
