本システムは、武漢の観光情報をテーマにしたオリジナルプロジェクトです。フロントエンドとバックエンドを分離したアーキテクチャを採用し、2023年に開発されました。コードは整然としており、構造が明確なため、観光情報サイトや旅行プランサイト、あるいはフロントエンド・バックエンド分離型の観光システムなどのテーマに適しています。バックエンドには Spring Boot と MyBatis、フロントエンドには Vue.js と Element UI を使用しています。

主な機能

• 旅行プラン情報の公開：管理者がプランを登録・更新し、ユーザーは地域別に旅行プランを閲覧できます。
• ホテル予約：ユーザーは空室状況を確認し、希望の部屋を予約できます。
• 観光スポット詳細：各観光地やスポットの詳細情報を表示。管理者はスポット情報の追加・変更・削除を管理画面から行えます。
• 画像管理：観光地の写真をタイプ別に分類して表示。管理者は画像のアップロード・変更・削除が可能です。
• 交通情報検索：目的地への航空便と最適なドライブルートを検索できます。
• ユーザーからのフィードバック：ユーザーは管理者にメッセージを送信でき、管理者は管理画面で返信・管理を行います。

使用技術

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

画面イメージ（一部）

トップページ：観光スポットや旅行プランを表示します。

旅行プラン一覧

プラン詳細

スポットおすすめ

ルート検索

ログインページ

ユーザー管理

スポットおすすめ管理

ルート管理

主要コード例

ホテル情報のCRUD操作（バックエンドコントローラ）

/**
 * ページネーション検索
 */
@PostMapping("selectAll")
public PageInfo<Hotel> selectAll(@RequestBody Map<String, String> params) {
    PageHelper.startPage(
        Integer.parseInt(params.get("currentPage")),
        Integer.parseInt(params.get("pageSize"))
    );
    List<Hotel> list = hotelService.queryAllByLimit(params);
    return new PageInfo<Hotel>(list);
}

/**
 * 更新処理
 */
@RequestMapping("edit")
public String edit(@RequestBody Hotel hotel) {
    try {
        hotelService.update(hotel);
        return "200";
    } catch (Exception e) {
        e.printStackTrace();
        return "201";
    }
}

/**
 * 新規登録
 */
@RequestMapping("add")
public String add(@RequestBody Hotel hotel) {
    try {
        hotel.setCreateTime(new Date());
        hotelService.insert(hotel);
        return "200";
    } catch (Exception e) {
        e.printStackTrace();
        return "201";
    }
}

/**
 * IDによる1件取得
 */
@GetMapping("selectOne")
public Hotel selectOne(Integer id) {
    return hotelService.queryById(id);
}

/**
 * IDによる削除
 */
@GetMapping("deleteById")
public String deleteById(Integer id) {
    try {
        hotelService.deleteById(id);
        return "200";
    } catch (Exception e) {
        e.printStackTrace();
        return "201";
    }
}

/**
 * Excelエクスポート
 */
@RequestMapping("/downExcel")
public List<Hotel> downExcel() {
    return hotelService.queryCondition(new Hotel());
}

画像アップロード処理

@RequestMapping("/imgUpload")
public Map<String, Object> yunUploadFile(@RequestParam("file") MultipartFile file) {
    Map<String, Object> result = new HashMap<>();
    try {
        SimpleDateFormat sdf = new SimpleDateFormat("yyyyMMddHHmmss");
        String timestamp = sdf.format(new Date());
        // 拡張子を取得
        String ext = FilenameUtils.getExtension(file.getOriginalFilename());
        // 絶対パスで保存
        file.transferTo(new File(uploadDir + "/" + timestamp + "." + ext));
        result.put("imgUrl", "/api/upload/" + timestamp + "." + ext);
        result.put("url", "http://127.0.0.1:8080/api/upload/" + timestamp + "." + ext);
        result.put("message", "画像のアップロードに成功しました");
        result.put("result", "true");
    } catch (IOException e) {
        e.printStackTrace();
        result.put("result", "false");
        result.put("message", "画像のアップロードに失敗しました。再試行してください");
    }
    return result;
}