SSM+Vue.js+UniAppによるオンライン映画評価システムの構築

技術スタック

バックエンドフレームワーク SSM

SSMはSpring、Spring MVC、MyBatisを組み合わせた開発フレームワークです。それぞれが異なる機能モジュールを担当し、Java Webアプリケーションを構築します。
  • Spring フレームワーク: 軽量なJava開発フレームワークで、依存性注入やAOP（アスペクト指向プログラミング）、トランザクション管理などの幅広い機能を提供します。
  • Spring MVC フレームワーク: Springの一部であり、Webアプリケーションの構築に使用されます。モデル・ビュー・コントローラー（MVC）設計パターンに基づいており、ビジネスロジック、UI表示、リクエスト処理を分離します。
  • MyBatis フレームワーク: 持久層フレームワークで、データベースとのやり取りを簡素化します。SQLマッピングファイルを使用して、Javaオブジェクトとデータベーステーブルを関連付けます。

コード例


import org.springframework.context.annotation.Configuration;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;

@Configuration
@RestController
public class GreetingController {

    @GetMapping("/greet")
    public String greet() {
        return "こんにちは、世界！";
    }
}
このコードはSpring Bootアプリケーションの基本的なエントリポイントを示しています。`@RestController`アノテーションにより、クラスがRESTful APIとして動作します。

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

Vue.jsは人気のあるJavaScriptフレームワークで、仮想DOM技術やリアクティブなデータバインディング、コンポーネントベースの開発をサポートします。

コード例


<html>
<head>
  <title>Vue.js デモ</title>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
  <div id="app">
    <h2>{{ message }}</h2>
    <button @click="toggleMessage">メッセージを切り替え</button>
  </div>

  <script>
    const app = new Vue({
      el: '#app',
      data: {
        message: 'こんにちは、Vue.js!'
      },
      methods: {
        toggleMessage() {
          this.message = this.message === 'こんにちは、Vue.js!' 
            ? 'Vue.jsは素晴らしい！' 
            : 'こんにちは、Vue.js!';
        }
      }
    });
  </script>
</body>
</html>
この例では、ボタンクリック時にメッセージが切り替わります。Vue.jsのリアクティブなデータバインディングにより、UIが自動的に更新されます。

持続層フレームワーク MyBatis

MyBatisはオープンソースの持続層フレームワークで、SQL文とJavaコードを分離し、データアクセスレイヤーを柔軟かつ解耦にします。

システムテスト

ログイン機能のテストケース

入力データ 期待される結果 実際の結果 結果分析
ユーザー名：管理者
パスワード：123456
認証コード：正しい入力		 システムにログイン 成功してシステムにログイン 結果一致
ユーザー名：管理者
パスワード：111111
認証コード：正しい入力		 パスワードが間違っている パスワードが間違っています。再入力してください。 結果一致

ユーザー管理機能のテスト

ユーザー管理には、追加、編集、削除、検索といった機能が含まれます。

データベース設計

商品テーブルの例： 

-- 商品テーブルの構造
DROP TABLE IF EXISTS `product`;
CREATE TABLE `product` (
  `id` BIGINT(20) NOT NULL AUTO_INCREMENT COMMENT '主キー',
  `name` VARCHAR(100) NOT NULL COMMENT '商品名',
  `price` DECIMAL(10, 2) NOT NULL COMMENT '価格',
  `description` VARCHAR(200) DEFAULT NULL COMMENT '説明',
  `stock` INT(11) NOT NULL COMMENT '在庫',
  `create_time` TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP COMMENT '作成日時',
  `update_time` TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP COMMENT '更新日時',
  PRIMARY KEY (`id`) USING BTREE
) ENGINE=InnoDB AUTO_INCREMENT=1 DEFAULT CHARSET=utf8 ROW_FORMAT=COMPACT COMMENT='商品テーブル';

データ挿入例


INSERT INTO `product` (`name`, `price`, `description`, `stock`)
VALUES ('iPhone 13', 999.99, '強力で先進的なスマートフォン', 100);

INSERT INTO `product` (`name`, `price`, `description`, `stock`)
VALUES ('Samsung Galaxy S21', 899.99, 'フラグシップAndroidスマートフォン', 150);

タグ: SSM vue.js MyBatis

7月9日 20:14 投稿

ホットタグ

©2026 異端開発室