SSM+Vue.jsを用いた農産物プレオーダープラットフォームの設計と実装

技術スタック

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

Spring BootはTomcat、Jetty、Undertowなどのサーバーを内蔵しており、追加のインストールや設定なしで直接使用できます。Spring Bootの主な利点は自動設定機能です。プロジェクトの依存関係に基づいてアプリケーションを自動的に設定できます。これにより、各依存関係を手動で設定する必要がなくなり、アプリケーションの設定が非常に簡単になります。Spring BootはSpring Data、Spring Security、Spring Cloudなどの多くのすぐに使える機能とプラグインを提供しています。これらの機能により、開発者はより迅速にアプリケーションを構築でき、他の技術との統合と拡張が容易になります。非常に人気のあるフレームワークであり、自動設定、内蔵サーバー、プラグイン機能により、開発者はより速く、より簡単に高品質なアプリケーションを構築できます。

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

Vue.jsの核心は仮想DOM技術です。仮想DOMはメモリ内のデータ構造で、Vue.jsが効率的なDOM操作を実現するのに役立ちます。Vue.jsはリアクティブデータバインディング、仮想DOM、コンポーネント化などの現代的な技術を採用し、開発者に柔軟で効率的、保守しやすい開発モードを提供しています。データが変更されると、UIも自動的に更新されます。これにより、開発者はUIの手动更新ではなくデータ処理に集中できます。これがVueが持つ簡潔さ、柔軟性、効率性です。

永続層フレームワークMyBatisPlus

MyBatis-PlusはMyBatisフレームワークに基づく拡張ツールで、MyBatisの開発を簡素化することを目的としています。これはオープンソースのJavaフレームワークで、MySQL、Oracle、SQL Server、PostgreSQLなど多种のデータベースをサポートしています。MyBatis-Plusは豊富なAPIとアノテーションを提供し、簡単な設定と使用でORM操作を実現し、手書きSQLの作業量を大幅に削減します。さらに、MyBatis-Plusはコードジェネレーターを提供しており、エンティティクラス、Mapperインターフェース、XMLマッピングファイルを自動生成できます。開発プロセスを大幅に簡素化します。

MyBatis-Plusはページングクエリ、動的クエリ、楽観ロック、パフォーマンス分析などの実用的な機能もサポートしており、開発者が効率的なデータ操作を行うのに便利です。MyBatis-Plusを通じて、開発者は高品質なデータアクセス層コードを迅速に開発し、開発効率を向上させることができます。

システムテスト

システムの問題点を複数の角度からテストし、見つけることが本システムの主なテスト目的です。機能テストを通じてシステムの欠陥を見つけ、修正し、システムに欠陥がないことを確認します。テストプロセス中にシステムが顧客のニーズを満たしていることを証明し、問題や不足を見つけ次第修正します。テスト完了後にテスト結論を導き出します。

システムテストの目的

システムの開発サイクルにおいて、システムテストは不可欠で忍耐力を試されるプロセスです。その重要性は、システムの品質と信頼性を保証する最後の関門であり、システム開発プロセス全体の最終チェックでもあります。システムテストの主な目的は、ユーザーが使用時に問題が発生しないようにし、ユーザーエクスペリエンスを向上させることです。ユーザーの使用に影響を与えないため、システムが遭遇する可能性のある問題を多角的、多面的に考慮し、異なるシミュレーションシナリオを通じて欠陥を見つけ、解決する必要があります。テストプロセス中にシステムの品質状況、システム機能が健全か、システムロジックがスムーズかを把握できます。合格したシステムテストプロセスが完了すると、システムの品質と使用感が大幅に向上します。テストの目標は、システムが要件仕様書の定義に準拠しているかを検証し、要件仕様書と矛盾するまたは一致しない内容を見つけることです。テストプロセス中は常にユーザーの視点から問題を考慮し、非現実的なシナリオを避け、テスト時間の無駄を防ぎ、問題が発生し、予期される結果と実際の結果が一致しない可能性を引き起こさないようにします。

システム機能テスト

システムの機能モジュールをテストし、クリック、境界値の入力、必須項目と非必須項目の検証などの方法で一連のブラックボックステストを実施します。テストケースを作成し、テストケースの内容に基づいてテストを実行し、最終的にテスト結論を導き出します。

ログイン機能テスト方案:システムにログインする必要がある場合、アカウントパスワードなどの機能ポイントで検証を行います。ユーザーはデータベースに保存されているデータと一致する内容を入力する必要があります。いずれかの入力が間違っている場合、システムは入力エラーを提示します。このインターフェースはロール権限にも対応した検証を行います。ユーザーのロールのアカウントが管理者ロールでログインすると、エラーが表示されます。ログイン機能のテストケースは以下の表の通りです。

