Spring BootとVueを使用したコミュニティ健康コード管理システム(フロントエンドとバックエンドの分離)

プロジェクト概要

本システムは2022年11月に開発された、フロントエンドとバックエンドが分離された構成の健康コード管理システムです。コード構造が整然としており、ドキュメントも完備されているため、疫病予防、健康コード管理、コミュニティ疫病対策などのテーマに適しています。システムはSpring BootとVueを統合して開発され、フロントエンドは主にelement-uiフレームワークを使用し、バックエンドはSpring Bootを、データ層はMyBatisを採用しています。

主要機能

  • 健康コードの管理(緑コード、赤コード、黄コード)
  • コミュニティの管理とメンテナンス
  • 住民情報の管理
  • 旅行報告情報の確認
  • チェックイン履歴の閲覧
  • ワクチン接種情報の管理
  • 検査所の管理
  • 住民のチェックイン機能
  • 健康コードの申請
  • 旅行報告機能

使用技術

  • バックエンド:Spring Boot, MyBatis
  • フロントエンド:Vue, Element UI, JavaScript, CSS
  • 開発ツール:IntelliJ IDEA, VSCode
  • データベース:MySQL 5.7
  • JDKバージョン:JDK 1.8

コード例

日次チェックイン関連操作

// ページネーションによる一覧取得
@PostMapping("fetchDailyRecords")
public PageResult<DailyCheckin> fetchDailyRecords(@RequestBody Map params) {
    PageHelper.startPage(Integer.parseInt(params.get("currentPage")), Integer.parseInt(params.get("pageSize")));
    List<DailyCheckin> records = checkinService.queryByCriteria(params);
    PageResult<DailyCheckin> pageResult = new PageResult<>(records);
    return pageResult;
}

// 更新処理
@RequestMapping("updateRecord")
public ResponseMessage updateRecord(@RequestBody DailyCheckin checkin) {
    try {
        checkinService.modify(checkin);
        return new ResponseMessage("200", "更新成功");
    } catch (Exception e) {
        e.printStackTrace();
        return new ResponseMessage("201", "更新失敗");
    }
}

// 新規登録
@RequestMapping("createRecord")
public ResponseMessage createRecord(@RequestBody DailyCheckin checkin) {
    try {
        LocalDateTime now = LocalDateTime.now();
        checkin.setCreateTime(now);
        checkinService.add(checkin);
        return new ResponseMessage("200", "登録成功");
    } catch (Exception e) {
        e.printStackTrace();
        return new ResponseMessage("201", "登録失敗");
    }
}

// IDによる単一データ取得
@GetMapping("getRecordById")
public DailyCheckin getRecordById(Integer id) {
    return checkinService.findById(id);
}

// IDによるデータ削除
@GetMapping("removeRecord")
public ResponseMessage removeRecord(Integer id) {
    try {
        checkinService.delete(id);
        return new ResponseMessage("200", "削除成功");
    } catch (Exception e) {
        e.printStackTrace();
        return new ResponseMessage("201", "削除失敗");
    }
}

ファイルアップロード機能

@RequestMapping("/uploadImage")
public Map handleImageUpload(@RequestParam("file") MultipartFile file) {
    Map response = new HashMap<>();
    try {
        DateTimeFormatter formatter = DateTimeFormatter.ofPattern("yyyyMMddHHmmss");
        String timestamp = LocalDateTime.now().format(formatter);
        String extension = FilenameUtils.getExtension(file.getOriginalFilename());
        file.transferTo(new File(uploadDirectory + "/" + timestamp + "." + extension));
        
        response.put("imageUrl", "/api/uploads/" + timestamp + "." + extension);
        response.put("message", "画像アップロード成功!");
        response.put("status", "success");
        return response;
    } catch (IOException e) {
        e.printStackTrace();
        response.put("status", "failure");
        response.put("message", "画像アップロードに失敗しました。再度お試しください!");
    }
    return response;
}

このシステムは機能的には非常に完全で、インターフェース設計が簡潔で大方的、ユーザーインタラクションが友好的、データベース設計も合理的で、規模も適切、コードも整然としており、学習に適しています。

タグ: Spring Boot vue.js MyBatis Element UI COVID-19

6月27日 23:56 投稿