28基於java的簡單酒店數據管理

来源:https://www.cnblogs.com/projecthelp/archive/2023/05/06/17377906.html
-Advertisement-
Play Games

初學java後，需要一個小練手的java web項目，酒店數據信息管理。酒店CRUD項目。基於java的酒店管理，基於vue實現的酒店項目，酒店管理系統。 ...


本文章介紹一個基於java的簡單酒店數據管理系統

項目介紹

該項目適用於初學java後，需要一個小練手的java web項目，該項目是只有一個酒店數據表，然後實現對該酒店增加，修改，刪除和分頁查詢的小案例，雖然項目不是很複雜，但麻雀雖小但五臟俱全，適合於個人學習適用。

項目使用的技術架構

後端：java+SpringBoot + MyBatis-Plus
資料庫：MySQL
前端：Vue + Element-ui + Axios
開發工具：idea或eclipse
更多項目請查看：項目幫

項目實現

  • HotelController 定義了對酒店信息的CRUD的介面：
@RestController
@RequestMapping("hotel")
public class HotelController {

    @Autowired
    private IHotelService hotelService;

    /**
     * 通過id來查詢酒店數據
     * @param id 酒店id號
     * @return
     */
    @GetMapping("/{id}")
    public Hotel queryById(@PathVariable("id") Long id){
        return hotelService.getById(id);
    }

    /**
     * 分頁查詢數據列表出來
     * @param page 頁碼
     * @param size 每頁的大小
     * @return
     */
    @GetMapping("/list")
    public PageResult hotelList(
            @RequestParam(value = "page", defaultValue = "1") Integer page,
            @RequestParam(value = "size", defaultValue = "1") Integer size
    ){
        Page<Hotel> result = hotelService.page(new Page<>(page, size));
        return new PageResult(result.getTotal(), result.getRecords());
    }

    /**
     * 保存酒店信息
     * @param hotel 酒店信息實體類
     */
    @PostMapping
    public void saveHotel(@RequestBody Hotel hotel){
        hotelService.save(hotel);
    }

    /**
     * 更新酒店信息
     * @param hotel 酒店信息實體類
     */
    @PutMapping()
    public void updateById(@RequestBody Hotel hotel){
        if (hotel.getId() == null) {
            throw new InvalidParameterException("id不能為空");
        }
        hotelService.updateById(hotel);
    }

    /**
     * 通過酒店id刪除酒店信息
     * @param id 酒店id號
     */
    @DeleteMapping("/{id}")
    public void deleteById(@PathVariable("id") Long id) {
        hotelService.removeById(id);
    }
}
  • 前端使用的vue
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>簡單酒店管理</title>
  <link href="./css/main.css" rel="stylesheet">
