Spring Boot と Vue を用いた美食推薦プラットフォームの設計と実装

概要

情報技術の急速な進展により、従来のデータ管理手法はソフトウェアによる集中管理へと進化している。本システムは、このような背景のもとで開発された美食推薦プラットフォームであり、管理者が大量のデータを効率的に処理できるように支援する。このプラットフォームは、Spring Boot と Vue.js を基盤とし、MySQL をデータベースとして採用することで、高信頼性・高効率な運用を実現している。

主な機能には、ユーザー向けの美食検索・レビュー・注文機能、および管理者向けの商品管理、ユーザーアカウント管理、お知らせ管理、掲示板管理、お気に入り管理などが含まれる。UI/UX は直感的かつ一貫性のある設計を採用し、セキュリティ面でも堅牢な対策を講じている。

開発環境

  • 言語: Java
  • バックエンドフレームワーク: Spring Boot
  • JDK: 1.8
  • サーバー: Tomcat 7
  • データベース: MySQL 5.7(必須)
  • DBクライアント: Navicat 11
  • IDE: IntelliJ IDEA / Eclipse
  • ビルドツール: Maven 3.3.9
  • ブラウザ: Google Chrome

アクセスURL:

  • 管理者画面: http://localhost:8080/{プロジェクト名}/admin/dist/index.html
  • 一般ユーザー画面: http://localhost:8080/{プロジェクト名}/front/dist/index.html

デフォルト管理者アカウント:

  • ユーザー名: admin
  • パスワード: admin

使用技術概要

Java

Java は静的型付けのオブジェクト指向言語であり、カプセル化、継承、ポリモーフィズムといったOOPの特徴を備えている。ガベージコレクションや例外処理機構により、安定性と堅牢性を確保。ネットワークプログラミングにも適しており、Webアプリケーション開発に広く利用されている。

Spring Boot

Spring Boot は、従来のSpringフレームワークにおける煩雑な設定を自動化し、素早いアプリケーション構築を可能にする。スターター依存関係により、必要なライブラリを簡単に統合でき、バージョン競合のリスクも低減される。これにより、開発者はビジネスロジックに集中できる。

MySQL

MySQL は Oracle 社が提供するオープンソースのRDBMSで、高速性・軽量性・セキュリティに優れる。SQL構文が簡潔で学習コストが低く、Webアプリケーションとの相性が非常に良い。本システムでは、データの一貫性と拡張性を確保するためにMySQL 5.7を採用している。

主要コード例

ファイルアップロードコントローラ

package com.controller;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;
import org.springframework.web.multipart.MultipartFile;
import com.service.ConfigService;
import com.utils.R;
import java.io.File;
import java.util.Date;

@RestController
@RequestMapping("/api/file")
public class FileUploadController {

    @Autowired
    private ConfigService configService;

    @PostMapping("/upload")
    public R handleFileUpload(@RequestParam("file") MultipartFile file, 
                              @RequestParam(required = false) String category) {
        if (file.isEmpty()) {
            return R.error("ファイルが選択されていません");
        }

        try {
            String ext = getFileExtension(file.getOriginalFilename());
            String uploadDir = getUploadPath();
            String newFileName = System.currentTimeMillis() + "." + ext;

            File dest = new File(uploadDir, newFileName);
            file.transferTo(dest);

            // 特定カテゴリの場合、設定テーブルに保存
            if ("avatar".equals(category)) {
                configService.updateConfig("userAvatar", newFileName);
            }

            return R.ok().put("filename", newFileName);
        } catch (Exception e) {
            return R.error("アップロード失敗: " + e.getMessage());
        }
    }

    private String getFileExtension(String filename) {
        return filename.substring(filename.lastIndexOf(".") + 1);
    }

    private String getUploadPath() {
        File dir = new File("static/upload");
        if (!dir.exists()) dir.mkdirs();
        return dir.getAbsolutePath();
    }
}

掲示板(フォーラム)管理コントローラ

package com.controller;

import com.baomidou.mybatisplus.mapper.EntityWrapper;
import com.entity.ForumEntity;
import com.service.ForumService;
import com.utils.PageUtils;
import com.utils.R;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;

import javax.servlet.http.HttpServletRequest;
import java.util.List;

@RestController
@RequestMapping("/api/forum")
public class ForumApiController {

    @Autowired
    private ForumService forumService;

    @GetMapping("/list")
    public R getForumList(@RequestParam Map<String, Object> params, 
                          HttpServletRequest request) {
        Long userId = (Long) request.getSession().getAttribute("userId");
        String role = (String) request.getSession().getAttribute("role");

        EntityWrapper<ForumEntity> query = new EntityWrapper<>();
        if (!"admin".equals(role)) {
            query.eq("user_id", userId);
        }

        PageUtils page = forumService.queryWithPagination(params, query);
        return R.ok().put("data", page);
    }

    @PostMapping("/create")
    public R createPost(@RequestBody ForumEntity post, 
                        HttpServletRequest request) {
        post.setUserId((Long) request.getSession().getAttribute("userId"));
        post.setId(System.currentTimeMillis());
        forumService.insert(post);
        return R.ok("投稿が作成されました");
    }

    @PutMapping("/update")
    public R updatePost(@RequestBody ForumEntity post) {
        forumService.updateById(post);
        return R.ok("更新完了");
    }

    @DeleteMapping("/remove")
    public R deletePosts(@RequestBody List<Long> ids) {
        forumService.deleteBatchIds(ids);
        return R.ok("削除完了");
    }
}

テスト戦略

本システムは、単体テスト(ホワイトボックステスト)と統合テスト(ブラックボックステスト)を組み合わせて実施した。特に、Paretoの法則に基づき、全体の20%のモジュールが80%以上の不具合を含む可能性があるとして、コア機能(認証、注文処理、ファイルアップロード)を中心にテストケースを設計。段階的にスコープを拡大し、最終的にはE2Eテストによりユーザー体験を検証した。

まとめ

本プラットフォームは、Spring Boot のモジュール性と Vue.js のリアクティブUIにより、保守性・拡張性に優れたアーキテクチャを実現している。MySQL を用いたデータ管理は、整合性とパフォーマンスの両立を可能にし、実運用に耐える堅牢な設計となっている。今後の改善点として、レコメンデーションアルゴリズムの導入やマイクロサービス化が考えられる。

タグ: Spring Boot vue.js MySQL Java REST API

5月28日 16:58 投稿