RuoYiフレームワークに基づくフロントエンドとバックエンドの分離バージョン開発の詳細な説明

1. ソースコードのダウンロード

1. Ruoyi の公式 Web サイト http://www.ruoyi.vip/ にアクセスし、上部のメニュー バー [ソース コード アドレス] に移動し、フロントエンドとバックエンドの分離バージョンを選択します。

ここに画像の説明を挿入します

2. ダウンロード方法は、①アドレスをコピーしてgitでダウンロードする②zipパッケージをローカルにダウンロードして解凍する、の2通りからお選びいただけます。右側で、ダウンロードする過去のバージョンをプレビューして選択できます。バージョンが更新されると、フレームワークのバグ修正やアップグレードが行われるため、通常は最新バージョンを選択してください。

ここに画像の説明を挿入します

2. 環境の準備とコードの修正

1.環境整備

バックエンド:jdk1.8+ mysql redis maven
フロントエンド:node.js

2. コードの修正

プロジェクト名、モジュール名、および「ruoyi」関連の名前を変更します。

(1) フロントエンドとバックエンドの別バージョンであるため、フロントエンドとバックエンドのコードを別人が作成し、管理を容易にするためにフロントエンドとフロントエンドのコードを分けています。メンテナンスのための 2 つのプロジェクト。ruoyi-ui モジュールをフロントエンド プロジェクトとしてコピーし、残りのモジュールをバックエンド プロジェクトとして別のフォルダーを作成します。

2 つのプロジェクトに分割

バックエンドプロジェクトディレクトリ

バックエンドディレクトリ

フロントエンドプロジェクトディレクトリ

フロントエンドディレクトリ

(2) 右クリックでプロジェクト名、モジュール名を直接変更できます。

ここに画像の説明を挿入します

(3) プロジェクト内には、パッケージ名、クラス名など、「ruoyi」関連の名前が多数ありますが、命名仕様により大文字と小文字が区別されます。Java では厳密に大文字と小文字が区別されるため、一律に置き換えることはできません。大文字と小文字を区別して置換する必要があります。Ctrl+Shift+R を使用してグローバルに検索および置換し、以下に示すように、ケースのロックに注意してください。ケース ロック ボタンのスタイルと位置は、IDEA のバージョンによって異なる場合があります。

ここに画像の説明を挿入します

(4) バックエンド構成ファイルを変更し、application-druid.yml のデータベース接続構成を変更し、application.yml の Redis 構成を変更します。

ここに画像の説明を挿入します
ここに画像の説明を挿入します

(5) フロントエンド構成ファイルを変更し、vue.config.js のプロキシを変更し、IP とポートをバックエンド サービスと一致させます。

ここに画像の説明を挿入します

3. フロントエンドとバックエンドの起動

1. バックエンドの起動

起動ファイルを実行するだけで、コンソールに次の出力が表示されれば起動は成功です。

ここに画像の説明を挿入します

2. フロントエンドの起動

まず、node.js がマシンにインストールされていることを確認します。インストールする必要はありません。

# 安装依赖
npm install
# 启动服务
npm run dev

ここに画像の説明を挿入します

3. 検証を開始する

ログイン ページを表示するには、ローカル サービス アドレス http://localhost:8080 をリクエストします。

ここに画像の説明を挿入します

4. mybatis-plus の統合

1.依存関係を導入する

<!-- mybatis plus -->
<dependency>
   <groupId>com.baomidou</groupId>
   <artifactId>mybatis-plus-boot-starter</artifactId>
   <version>3.5.1</version>
</dependency>

2. コードの修正

MyBatisConfig.java ファイルの 127 行目を次のように変更します。

final MybatisSqlSessionFactoryBean sessionFactory = new MybatisSqlSessionFactoryBean();

変更されたコードは次のとおりです

ここに画像の説明を挿入します

この時点で、Ruoyi フレームワークと mybatis-plus の構築の統合が完了しました。
公式ドキュメントを添付します: http://doc.ruoyi.vip/ruoyi-vue/

おすすめ

転載: blog.csdn.net/secretdaixin/article/details/132445818