入力データ 予期される結果 実際の結果 結果分析
ユーザー名:guanliyuan パスワード:123456 検証コード:正しい入力 システムにログイン システムに正常にログイン 予測結果と一致
ユーザー名:guanliyuan パスワード:111111 検証コード:正しい入力 パスワードエラー パスワードエラー、パスワードを再入力してください 予測結果と一致
ユーザー名:guanliyuan パスワード:123456 検証コード:誤った入力 検証コードエラー 検証コード情報エラー 予測結果と一致
ユーザー名:空 パスワード:123456 検証コード:正しい入力 ユーザー名必須 ユーザー名を入力してください 予測結果と一致
ユーザー名:guanliyuan パスワード:空 検証コード:正しい入力 パスワードエラー パスワードエラー、パスワードを再入力してください 予測結果と一致

ユーザー管理機能テスト方案:ユーザー管理には、追加、編集、削除、ユーザー検索機能があります。ユーザーを追加する際、必須項目を記入しないと、システムが非空検証を行っているかどうかを確認します。既存のユーザー情報を追加すると、ユーザー名が使用済みであるかどうかを確認するプロンプトが表示されるかどうかを検証します。ユーザー情報を削除すると、システムがこの操作を実行するかどうかを検証します。ユーザー情報を変更すると、変更後の情報がページに表示されるかどうかを検証します。ユーザー管理のテストケースは以下の表の通りです。

入力データ 予期される結果 実際の結果 結果分析
ユーザー基本情報を入力 追加成功、ユーザーリストに表示 ユーザーがリストに表示される 予測結果と一致
ユーザー情報を変更 編集成功、変更情報が正常に変更される ユーザー情報が変更される 予測結果と一致
削除するユーザーを選択 システムがユーザー削除を確認し、確認後ユーザーが削除される システムがユーザー削除を確認し、確認後ユーザー情報が見つからない 予測結果と一致
ユーザー名を記入しないでユーザーを追加 ユーザー名は空にできないと提示 ユーザー名は空にできないと提示 予測結果と一致
既存のユーザー名を入力 追加失敗、ユーザー名重複の提示 追加失敗、ユーザー名重複の提示 予測結果と一致

システムテスト結論

本システムは主にブラックボックステストを使用し、ユーザーがシステムを使用するシナリオをシミュレートして各機能のテストケースを作成し、テストを実施しました。システムのフローの正確性を保証します。システムテストは不可欠であり、システムをより完璧にし、システムの使用可能性もより高くします。

このシステムをテストする主な目的は、システムの機能モジュールが私たちの最初の設計理念を満たしているかどうかを検証し、各機能モジュールのロジックが正しいかどうかを検証することです。このシステムは複雑なロジック処理を必要としないため、ユーザーの操作が容易になります。テストの最終目的もユーザーの使用に焦点を当てています。テストプロセス中、すべてのシナリオはユーザーのニーズに準拠する必要があり、ニーズの目標から逸脱してはなりません。問題に直面した場合は、常にユーザーの視点から考える必要があります。一連のテストプロセスを経て最終的なテスト結果を得ました。テスト結果から、実装されたシステムは機能とパフォーマンスの両面で設計要件を満たしていることがわかります。

コード例

@IgnoreAuth
@PostMapping(value = "/login")
public R login(String username, String password, String captcha, HttpServletRequest request) {
   UsersEntity user = userService.selectOne(new EntityWrapper<UsersEntity>().eq("username", username));
   if(user==null || !user.getPassword().equals(password)) {
      return R.error("アカウントまたはパスワードが正しくありません");
   }
   String token = tokenService.generateToken(user.getId(),username, "users", user.getRole());
   return R.ok().put("token", token);
}

    @Override
    public String generateToken(Long userid,String username, String tableName, String role) {
        TokenEntity tokenEntity = this.selectOne(new EntityWrapper<TokenEntity>().eq("userid", userid).eq("role", role));
        String token = CommonUtil.getRandomString(32);
        Calendar cal = Calendar.getInstance();   
        cal.setTime(new Date());   
        cal.add(Calendar.HOUR_OF_DAY, 1);
        if(tokenEntity!=null) {
            tokenEntity.setToken(token);
            tokenEntity.setExpiratedtime(cal.getTime());
            this.updateById(tokenEntity);
        } else {
            this.insert(new TokenEntity(userid,username, tableName, role, token, cal.getTime()));
        }
        return token;
    }

/**
 * 権限(Token)検証
 */
@Component
public class AuthorizationInterceptor implements HandlerInterceptor {

    public static final String LOGIN_TOKEN_KEY = "Token";

    @Autowired
    private TokenService tokenService;
    
