SpringBootとVueを活用した花販売プラットフォームの実装戦略

技術スタックの特徴

バックエンドにはSpringBootフレームワークを採用。組み込みサーバー(Tomcat/Jetty)によるデプロイ簡略化と、依存関係に基づく自動設定機能が開発効率を向上させます。Spring SecurityやSpring Data JPAとの統合により、セキュリティ対策やデータ操作を最小限の設定で実現可能です。

フロントエンドはVue 3のComposition APIを基盤に構築。リアクティブシステムによる状態管理と仮想DOM技術を活用し、UI更新の最適化を実現しています。コンポーネント指向のアーキテクチャにより、商品表示や注文フローなどのモジュールを再利用可能に設計しています。

データアクセス層にはMyBatis-Plusを採用。アノテーションによるエンティティマッピングと、条件付きクエリビルダー機能でSQL記述量を削減。特に動的クエリ生成やページネーション機能が、在庫管理や注文検索の実装を簡素化しています。

認証システムの実装

トークンベースのセッション管理を実装。有効期限付きの認証トークンを生成し、リクエスト毎に検証する仕組みを構築しました。

// 認証トークン生成サービス
@Service
public class AuthService {
    public String generateSessionToken(Long userId, String account, String role) {
        AuthToken token = tokenRepository.findByUserIdAndRole(userId, role);
        String newToken = RandomStringUtils.randomAlphanumeric(32);
        LocalDateTime expiry = LocalDateTime.now().plusHours(1);
        
        if (token != null) {
            token.setTokenValue(newToken);
            token.setExpiryTime(expiry);
            tokenRepository.update(token);
        } else {
            tokenRepository.insert(new AuthToken(userId, account, role, newToken, expiry));
        }
        return newToken;
    }
}
// 認証インターセプター
@Component
public class AuthInterceptor implements HandlerInterceptor {
    private static final String AUTH_HEADER = "Authorization";
    
    @Override
    public boolean preHandle(HttpServletRequest request, 
                           HttpServletResponse response, 
                           Object handler) {
        if (CorsUtils.isPreFlightRequest(request)) {
            response.setStatus(HttpStatus.NO_CONTENT.value());
            return false;
        }
        
        if (handler instanceof HandlerMethod && 
            AnnotationUtils.findAnnotation(((HandlerMethod) handler).getMethod(), PublicAccess.class) != null) {
            return true;
        }
        
        String token = request.getHeader(AUTH_HEADER);
        AuthToken authToken = tokenService.validateToken(token);
        
        if (authToken == null) {
            response.setStatus(HttpStatus.UNAUTHORIZED.value());
            return false;
        }
        
        request.setAttribute("currentUserId", authToken.getUserId());
        request.setAttribute("userRole", authToken.getRole());
        return true;
    }
}

データベース設計

セッション管理用のトークンテーブルを実装。有効期限の自動管理と、マルチロール対応を考慮した設計となっています。

CREATE TABLE auth_token (
  token_id BIGINT AUTO_INCREMENT PRIMARY KEY,
  customer_id BIGINT NOT NULL,
  account_name VARCHAR(50) NOT NULL,
  role_type VARCHAR(20) NOT NULL,
  token_value VARCHAR(64) NOT NULL,
  issue_time TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
  expiry_time TIMESTAMP NOT NULL,
  INDEX idx_expiry (expiry_time)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

品質検証手法

要件定義に基づくブラックボックステストを実施。特に以下の検証ポイントを重点的に実施:

  • 認証フローにおけるエラーハンドリング(無効トークン/期限切れ)
  • 商品検索時のパフォーマンス計測(1000件超データセット)
  • 注文処理のトランザクション整合性検証

テスト結果に基づき、APIレスポンス時間の90%ileを300ms以内に収めることに成功。エンドユーザ視点での操作フロー検証により、主要機能のバリアフリー対応を実現しました。

タグ: spring-boot Vue3 MyBatis-Plus JWT-Authentication RESTful-API

5月19日 04:16 投稿