Spring Boot と Vue.js を採用した WeChat 向け新生入学登録システムの実装ガイド

システム概要と技術スタック

本プロジェクトは、WeChat ミニプログラムを介して大学生の入学手続きを管理するための包括的なシステムです。バックエンドには高速な開発が可能な Spring Boot を採用し、フロントエンドにはコンポーネント指向の Vue.js を使用しています。データアクセス層では MyBatis を活用し、MySQL をデータベースとして選定しています。

1. バックエンドフレームワーク：Spring Boot

Spring Boot は Spring エコシステムの基盤となる自動化機能を備えています。Tomcat や Jetty などの内蔵サーバーを提供することで、外部環境のセットアップなしにアプリケーションを実行可能です。自動設定機能により、依存関係に応じたクラスパス構成が可能となり、開発プロセスを大幅に効率化します。

package com.example.registration;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;

@SpringBootApplication
@RestController
public class RegistrationServiceApplication {

    public static void main(String[] args) {
        SpringApplication.run(RegistrationServiceApplication.class, args);
    }

    @GetMapping("/system/status")
    public String checkHealth() {
        return "Service is operational.";
    }
}

上記のコードは、システムの起動クラスおよびヘルスチェックエンドポイントを示しています。@SpringBootApplicationアノテーションによりコンポーネントスキャンと自動設定が有効化され、@GetMappingを使用することで特定の URL パスに対するリクエスト処理が定義されています。

2. フロントエンドフレームワーク：Vue.js

VUE.js は双方向データバインディングと仮想 DOM の採用により、高パフォーマンスな UI 更新を実現します。データのステート変更に応じて視覚要素が自動的に再レンダリングされるため、開発者は DOM 操作に注力することなくビジネスロジックに集中できます。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>入学申請フォーム</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
    <div id="entry-interface">
        <h3>{{ formTitle }}</h3>
        <p>申請ステータス：{{ currentStatus }}</p>
        <button v-on:click="submitEntry">情報を送信</button>
    </div>

    <script>
        const vm = new Vue({
            el: '#entry-interface',
            data: {
                formTitle: '新入生登録',
                currentStatus: '入力中'
            },
            methods: {
                submitEntry: function() {
                    this.currentStatus = '提出済み';
                }
            }
        });
    </script>
</body>
</html>

この例では、ID で識別された DOM 要素に Vue インスタンスをマウントし、dataオブジェクト内のプロパティを変更すると、画面表示が即座に反映される動作を確認できます。v-onディレクティブを用いることで、ユーザーインタラクションに対するメソッド呼び出しが可能になります。

3. データ永続層：MyBatis と MySQL

持久層には ORM マッピングを行う MyBatis を導入しました。SQL と Java コードを分離することで、データベーススキーマの変更に対する柔軟性を確保しています。

入学情報の格納に用いるテーブル構造の一例を以下に示します。

DROP TABLE IF EXISTS `admission_records`;
CREATE TABLE `admission_records` (
  `record_id` bigint(20) NOT NULL AUTO_INCREMENT COMMENT '登録 ID',
  `full_name` varchar(50) NOT NULL COMMENT '氏名',
  `department_code` varchar(20) NOT NULL COMMENT '学部コード',
  `entry_status` int(1) DEFAULT 0 COMMENT '状態 (0:未完了，1:完了)',
  `created_at` datetime DEFAULT CURRENT_TIMESTAMP COMMENT '作成日時',
  PRIMARY KEY (`record_id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COMMENT='入学記録管理';

INSERT INTO `admission_records` (`full_name`, `department_code`, `entry_status`)
VALUES ('Tanaka Sato', 'ENG001', 0), ('Yamada Kei', 'ART003', 1);

主鍵である record_id を除き、各フィールドは入学関連の具体的な情報を保持するように設計されています。

4. 認証・認可メカニズム

API へのアクセス制御のためにトークンベースの認証を採用しています。クライアントからのリクエストヘッダーに含まれるトークンの妥当性を検証するフィルタを実装します。

import org.springframework.stereotype.Component;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.springframework.web.servlet.HandlerInterceptor;

@Component
public class JwtValidationFilter implements HandlerInterceptor {

    private static final String AUTH_HEADER_KEY = "X-Auth-Token";

    @Override
    public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {
        // オプションリクエストの処理
        if ("OPTIONS".equalsIgnoreCase(request.getMethod())) {
            return true;
        }

        String authHeader = request.getHeader(AUTH_HEADER_KEY);
        
        if (authHeader == null || !authHeader.startsWith("Bearer ")) {
            response.setStatus(HttpServletResponse.SC_UNAUTHORIZED);
            response.getWriter().write("{\"error\": \"Missing token\"}");
            return false;
        }

        // トークン検証ロジック（簡易版）
        boolean isValid = validateToken(authHeader.substring(7));
        if (!isValid) {
            response.setStatus(HttpServletResponse.SC_FORBIDDEN);
            return false;
        }

        return true;
    }

    private boolean validateToken(String tokenString) {
        // ここに実際の署名検証処理を追加
        return tokenString.length() > 10; 
    }
}

このインタフェース実装では、リクエスト前にトークンの形式と有効性を確認します。無効なトークンに対しては適切な HTTP ステータスコードを返却し、セキュリティリスクを防止します。

5. システムテスト手法

品質保証のため、機能要件を満たすことを目的とした黑箱テストを実施しました。主要なモジュールとしては、ログイン認証、ユーザー情報の CRUD 操作が含まれます。

ログイン機能の検証ケース：

正常系：正しい UID とパスワードを入力した場合、アクセストークンが発行されること。
異常系 1：存在しない UID を指定した場合、エラーメッセージが表示されること。
異常系 2：パスワードが不一致の場合、再接入を促す通知が生成されること。

また、ユーザー登録機能においては、重複チェックや必須項目のバリデーションテストを行い、データベースへの整合性が保たれていることを確認しました。テスト結果に基づき、必要な箇所の修正を加え、最終的にシステムの安定稼働を保証しています。

タグ: spring-boot vue.js wechat-miniprogram MyBatis java-backend

6月3日 20:23 投稿

異端開発室