    @Override
    public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {

        //クロスドメインリクエストをサポート
        response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE");
        response.setHeader("Access-Control-Max-Age", "3600");
        response.setHeader("Access-Control-Allow-Credentials", "true");
        response.setHeader("Access-Control-Allow-Headers", "x-requested-with,request-source,Token, Origin,imgType, Content-Type, cache-control,postman-token,Cookie, Accept,authorization");
        response.setHeader("Access-Control-Allow-Origin", request.getHeader("Origin"));
    // クロスドメイン時にOPTIONSリクエストが最初に送信されるため、OPTIONSリクエストに正常なステータスを直接返します
    if (request.getMethod().equals(RequestMethod.OPTIONS.name())) {
            response.setStatus(HttpStatus.OK.value());
            return false;
        }
        
        IgnoreAuth annotation;
        if (handler instanceof HandlerMethod) {
            annotation = ((HandlerMethod) handler).getMethodAnnotation(IgnoreAuth.class);
        } else {
            return true;
        }

        //headerからtokenを取得
        String token = request.getHeader(LOGIN_TOKEN_KEY);
        
        /**
         * 権限検証不要のメソッドは直接通過
         */
        if(annotation!=null) {
            return true;
        }
        
        TokenEntity tokenEntity = null;
        if(StringUtils.isNotBlank(token)) {
            tokenEntity = tokenService.getTokenEntity(token);
        }
        
        if(tokenEntity != null) {
            request.getSession().setAttribute("userId", tokenEntity.getUserid());
            request.getSession().setAttribute("role", tokenEntity.getRole());
            request.getSession().setAttribute("tableName", tokenEntity.getTablename());
            request.getSession().setAttribute("username", tokenEntity.getUsername());
            return true;
        }
        
        PrintWriter writer = null;
        response.setCharacterEncoding("UTF-8");
        response.setContentType("application/json; charset=utf-8");
        try {
            writer = response.getWriter();
            writer.print(JSONObject.toJSONString(R.error(401, "ログインしてください")));
        } finally {
            if(writer != null){
                writer.close();
            }
        }
//                throw new EIException("ログインしてください", 401);
        return false;
    }
}

データベース参照

-- ----------------------------
-- Table structure for token
-- ----------------------------
DROP TABLE IF EXISTS `token`;
CREATE TABLE `token` (
  `id` bigint(20) NOT NULL AUTO_INCREMENT COMMENT '主キー',
  `userid` bigint(20) NOT NULL COMMENT 'ユーザーID',
  `username` varchar(100) NOT NULL COMMENT 'ユーザー名',
  `tablename` varchar(100) DEFAULT NULL COMMENT 'テーブル名',
  `role` varchar(100) DEFAULT NULL COMMENT 'ロール',
  `token` varchar(200) NOT NULL COMMENT 'トークン',
  `addtime` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP COMMENT '追加時間',
  `expiratedtime` timestamp NOT NULL DEFAULT '0000-00-00 00:00:00' COMMENT '有効期限',
  PRIMARY KEY (`id`) USING BTREE
) ENGINE=InnoDB AUTO_INCREMENT=27 DEFAULT CHARSET=utf8 ROW_FORMAT=COMPACT COMMENT='トークンテーブル';

-- ----------------------------
-- Records of token
-- ----------------------------
INSERT INTO `token` VALUES ('9', '23', 'cd01', 'xuesheng', '学生', 'al6svx5qkei1wljry5o1npswhdpqcpcg', '2023-02-23 21:46:45', '2023-03-15 14:01:36');
INSERT INTO `token` VALUES ('10', '11', 'xh01', 'xuesheng', '学生', 'fahmrd9bkhqy04sq0fzrl4h9m86cu6kx', '2023-02-27 18:33:52', '2023-03-17 18:27:42');
INSERT INTO `token` VALUES ('11', '17', 'ch01', 'xuesheng', '学生', 'u5km44scxvzuv5yumdah2lhva0gp4393', '2023-02-27 18:46:19', '2023-02-27 19:48:58');
INSERT INTO `token` VALUES ('12', '1', 'admin', 'users', '管理者', 'h1pqzsb9bldh93m92j9m2sljy9bt1wdh', '2023-02-27 19:37:01', '2023-03-17 18:23:02');
INSERT INTO `token` VALUES ('13', '21', 'xiaohao', 'shezhang', '社長', 'zdm7j8h1wnfe27pkxyiuzvxxy27ykl2a', '2023-02-27 19:38:07', '2023-03-17 18:25:20');
INSERT INTO `token` VALUES ('14', '27', 'djy01', 'xuesheng', '学生', 'g3teq4335pe21nwuwj2sqkrpqoabqomm', '2023-03-15 12:56:17', '2023-03-15 14:00:16');
INSERT INTO `token` VALUES ('15', '29', 'dajiyue', 'shezhang', '社長', '0vb1x9xn7riewlp5ddma5ro7lp4u8m9j', '2023-03-15 12:58:08', '2023-03-15 14:03:48');

タグ: SpringBoot vue.js MyBatisPlus 農産物プレオーダー システム設計

7月3日 19:20 投稿