基于Vue+SpringBoot+MySQL的酒店管理系统

摘 要
Spring Boot是一个非常流行的Java框架,用于快速开发基于Java的Web应用程序。本文将介绍一个基于Spring Boot的酒店管理系统,该系统可以用于管理酒店的房间、客户、预订、结算等方面的业务。
首先,该系统包括一个管理后台,可以实现管理员对房间信息、客户信息、预订信息等的管理。管理员可以添加、修改、删除房间信息,可以查询客户信息,还可以查看和管理预订记录。
其次,该系统还包括一个客户端界面,可以供客户查询房间信息、预订房间、修改预订等操作。客户可以通过系统查看房间的具体信息,包括价格、房间类型、入住时间等,可以根据自己的需要选择合适的房间,并进行预订。客户还可以在系统中修改预订记录。
此外,该系统还包括一个结算模块,可以自动计算客户的预订费用,并生成结算单据。管理员可以在系统中查看所有客户的结算记录,也可以根据需要进行结算操作。
总之,基于Spring Boot的酒店管理系统是一个功能完善、易于使用、安全可靠、可扩展的系统。该系统可以帮助酒店管理者更好地管理酒店业务,也可以提供方便快捷的预订服务给客户,是一款非常实用的酒店管理软件。
关键词: java 酒店管理系统 springboot mysql

Abstract

Spring Boot is a very popular Java framework for rapid development of Java based Web applications. This article will introduce a Spring Boot based hotel management system that can be used to manage hotel rooms, customers, reservations, settlement, and other aspects of business.
Firstly, the system includes a management background that enables administrators to manage room information, customer information, reservation information, and so on. Administrators can add, modify, and delete room information, query customer information, and view and manage reservation records.
Secondly, the system also includes a client interface that allows customers to query room information, reserve rooms, modify reservations, and other operations. Customers can view the specific information of the room through the system, including price, room type, check-in time, etc. They can select the appropriate room according to their needs and make reservations. Customers can also modify reservation records in the system.
In addition, the system also includes a settlement module that can automatically calculate the booking fees of customers and generate settlement documents. The administrator can view the settlement records of all customers in the system, and can also perform settlement operations as needed.
In summary, the Spring Boot based hotel management system is a fully functional, easy-to-use, safe, reliable, and extensible system. The system can help hotel managers better manage hotel business, and can also provide convenient and fast booking services to customers. It is a very practical hotel management software.

Keywords: java hotel management system spring boot mysql

目 录
摘 要 1
第一章 绪论 1
1.1 系统设计背景 1
1.2 系统设计意义 1
1.3国内外现状分析: 1
1.4本章小结: 2
2 所用技术 2
3 系统需求分析 3
3.1需求分析 3
3.2可行性分析 3
3.2.1技术可行性分析 3
3.3.2市场可行性分析 3
3.2.3经济可行性分析 3
4 系统设计 5
4.1系统总体设计 5
4.2多功能模块设计 6
4.2.1首页设计 6
4.2.2学生信息管理实现 6
4.3数据库设计 7
4.3.1数据库设计 7
4.3.2系统ER图 8
5 系统实现及测试 9
5.1系统测试 9
5.1.1 测试目的 9
5.1.2测试概述 9
5.1.3单元测试 10
致 谢 13
参考文献 14