</head>
<body>
<div id="app">
  <h1>簡單酒店增刪改查項目</h1>
  <div class="add-btn" >
    <el-button type="primary" size="small" @click="beginAdd">新增酒店</el-button>
  </div>
  <el-table :data="hotels" border height="500" style="width: 100%">
    <el-table-column align="center" fixed prop="id" label="酒店房間號" width="120"></el-table-column>
    <el-table-column align="center" prop="name" label="酒店名稱" width="120"></el-table-column>
    <el-table-column align="center" prop="address" label="酒店地址" width="120"></el-table-column>
    <el-table-column align="center" prop="name" label="酒店名稱" width="120"></el-table-column>
    <el-table-column align="center" label="酒店圖片" width="200">
      <template slot-scope="scope">
        <img :src="scope.row.pic" height="200" width="200" />
      </template>
    </el-table-column>
    <el-table-column align="center" prop="price" label="酒店價格" width="100"></el-table-column>
    <el-table-column align="center" label="酒店評分" width="200">
      <template slot-scope="scope">
        <el-rate
          v-model="scope.row.score / 10" disabled show-score text-color="#ff9900" score-template="{value}">
        </el-rate>
      </template>
    </el-table-column>
    <el-table-column align="center" prop="brand" label="酒店品牌" width="120"></el-table-column>
    <el-table-column align="center" prop="city" label="所在城市" width="120"></el-table-column>
    <el-table-column align="center" prop="starName" label="酒店星級" width="60"></el-table-column>
    <el-table-column align="center" prop="business" label="所在商圈" width="120"></el-table-column>
    <el-table-column align="center" label="操作" fixed="right" :width="150">
      <template slot-scope="scope">
        <el-button type="primary" plain icon="el-icon-edit" circle
                   @click="handleEdit(scope.$index, scope.row)"></el-button>
        <el-button type="danger" plain icon="el-icon-delete" circle
                   @click="handleDelete(scope.$index, scope.row)"></el-button>
      </template>
    </el-table-column>
  </el-table>
  <el-pagination
      @current-change="query"
      style="margin-top: 5px"
      background
      :page-size="5"
      layout="prev, pager, next"
      :total="total">
  </el-pagination>
  <el-dialog title="酒店信息" :visible.sync="formVisible" width="50%" style="padding: 0 20px;">
    <el-form :model="hotel" size="small" label-position="left" :label-width="formLabelWidth">
      <el-form-item label="酒店名稱" >
        <el-input v-model="hotel.name" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="酒店地址" >
        <el-input v-model="hotel.address" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="酒店價格" >
        <el-input v-model="hotel.price" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="酒店評分">
        <el-input v-model="hotel.score" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="酒店品牌">
        <el-input v-model="hotel.brand" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="所在城市">
        <el-input v-model="hotel.city" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="所在商圈">
        <el-input v-model="hotel.business" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="酒店圖片" >
        <el-input v-model="hotel.pic" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="酒店緯度" >
        <el-input v-model="hotel.latitude" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="酒店經度" >
        <el-input v-model="hotel.longitude" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="星級" >
        <el-select style="width: 263px" v-model="hotel.starName" placeholder="請選擇酒店星級">
          <el-option label="一星級" value="一星級"></el-option>
          <el-option label="二星級" value="二星級"></el-option>
          <el-option label="三星級" value="三星級"></el-option>
          <el-option label="四星級" value="四星級"></el-option>
          <el-option label="五星級" value="五星級"></el-option>
          <el-option label="一鑽" value="一鑽"></el-option>
          <el-option label="兩鑽" value="兩鑽"></el-option>
          <el-option label="三鑽" value="三鑽"></el-option>
          <el-option label="四鑽" value="四鑽"></el-option>
          <el-option label="五鑽" value="五鑽"></el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="formVisible = false">取 消</el-button>
      <el-button type="primary" @click="confirmEdit">確 定</el-button>
    </div>
  </el-dialog>
</div>
<script src="./js/vue.js"></script>
<script>
  // 設置後臺服務地址
  axios.defaults.baseURL = "http://localhost:8099";
  axios.defaults.timeout = 3000;

  const app = new Vue({
    el: "#app",
    data: {
      hotels: [],
      total: 1000,
      formVisible: false, // 是否顯示表單
      formLabelWidth: "100px", // 表單label寬度
      hotel: {}, // 表單中的酒店數據
      isEdit: false, // 是否是更新
      lastPage: 1,// 上一次查詢的頁碼
    },
    created() {
      this.query(1);
    },
    methods: {
      beginAdd(){
        this.isEdit = false;
        this.hotel = {};
        this.formVisible = true;
      },
      query(page){
        this.lastPage = page;
        axios.get("/hotel/list", {
            params: {
              page: page, size: 5
            }
          })
          .then(resp => {
            this.hotels = resp.data.hotels;
            this.total = resp.data.total;
          })
          .catch(err => console.log(err));
      },
      handleEdit(v1, v2) {
        this.isEdit = true;
        this.hotel = JSON.parse(JSON.stringify(v2));
        this.formVisible = true;
      },
      handleDelete(v1, v2) {
        this.$confirm('此操作將永久刪除酒店信息, 是否繼續?', '提示', {
          confirmButtonText: '確定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.deleteById(v2.id);
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消刪除'
          });
        });
      },
      confirmEdit(){
        if(this.isEdit){
          axios.put("/hotel", this.hotel)
            .then(resp => {
              this.$message({
                message: '更新成功',
                type: 'success'
              });
              this.formVisible = false;
              this.reload();
            })
            .catch(err => {
              this.$message({
                message: '更新失敗',
                type: 'error'
              });
              console.log(err);
            })
        }else{
          axios.post("/hotel", this.hotel)
            .then(resp => {
              this.$message({
                message: '新增成功',
                type: 'success'
              });
              this.formVisible = false;
              this.reload();
            })
            .catch(err => {
              this.$message({
                message: '新增失敗',
                type: 'error'
              });
              console.log(err);
            })
        }

      },
      deleteById(id){
        axios.delete("/hotel/" + id)
        .then(() => {
          this.$message({
            type: 'success',
            message: '刪除成功!'
          });
          this.reload();
        })
        .catch(err => {
          this.$message({
            type: 'error',
            message: '刪除失敗!'
          });
          console.log(err);
        })
      },
      reload(){
        this.query(this.lastPage);
      }
    }
  })
