オンライン試験システムの構築(Vue.jsとSpring Bootを使用)

技術スタック

1. フロントエンド - Vue.js

Vue.jsは、軽量なJavaScriptフレームワークで、開発者にとって学習が簡単かつデータバインディングが効率的です。このフレームワークは視覚層に焦点を当てており、他のライブラリや既存プロジェクトとの統合が容易です。Vue.jsの反応型データバインディング機能により、DOMの自動更新が可能になり、フロントエンド開発プロセスが簡素化されます。さらに、強力なコンポーネントシステムを提供し、単一ファイルコンポーネントを使用して複雑なUIをモジュール形式で構築できます。

2. バックエンド - Spring Boot

Spring Bootは、Springフレームワークの拡張版であり、アプリケーションの作成と開発を簡素化します。「Starters」を通じて依存関係管理と設定を簡略化し、「規約優先の設定」原則に基づいて多くの共通設定を自動的に構成します。これにより、Tomcatなどの内蔵サーバーが必要なくなります。また、Actuatorモジュールを含み、アプリケーションの健康状態やメトリクス情報を提供するため、運用環境での監視と問題診断が容易になります。

3. データベース - MySQL

MySQLは、SQLを基盤とするオープンソースのリレーショナルデータベース管理システム(RDBMS)で、高性能、信頼性、および使いやすさからWebアプリケーション開発に広く使用されています。MySQLは多様なオペレーティングシステムプラットフォームをサポートし、強力なデータセキュリティとバックアップ機能を提供します。テーブルを使用してデータを整理し、インデックスを使用してクエリパフォーマンスを最適化します。

4. システムアーキテクチャ - B/S

B/S(ブラウザ/サーバー)アーキテクチャは、ユーザーインターフェースをブラウザ側に集中させ、サーバー側でビジネスロジックとデータストレージを処理します。このアーキテクチャはクロスプラットフォーム性とメンテナンスの容易さを持ち、ユーザーはOSに関係なくブラウザ経由でアプリケーションにアクセスできます。

コード例

<!-- ログインAPI -->
@PostMapping("/auth")
public RespEntity authenticate(@RequestParam String id, @RequestParam String pw) {
    User user = userService.findUserById(id);
    if (user == null || !user.getPassword().equals(pw)) {
        return RespEntity.error("IDまたはパスワードが正しくありません");
    }
    String token = tokenService.createToken(user.getId(), "users", user.getRole());
    return RespEntity.ok(token);
}

// トークン生成サービス
@Service
public class TokenGenerator {
    public String createToken(String userId, String role) {
        Token token = tokenRepo.findByUserId(userId);
        if (token != null) {
            token.setToken(CommonUtil.generateRandomString(32));
            token.setExpireTime(LocalDateTime.now().plusHours(1));
            tokenRepo.save(token);
        } else {
            tokenRepo.save(new Token(userId, CommonUtil.generateRandomString(32), LocalDateTime.now().plusHours(1)));
        }
        return token.getToken();
    }
}

データベース設計

-- MySQLスキーマ
CREATE DATABASE IF NOT EXISTS exam_system;
USE exam_system;

-- ユーザーテーブル
CREATE TABLE users (
    id BIGINT AUTO_INCREMENT PRIMARY KEY,
    username VARCHAR(50) NOT NULL UNIQUE,
    password VARCHAR(255) NOT NULL,
    role ENUM('student', 'teacher', 'admin') DEFAULT 'student'
);

-- 試験結果テーブル
CREATE TABLE exam_results (
    id BIGINT AUTO_INCREMENT PRIMARY KEY,
    user_id BIGINT NOT NULL,
    score INT NOT NULL,
    taken_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
    FOREIGN KEY (user_id) REFERENCES users(id)
);

タグ: vue.js SpringBoot MySQL BrowserServerArchitecture

5月30日 05:21 投稿