<template>
  <div id="home">
    <el-row :gutter="20">
      <el-col :span="8">
        <el-card class="box-card" shadow="hover">
          <div slot="header" class="clearfix">
            <span>快捷操作</span>
          </div>
          <el-button type="primary" @click="dialogFormVisible = true">入住登记</el-button>
          <el-button type="primary" @click="dialogout=true">退房结账</el-button>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card class="box-card" shadow="hover">
          <div slot="header" class="clearfix">
            <span>当前日期</span>
          </div>
          <p>{{ new Date() | formatDay }}</p>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card class="box-card" shadow="hover">
          <div slot="header" class="clearfix">
            <span>数据展示</span>
          </div>
          <div>系统已注册用户人数:
            <el-tag>{{userCount}}</el-tag>
          </div>
          <div>系统已接受订单数量:
            <el-tag>{{orderCount}}</el-tag>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="16">
        <el-card class="box-card" shadow="hover">
          <div slot="header" class="clearfix">
            <span>客房住宿率</span>
          </div>
          <div id="liveRate" style="left:0;width: 100%;height: 250px"></div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card class="box-card" shadow="hover">
          <div slot="header" class="clearfix">
            <span>房型比例</span>
          </div>
          <div id="roomType" style="left:0;width: 100%;height: 250px"></div>
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="16">
        <el-card class="box-card" shadow="hover">
          <div slot="header" class="clearfix">
            <span>订单量</span>
          </div>
          <div id="order" style="left:0;width: 100%;height: 250px"></div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card class="box-card" shadow="hover">
          <div slot="header" class="clearfix">
            <span>各类型客房订单比例</span>
          </div>
          <div id="orderType" style="left:0;width: 100%;height: 250px"></div>
        </el-card>
      </el-col>
    </el-row>
    <el-dialog title="入住登记" :visible.sync="dialogFormVisible">
      <el-form inline :model="form">
        <el-form-item label="预订人姓名">
          <el-input v-model="form.name" autoComplete="on"></el-input>
        </el-form-item>
        <el-form-item label="预留手机号">
          <el-input v-model="form.phone" autoComplete="on"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="findOrder()">查询</el-button>
        </el-form-item>
      </el-form>
      <div v-if="isOrderShown && order!=null" style="font-size: 13px;">
       <span style="font-size: 15px;font-weight: bold"> 订单号:{{ order.payOrderId }}</span><br>
        预订方式: {{ order.orderType }}<br>
        预订房型: {{ order.roomType }}<br>
        预订日期: {{ order.orderDate | formatDay }}<br>
        预订天数: {{ order.orderDays }}天<br>
        预订费用: {{ order.orderCost }}
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelIn()">取 消</el-button>
        <el-button type="primary" @click="inputInfo">办理入住</el-button>
      </div>


    </el-dialog>

    <el-dialog title="入住人信息" :visible.sync="dialogPersonInfo" width="90%">
      <el-form inline :model="persons" label-width="120px">
        <el-form-item label="入住人">
          <el-input v-model="persons.name" autoComplete="on" style="width:100%" placeholder=""></el-input>
        </el-form-item>
        <el-form-item label="入住人数">
          <el-input v-model="persons.peoCount" autoComplete="on" style="width:100%" placeholder=""></el-input>
        </el-form-item>
        <el-form-item label="身份证号">
          <el-input v-model="persons.ids" autoComplete="on" style="width:120%" placeholder="多人以逗号隔开"></el-input>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <div v-if="roomNumShow!==null" style="float: left">
          <span style="font-size: 20px;">入住房间号为:</span>
          <el-tag type="success" effect="plain">{{roomNumShow}}</el-tag>
        </div>
        <el-button type="primary" @click="cancelPerson">关闭</el-button>
        <el-button type="danger" @click="checkIn">确定入住</el-button>
      </div>
    </el-dialog>

    <el-dialog title="退房结账" :visible.sync="dialogout" width="50%">
      <el-form inline :model="rooms" label-width="120px">
        <el-form-item label="房间号">
          <el-input v-model="rooms.roomNumber" autoComplete="on" style="width:100%" placeholder="请输入退房号码"></el-input>
        </el-form-item>
        <el-button type="primary" @click="checkoutEvent">确定</el-button>
      </el-form>


    </el-dialog>
  </div>
</template>