</script>
</body>
</html>

項目實現的效果

  • 首頁
    在這裡插入圖片描述
  • 增加酒店信息頁面
    在這裡插入圖片描述

您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 記錄-VUE中常用的4種高級方法
    這裡給大家分享我在網上總結出來的一些知識，希望對大家有所幫助 1. provide/inject provide/inject 是 Vue.js 中用於跨組件傳遞數據的一種高級技術，它可以將數據註入到一個組件中，然後讓它的所有子孫組件都可以訪問到這個數據。通常情況下，我們在父組件中使用 provid ...
  • el-upload組件問題 已解決
    前兩天我寫了一個上傳下載功能 使用<el-upload>組件 當後端將文件流格式數據發送到響應裡面前端屈接受的時候 ，我們使用 <el-upload> 組件裡面的 :on-success 方法進行捕捉，使用blob進行文件下載 文件可以正常下載下來 但是打開文件損壞 我去網上尋找答案， 但大多都是說 ...
  • 淺談(0,eval)('window')
    本文使用 React + Three.js + React Three Fiber 技術棧，實現一個《塞爾達傳說：王國之淚》主題風格基於滾動控制的平滑滾動圖片展示頁面。通過本文的閱讀，你將學習到的知識點包括：瞭解 R3F 中 useFrame hook 及 useThree hook 基本原理及用法... ...
  • git~分支管理規範
    解決的問題 避免新開發的代碼影響提測的代碼 避免生產環境出現問題後，修複後，由於代碼混亂，無法合併到生產環境 解決多個需求並行開發，並行測試，合併上線的問題 我的設計思路 流程圖工具我使用的是：diagrams.net 具體執行步驟 開發人員按需求粒度從dev建立分支 哪個需求或者哪些需求提測，就把 ...
  • Django筆記三十六之單元測試彙總介紹
    本文首發於公眾號：Hunter後端 原文鏈接：Django筆記三十六之單元測試彙總介紹 Django 的單元測試使用了 Python 的標準庫：unittest。 在我們創建的每一個 application 下麵都有一個 tests.py 文件，我們通過繼承 django.test.TestCase ...
  • 用go設計開發一個自己的輕量級登錄庫/框架吧
    用go設計開發一個自己的輕量級登錄庫/框架吧 幾乎每個項目都會有登錄，退出等用戶功能，而登錄又不單僅僅是登錄，我們要考慮很多東西。 token該怎麼生成？生成什麼樣的？ 是在Cookie存token還是請求頭存token？讀取的時候怎麼讀取？ 允許同一個賬號被多次登錄嗎？多次登錄他們的token是一 ...
  • 2023-5-6第一次創建博客的第一篇文章
    關於最近學習記下來的一些要點以及模糊的地方總結 對象類型和引用類型可以用鏈式結構 2進位是toBinaryString 10進位是Decimal 16進位是toHexString 8進位是octal final 1.修飾類 不能被繼承 2.修飾方法 不能被重寫，能被重載 3.修飾變數 值不可被重新賦 ...
  • 日期與時間【Date/SimpleDateFormat/Calendar】
    視頻鏈接:https://www.bilibili.com/video/BV1Cv411372m?p=121&vd_source=9140dcc493e34a9f4e95ca2f8f71bbd3 1 Data 1.1 Date類概述 Date類的對象在java中代表的是當前所在系統的此刻日期時間。 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類