SpringBootとVue.js、uniappを使用した北海旅行サイトの開発

技術スタック

バックエンドフレームワーク: Spring Boot

Spring Bootは、Tomcat、Jetty、Undertowなどのサーバーを内蔵しており、それらを直接使用できます。Spring Bootの主な利点は自動構成機能で、プロジェクトの依存関係に基づいてアプリケーションを自動的に設定します。これにより、各依存関係を手動で設定する必要がなくなります。また、Spring Data、Spring Security、Spring Cloudなどの多くの機能とプラグインも提供しています。これらの機能により、開発者はより迅速にアプリケーションを構築し、他の技術との統合や拡張を容易に行うことができます。

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

Vue.jsのコアテクノロジーは仮想DOMです。これはメモリ内のデータ構造であり、Vue.jsが効率的なDOM操作を行うのに役立ちます。Vue.jsは、反応型データバインディング、仮想DOM、コンポーネント化などの現代的な技術を採用しており、開発者に柔軟で効率的で保守性の高い開発モデルを提供します。データが変更されるとUIも自動的に更新されるため、開発者はデータ処理に集中でき、手動でのUI更新の必要がありません。

永続化フレームワーク: 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;
}

@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 {
        // CORS対応
        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"));
        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;
        }

        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();
            }
        }
        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 UniApp MyBatis-Plus システムテスト

7月15日 16:46 投稿