<script>
  import { getOrderByNameAndPhone, getOrderCount } from '../../api/order'
  import { getAllUser, getUserCount } from '../../api/user'
  import { checkIn, checkOut } from '../../api/checkIn'

  export default {
    name: 'Home',
    data() {
      return {
        dialogout: false,
        roomNumber: null,
        dialogFormVisible: false,
        dialogPersonInfo: false,
        userCount: 1203,
        orderCount: 12032,
        form: {
          name: '',
          phone: ''
        },
        rooms: {
          roomNumber: null
        },
        persons: {
          name: '',
          peoCount: '',
          ids: '',
          orderId: ''
        },
        roomNumShow: null,
        isOrderShown: false,
        order: {
          payOrderId: 1,
          orderType: null,
          roomType: null,
          orderDays: null,
          orderCost: null
        }
      }
    },
    created: function() {
      this.getCount()
    },
    mounted() {
      this.rtChart()
      this.lrChart()
      this.orderChart()
      this.ortChart()
    },
    methods: {
      //退房申请
      checkoutEvent() {
        checkOut(this.rooms.roomNumber).then(result => {
          console.log(result.data)
          //退房成功
          if (result.code === 1000) {
            this.$message.success('退房成功')
            this.dialogout = false
          } else {
            this.$message.warning('退房失败')
          }
        })
      },
      /*获取订单量和用户数量*/
      getCount() {
        getUserCount().then(response => {
          this.userCount = response.data
        })
        getOrderCount().then(res => {
          this.orderCount = res.data
        })
      },

      rtChart() {
        var rtChart = this.$echarts.init(document.getElementById('roomType'), 'light')
        rtChart.setOption({
          tooltip: {},
          series: [{
            name: '比例',
            type: 'pie',
            radius: '55%',
            data: [
              { value: 35, name: '单人房' },
              { value: 55, name: '大床房' },
              { value: 45, name: '双床房' },
              { value: 55, name: '商务大床房' },
              { value: 45, name: '商务双床房' },
              { value: 35, name: '豪华大床房' }
            ]
          }]
        })
      },
      lrChart() {
        var myChart = this.$echarts.init(document.getElementById('liveRate'), 'light')
        myChart.setOption({

          xAxis: {
            type: 'category',
            data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
            axisLabel: {
              formatter: '{value} 月'
            }
          },
          yAxis: {
            type: 'value',
            axisLabel: {
              formatter: '{value} %'
            }
          },
          series: [{
            data: [50, 68, 55.4, 53.2, 76.6, 80.6, 47.6, 45.7, 67.2, 58.3, 78.4, 94.2],
            type: 'line'
          }]
        })
      },
      orderChart() {
        var myChart = this.$echarts.init(document.getElementById('order'), 'light')
        myChart.setOption({
          itemStyle: {
            color: '#409EFF'
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {            // 坐标轴指示器,坐标轴触发有效
              type: 'line'        // 默认为直线,可选为:'line' | 'shadow'
            }
          },
          xAxis: {
            type: 'category',
            data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
            axisLabel: {
              formatter: '{value} 月'
            }
          },
          yAxis: {
            type: 'value',
            axisLabel: {
              formatter: '{value} 单'
            }
          },
          series: [{
            name: '订单量',
            data: [432, 568, 469, 532, 766, 806, 476, 457, 672, 583, 784, 942],
            type: 'bar'
          }]
        })
      },
      ortChart() {
        var rtChart = this.$echarts.init(document.getElementById('orderType'), 'light')
        rtChart.setOption({
          tooltip: {},
          series: [{
            name: '比例',
            type: 'pie',
            radius: '55%',
            data: [
              { value: 35, name: '单人房' },
              { value: 15, name: '大床房' },
              { value: 10, name: '双床房' },
              { value: 15, name: '商务大床房' },
              { value: 5, name: '商务双床房' },
              { value: 20, name: '豪华大床房' }
            ]
          }]
        })
      },
      cancelIn() {
        this.dialogFormVisible = false
        this.order = null
        this.isOrderShown = false
      },
      cancelPerson() {
        this.dialogPersonInfo = false
        // this.
      },
      findOrder() {
        getOrderByNameAndPhone(this.form).then(res => {
          console.log(res)
          this.order = res.data
        })
        console.log(this.order)
        if (this.order == null) {
          this.$message.warning('找不到相关预订信息!请检查')
          return
        } else {
          this.isOrderShown = true
        }
      },

      inputInfo() {
        console.log(this.order)
        if (this.order !== null) {
          this.dialogFormVisible = false
          // 开启新的提示框
          this.dialogPersonInfo = true
        }
      },
      //todo
      checkIn() {
        console.log('checkin------')

        //输入入住人数、入住人、身份证号o
        this.persons.orderId = this.order.orderId
        checkIn(this.persons).then(res => {
          console.log(res)
          if (res.code === 1000) {
            this.roomNumShow = res.data.roomNumber
            // this.dialogPersonInfo = false
            this.order = null
            this.isOrderShown = false
          }
        })

      }

    }
  }
</script>

<style scoped>

  .el-row {
    margin: 10px 5px;
  }

  .el-card {
    text-align: center;
  }
</style>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

shejizuopin

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值