Vue フレームワーク -- Ruoyi 分析

Ruoyi は、Vue.js と Spring Boot をベースにしたオープンソースのエンタープライズレベルの高速開発プラットフォームで、フロントエンドとバックエンドの分離ソリューションの完全なセットを提供します。Ruoyi の主な機能とアーキテクチャを以下に分析します。

8つの主要なプロセス

フロントエンドテクノロジースタック: Ruoyi は、フロントエンドフレームワークとして Vue.js、UI コンポーネントライブラリとして Element-UI を使用し、Vue Router を介してルーティング管理を実装し、フロントエンドとバックエンドのデータ対話に axios を使用します。
バックエンドテクノロジースタック: Ruoyi は、バックエンドフレームワークとして Spring Boot を使用し、永続化レイヤーフレームワークとして MyBatis-Plus を組み合わせ、権限管理に Shiro を使用し、API ドキュメント生成に Swagger2 を統合します。
コードジェネレーター: Ruoyi は、データベーステーブル構造に従ってフロントエンドコードとバックエンドコードを自動的に生成できるコードジェネレーターセットを提供し、開発効率を大幅に向上させます。
マルチテナントのサポート: Ruoyi は、さまざまなテナントに応じてデータ分離と権限制御を実行できるマルチテナントモードをサポートしています。
完璧な権限管理: Ruoyi は、ユーザー、ロール、権限をきめ細かい方法で制御できる権限管理に Shiro を使用しています。
ログ管理: Ruoyi は、操作ログ、ログインログ、例外ログを記録および照会できるログ管理機能を提供します。
スケジュールされたタスク: Ruoyi は Quartz スケジュールされたタスクフレームワークを統合し、スケジュールされたタスクを構成することでスケジュールされた実行ビジネスロジックを実装できます。
ファイル管理: Ruoyi は、ファイルを管理および操作するためのファイルのアップロードおよびダウンロード機能を提供します。

全体として、Ruoyi は機能が豊富で使いやすいエンタープライズレベルの高速開発プラットフォームであり、開発者がエンタープライズレベルのアプリケーションを迅速に構築および開発できるようにする一連のソリューションとツールを提供します。同時に、Ruoyi には活発なオープンソースコミュニティもあり、開発者が学習して使用できる豊富なドキュメントとサンプルコードを提供しています。

Ruoyiが詳しく説明してくれました

ログインプロセス:

フロントエンド: ユーザーはログインページでユーザー名とパスワードを入力し、ログインボタンをクリックします。
バックエンド: ログインリクエストを受信したバックエンドは、Shiro を使用して本人認証と権限検証を行い、検証に合格するとトークンが生成されてフロントエンドに返され、ユーザー情報がセッションに保存されます。
フロントエンド: トークンを受信した後、フロントエンドはトークンをローカルに保存し、同時にホームページにジャンプします。

権限の検証プロセス:

フロントエンド: ページが読み込まれると、フロントエンドはトークンを通じてユーザーの ID を検証し、バックエンドからユーザーの許可情報を取得します。
バックエンド: パーミッションリクエストを受信した後、バックエンドはShiroを使用してパーミッションを検証し、検証に合格した後、対応するデータをフロントエンドに返します。

コード生成プロセス:

フロントエンド: ユーザーはコード生成ページで生成するテーブルを選択し、対応する構成情報を入力して、「生成」ボタンをクリックします。
バックエンド: 生成要求を受信した後、バックエンドはコードジェネレーターを使用して、テーブルの構造と構成情報に従って、対応するフロントエンドコードとバックエンドコードを生成します。
フロントエンド: 生成された結果を受信した後、フロントエンドはユーザーがダウンロードできるように生成されたコードファイルを提供します。

タイミングタスクのプロセス:

フロントエンド: ユーザーは、スケジュールされたタスクのページで作成または編集するスケジュールされたタスクを選択し、対応する構成情報を入力して、保存ボタンをクリックします。
バックエンド: 保存リクエストを受信した後、バックエンドは構成情報に従って対応するスケジュールされたタスクを作成または編集し、タスク情報をデータベースに保存します。
時限タスクの実行: 時限タスクの構成情報に従って、対応するビジネスロジックを定期的に実行します。

ファイルのアップロードプロセス:

フロントエンド: ユーザーはファイルアップロードページでアップロードするファイルを選択し、アップロードボタンをクリックします。
バックエンド: アップロード要求を受信した後、バックエンドは指定されたファイルディレクトリにファイルを保存し、ファイル情報をデータベースに保存します。
フロントエンド: フロントエンドは、アップロードが成功したというメッセージを受信すると、ファイルリストの表示を更新します。

ロギングプロセス:

バックエンド: 主要な操作、ログインおよび例外処理などで、バックエンドはログフレームワーク (log4j など) を使用して、対応するログ情報を記録します。
ログストレージ: ログ情報は、設定に従ってファイルシステムまたはデータベースに保存されます。
ログクエリ: ユーザーは、ログ管理ページを通じて、対応するログ情報をクエリおよび表示できます。

マルチテナンシーのプロセス:

フロントエンド: ユーザーはログインページで対応するテナントを選択し、ユーザー名とパスワードを入力してログインします。
バックエンド: バックエンドは、テナント情報に基づいてデータの分離と権限制御を実行し、異なるテナント間のデータが相互に干渉しないようにします。
データクエリ: 現在ログインしているユーザーのテナント情報に従って、バックエンドはデータクエリ中にデータをフィルタリングおよび制限します。

インターフェースドキュメントの生成プロセス:

バックエンド: バックエンドは、Swagger2 アノテーションを使用して、API インターフェイスと、リクエストパラメーター、応答データなどの関連情報を定義します。
インターフェイスドキュメントの生成: バックエンドが起動すると、Swagger2 はインターフェイスドキュメントを自動的に生成し、インターフェイス情報を表示する UI インターフェイスを提供します。
インターフェイスのテスト: ユーザーはインターフェイスのドキュメントページを通じてインターフェイステストを実行し、リクエストを送信し、応答結果を表示できます。

以上がRuoyiの8つの主要なプロセスの詳細説明ですが、各プロセスはフロントエンドとバックエンドの相互作用と処理を経て、Ruoyiの様々な機能や特徴を実現することができます。

コード例

Ruoyi のいくつかのプロセスのコードサンプルを次に示します。

ログインプロセス:

// 后端 Shiro 身份认证和权限校验
try {
    
    
    Subject subject = SecurityUtils.getSubject();
    UsernamePasswordToken token = new UsernamePasswordToken(username, password);
    subject.login(token);
} catch (AuthenticationException e) {
    
    
    // 处理认证失败的逻辑
}

// 前端存储 Token
localStorage.setItem('token', response.data.token);

// 前端跳转到主页
this.$router.push('/home');

権限の検証プロセス:

// 后端 Shiro 权限校验
if (SecurityUtils.getSubject().isPermitted(permission)) {
    
    
    // 返回相应的数据
} else {
    
    
    // 返回权限不足的错误信息
}

コード生成プロセス:

// 前端发送生成请求
axios.post('/api/generate', {
    
     table: table, config: config })
    .then(response => {
    
    
        // 处理生成成功的逻辑
    })
    .catch(error => {
    
    
        // 处理生成失败的逻辑
    });

// 后端生成代码
public void generateCode(String table, String config) {
    
    
    // 解析表的结构和配置信息
    // 使用代码生成器生成相应的前后端代码
    // 返回生成结果
}

// 前端下载生成的代码文件
window.open('/api/download?filename=' + response.data.filename);

タイミングタスクのプロセス:

// 前端保存定时任务配置
axios.post('/api/schedule', {
    
     name: name, cron: cron, job: job })
    .then(response => {
    
    
        // 处理保存成功的逻辑
    })
    .catch(error => {
    
    
        // 处理保存失败的逻辑
    });

// 后端创建或编辑定时任务
public void saveSchedule(String name, String cron, String job) {
    
    
    // 创建或编辑相应的定时任务
    // 将任务信息存储在数据库中
}

以下は、Ruoyi の他の 4 つのプロセスのコードサンプルです。

ファイルのアップロードプロセス:

// 前端发送文件上传请求
let formData = new FormData();
formData.append('file', file);
axios.post('/api/upload', formData, {
    
    
    headers: {
    
    
        'Content-Type': 'multipart/form-data'
    }
})
.then(response => {
    
    
    // 处理上传成功的逻辑
})
.catch(error => {
    
    
    // 处理上传失败的逻辑
});

// 后端处理文件上传
public void uploadFile(MultipartFile file) {
    
    
    // 保存文件到指定的目录
    // 将文件信息存储在数据库中
    // 返回文件上传成功的消息
}

ロギングプロセス:

// 后端使用日志框架记录日志信息
private static final Logger logger = LoggerFactory.getLogger(UserController.class);

// 后端记录日志
logger.info("用户登录成功");

// 前端查询日志信息
axios.get('/api/logs')
    .then(response => {
    
    
        // 处理日志查询结果
    })
    .catch(error => {
    
    
        // 处理日志查询失败的逻辑
    });

マルチテナンシーのプロセス:

// 前端选择租户并登录
axios.post('/api/login', {
    
     tenant: tenant, username: username, password: password })
    .then(response => {
    
    
        // 处理登录成功的逻辑
    })
    .catch(error => {
    
    
        // 处理登录失败的逻辑
    });

// 后端根据租户信息进行数据隔离和权限控制
public void login(String tenant, String username, String password) {
    
    
    // 根据租户信息查询用户和角色信息
    // 进行身份认证和权限校验
    // 返回登录结果
}

インターフェースドキュメントの生成プロセス:

// 后端使用Swagger2注解定义API接口和相关信息
@Api(tags = "用户管理")
@RestController
@RequestMapping("/api/users")
public class UserController {
    
    
    @ApiOperation("获取用户列表")
    @GetMapping("")
    public List<User> getUsers() {
    
    
        // 返回用户列表
    }
}

// 后端启动时，Swagger2自动生成接口文档
// 用户可以通过接口文档页面进行接口测试和查看接口信息

上記は Ruoyi の 8 つのプロセスの簡略化されたコード例であり、特定の実装にはさらに詳細なロジックが含まれる場合があります。これらの例は、Ruoyi の各プロセスのコード実装を理解するのに役立ちます。