無敵
- 導入
- vue3.0 は springboot と vue をベースにしたバックエンド管理テンプレートで、フロントエンドとバックエンドを分離し、フロントエンドへのインターフェイス (Restfull API) を提供することもできます。
- コードは Alibaba コーディング規約のスキャンと Findbugs の 90% に合格しました。
- WEB側は複数端末ログインに対応しており、端末を個別にメンテナンスすることが可能です。
- ユーザー管理、ロール管理、部門管理、権限管理、メニュー管理、ログ管理など
- vue3 ant-design-vue バージョンと vue2 要素バージョンがあります
- このプロジェクトは完全にオープンソースの MIT です
- 流れ星のように輝け！
開発ドキュメント
元のプロジェクトのアドレス
スタートガイド
次のガイドは、開発とテストのためにローカル マシンにプロジェクトをインストールして実行するのに役立ちます。このプロジェクトをオンライン環境に展開する方法については、展開セクションを参照してください。
インストール要件と手順
- Java環境、 JDK1.8のインストールと設定
- mysql 8をインストールし、データベース ( utf8mb4 、 utf8mb4_general_ci ) を作成し、SQL をインポートします (doc ディレクトリの下)。
- redis をインストールするには、ダウンロードしてインストールするだけです
- 開発ツールにはlombokプラグインをインストールする必要があります（開発ツールにはIDEAを推奨）
- --- バックエンド操作 (問題がある場合、通常は yml 設定ファイル内のデータ ソースの設定エラーです)
- ノード環境のインストールと構成
- vue-cliをインストールし、 vue ディレクトリに入り、
npm install実行します。 - ---フロントエンドで
npm run serve実行します ( WebStormまたはIDEA は、 package.jsonファイルの 6 行目の左側にある緑色の三角形を直接クリックできます)
デモアドレス
展開する
- springboot ディレクトリで
mvn clean packageコマンドを実行してパッケージ化すると、生成されたファイルが /target/build ディレクトリに作成されます。- config ディレクトリには構成ファイルが保存されます。
- lib ディレクトリは、Maven が依存する jar パッケージです。
- 静的ディレクトリには静的ファイルが格納されます
- jar ファイルは生成された jar パッケージです (pom の依存関係が今後も変更されない場合は、jar パッケージを置き換えることしかできません)。
- vue ディレクトリで
npm run buildコマンドを実行してパッケージ化すると、生成されたファイルが /dist ディレクトリに作成されます。- パッケージング構成は.envファイルとvue.config.jsファイルにあります
- デプロイメントサーバーは、 JDK1.8 、 mysql 8 、およびredis環境を構成する必要があります
- jar パッケージは
nohup java -jar springboot.jar &バックグラウンドで実行して、現在のディレクトリのnohup.outファイルにログを出力できます。 - デプロイメント サーバー用にnginx を構成することをお勧めします。Vue はパッケージ化され、nginx の下に配置されます。構成されていない場合は、 jarパッケージと同じディレクトリのstaticに配置できます。
よくある間違い
java.lang.RuntimeException: Cannot resolve classpath entry: E:maven-repositorymysqlmysql-connector-java8.0.15mysql-connector-java-8.0.15.jar- エラー: データベースに基づいてエンティティ クラスを生成します
- 解決策: resource/config/generator-config.xml の6 行目の jar パッケージ パスを独自の jar パッケージ パスに変更します。
後部：
スプリングブート、mybatis、redis
- 導入
- springbootテンプレートに基づいて作成されたプロジェクト
- 基本構成
- .ymlファイルでは関連情報を構成できます
- configディレクトリには、共通のモジュール構成が含まれています。
- フィルタは、クロスドメイン、パラメータフィルタリングなどで構成されます。
- パラメータ フィルタリングリクエストは、 Jsoup を使用してHTML タグをフィルタリングし、先頭と末尾のスペースを自動的に削除します(フィルタリング レベルはカスタマイズ可能)
- 権限管理
@AuthTokenアノテーションを使用したインターフェイス。リクエスト ヘッダーにはアクセスするためのトークンが必要です- vue フロントエンド ページと連携してルーティングを動的にレンダリングし、表示ボタンを非表示にします。ボタンは
this.$globalFun.getSessionStorage('buttonMap') (フロントエンド) に保存されます。 - インターフェイス レベルのアクセス許可を正確に行うには、機能管理のメニューまたはボタンに対応する API を改善する必要があります。改善しない場合は、トークンの存在後にデフォルトで許可されます。
- パッケージング ファクトリは CURD を使用し、 BaseService を継承します。
-
baseInsert()とbaseUpdate() NULL 値を持つフィールドを自動的にフィルターします。
- データベースに基づいてエンティティクラスを自動生成
- org.mybatis.generator.plugin.MyBatisTest.main()メソッドを実行します。
- 特定の構成リソース/config/generator-config.xml
- ログは毎日保存されます。具体的な設定は、 resources/config/logback-spring.xml に保存されます。
- データベースに基づいてデータベースドキュメントを自動生成します
- org.screw.ScrewTest.testScrew()メソッドを実行します。
フロントエンド：
ビュー:
導入
- vue cliをベースに作成したプロジェクト
- インターフェイス UI:要素 ui
- ネットワークリクエスト: axios
- グローバル呼び出しメソッド
this.$axios({ url: '', data: {}, success(data) {} });- URL: ドメイン名の後のアドレスのみが必要です
- 成功: コールバックはコードが 200 の場合のみ処理する必要があります。
- グローバル変数とメソッドは /src/utils ディレクトリにあります
- /src/assets/sass/element-variables.scss ファイルの element-ui スタイルをオーバーライドします。
- ほとんどのプロジェクトにはコメントが付いています
基本構成
- バックエンドと連携して動的ルーティングを実装します。機能管理フォームにパスを入力します。デフォルトのルート パスは/src/views/main/**/*/Index.vue/です。
- .env.production/developmentファイルとvue.config.jsは設定ファイルです
パッケージでよく使用されるコンポーネント
- ダイアログ:ポップアップ ボックス
- 詳細: タイトル + コンテンツの形式でデータを表示します
- form: フォーム送信。
@submitフォーム検証後の状況を処理するだけで済みます。 - インデックス: 通常のポップアップ ボックス
- テーブル: テーブル
- フォームで受け入れられる戻り例:
{"list":[],"pageNum":1,"pageSize":10} - テーブル データ リクエスト
tableDataRequest: { url: '', data: {} }- URL: リクエストアドレス
- データ: 追加パラメータ、トップ検索で使用
- テーブル表示
tableColumns: [ {prop: 'username', label: '用户名',formatter(){ return ''; }} ]配列を受け入れます ---layui テーブルを参照してください- フォーマッタ: 複雑な表示、dom を返すことができます
謝辞
まず第一に、 springboot 、 vue 、 element-uiおよびその他の優れたオープンソース プロジェクトのおかげです。 次に、このプロジェクトは多くのオンラインの例を参照しています。その場合、答えは 1 つだけです。
