vue2 +Html + css 实现房间状态图,酒店前台入住管理系统的设计与开发

一、需求分析

        酒店管理系统是指一种可以提高酒店管理效率的软件或平台。其面向酒店前台工作人员和酒店管理员,界面美观大方、操作方便。系统强化以客源为中心的信息完整性、长久性、可操作性,突出以预订、房源、房价等对营销具有影响力的信息处理。

系统功能

本酒店管理系统支持客房预订、前台接待、前台收银、客房管理、财务查询、员工管理和日志查询等功能。

基本要求

  • 房间管理(房间号、房间类型、房间价格、房间状态和入住情况等)
  • 订房(为客人预定房间)
  • 客人入住(入住编号、入住天数、入住时间、房间编号等)
  • 客人登记(登记客人具体信息,如姓名,电话号码,身份证号码等)
  • 查询房间(按房间号,按房间状态等)
  • 退房(退房时间、房间编号、超时情况等)
  • 房间日志(记录房间的历史情况)
  • 账单(记录客人消费的账目)
  • 员工管理
  • 商品销售

二、功能模块

vue2 +Html + css 实现房间状态图,酒店前台入住管理系统的设计与开发_第1张图片

三、数据库设计

1、bills 账单表

名称 数据类型 长度 注释
pay_id int 10 账单ID
g_id int 10 商品外键
pay_num int 10 购买数量
pay_cost decimal 5 条目花费
pay_date date 0 支付时间
in_id int 10 参考intake外键

2、cancel退房表

名称 数据类型 长度 注释
c_id int 10 退房订单编号
in_gid int 10 入住客人编号
in_date date 0 登记入住时间
day_num int 10 入住天数
out_date date 0 真正退房时间
r_id varchar 10 房间编号

3、employees员工表

名称 数据类型 长度 注释
e_id int 10 员工编号
e_name varchar 10 员工姓名
e_type varchar 20 员工类型
e_sex enum 0 性别
e_age int 10 年龄
e_phone varchar 11 手机号码

4、商品数量goods

名称 数据类型 长度 注释
g_id int 10 商品ID
g_name varchar 20 商品名字
g_type varchar 10 商品类型
g_price double 10 商品价格
g_num int 10 商品数量

5、客人表guests

名称 数据类型 长度 注释
in_gid int 10 客人编号
g_name varchar 10 客人姓名
g_age int 3 客人年龄
g_sex enum 0 客人性别
g_IDcard varchar 18 客人身份证号码
g_type varchar 10 客人类型级别
g_phone varchar 11 客人电话号码
g_signtime date 0 注册登记时间

6、入住表intake

名称 数据类型 长度 注释
in_id int 10 入住编号
in_gid int 10 发起订单客人编号
in_date date 0 登记入住时间
day_num int 10 入住天数
r_id varchar 10 房间编号
e_id int 10 员工编号
cost double 10 入住订单价格
state enum 0 订单状态
deposit double 10 入住押金

7、购买表purchase

名称 数据类型 长度 注释
pur_id int 10 进货ID
pur_date date 0 进货日期
pur_cost double 10 进货价格
pur_num int 10 进货数量
g_id int 10 商品ID外键

8、房间表room

名称 数据类型 长度 注释
r_id varchar 10 房间ID
r_type varchar 10 房间类型
r_price double 20 房间价格/天
r_state enum 0 房间状态{'using','free'}
book_ahead enum 0 房间是否被超前预订
r_volume int 10 房间满额人数
r_livein int 10 房间现住人数
r_size int 10 房间面积
r_pic varchar 100 图片url

9、房间日志room_log

名称 数据类型 长度 注释
l_id int 10 日志记录编号
r_id varchar 10 日志记录房间号
l_time datetime 0 日志记录时间
l_content varchar 255 日志记录内容
e_id int 10 参考外键

10、占据表takeups

名称 数据类型 长度 注释
r_id varchar 10 房间编号
takeup_date date 0 占据房间从此时间至该日的最后一秒(即xx日 23:59:59)
in_id int 10 住房订单编号

11、用户表user

名称 数据类型 长度
userName int 10
password int 10
type enum 0

四、功能分析

4.1登录校验

成功登录的用户,信息保存到session,每次获取数据的时候,保存到Threadlocal保证线程安全,由threadlocal挂载到每个线程 ,线程内共享类似局部变量,线程间隔离。

vue2 +Html + css 实现房间状态图,酒店前台入住管理系统的设计与开发_第2张图片

【业务逻辑层】部分逻辑判断

        if (userDao.selectUserName(userName) == null) {
            result = "0";
            return result;
        } else if (!userDao.selectUserPassword(userName).equals(userPassword)) {
            //用户存在,但是密码错误
            result = "1";
            return result;
        } else if (userDao.selectUserPassword(userName).equals(userPassword)) {
            //用户存在,且密码正确
            User me = this.selectUser(userName);
            //将User对象存储入session
            session.setAttribute("user",me);
            result = "2";
            return result;
        }

对于未登录的用户,配置mvc拦截器,若获取到的当前的用户为空,则未登录,返回状态码401;如果已经登录,就放行,并且将用户信息存储到Threadlocal,便于每次获取登录用户数据数据。拦截器原理图如下所示,外层拦截用户登录,登录校验,内层拦截需要管理员才能发起的请求,例如权限设置。

vue2 +Html + css 实现房间状态图,酒店前台入住管理系统的设计与开发_第3张图片

【拦截器部分代码】

        HttpSession session=request.getSession();
        //获取session中的用户
        Object user=session.getAttribute("user");
//        System.err.println("当前用户:"+user);
        if (user == null) {
            // 不存在,返回状态码401,同时拦截请求
            response.setStatus(401);
            return false;
        }
        // 如果存在,保存用户信息到ThreadLocal
        UserHolder.saveRooter((User) user);
        return true;

4.2入住住房

首先,先说说该部分数据库的设计,每入住客人都会占用房间一段时间,在后续的开发中,可能需要查询到用户的入住信息。所以换个思路,直接让每个订单占据一段时间,订单中自然就包含了用户信息。

对于占据的是时间段,举个例子,某位用户今天入住,入住两天,自然而然,他应该占据了房间的时间端,今天、明天、后天、这三天、所以我只需要将这三天的数据以及对应的订单号插入到数据库中就行了。一旦有新的用户进来,选择了相同房间,而且是相同的时间段,这时候数据库的对应的时间段,就已经被占用了,所以无法订房。

在用户选择入住起始时间以后,查询从起始时间往后的15天内,该房间的入住情况。但是注意的是一定是连续时间段,例如今日起始,但是明日被占用,那可选的入住天数就为0天。查询15天的sql语句如下图所示:

vue2 +Html + css 实现房间状态图,酒店前台入住管理系统的设计与开发_第4张图片

由后端再遍历出可选天数:

if (takeUps.size() == 0) {
    //如果集合为空直接返回结果集
    for (int i = 1; i <= 15; i++) {
        Map day = new HashMap();
        day.put("value", i + "");
        selectResults.add(day);
    }
} else {
    /*遍历takeUp集合并,将其装换为结果集*/
    for (int i = 1; i <= 15; i++) {
        calendar.add(Calendar.DATE, 1);//下一天
        for (TakeUps t : takeUps) {
            if (dateFormat.format(t.getTakeUpDate()).equals(dateFormat.format(newTakeUpdate))
                    || dateFormat.format(t.getTakeUpDate()).equals(dateFormat.format(calendar.getTime()))) {
                i = 16;//日期被占用了,时间段不连续,结束循环
                break;
            } else {
                Map valid = new HashMap();
                valid.put("value", i + "");
                selectResults.add(valid);
                break;
            }
        }
    }
}

4.3、订房限制

每一个订单都应该有一个发起人,我们的设计是每个发起人不能有其他的进行中的订单,不同时间段也不行。怎样获取已经订房的客人,定义一个视图,占据时间表、入住表、客人表多表内连接,通过该视图就清楚哪一个客人已经有订房订单了。

  1. 房间状态

重要的状态两个:空闲、使用中

用户新增入住订单,就得插入对应的占据时间段,同时进行如下判断。

If 占据的时间段包含当前时间,就得让房间的状态更新为“使用中……”;同理在用户退房的时候,也应该更新包含当前时间段的对应房间的状态,更新其状态为“空闲中”。具体使设计了一个函数,方便使用。

vue2 +Html + css 实现房间状态图,酒店前台入住管理系统的设计与开发_第5张图片

但是更新状态还是会出现问题,如下图所示:

vue2 +Html + css 实现房间状态图,酒店前台入住管理系统的设计与开发_第6张图片

日期到达第二天,房间状态需要作出改变,即设置更新为“使用中”,对此,设计事件解决问题,如下所示:

vue2 +Html + css 实现房间状态图,酒店前台入住管理系统的设计与开发_第7张图片

判断出占用日期是当前时间的房间,更新其房间状态为使用中。

4.4、房态图

vue2 +Html + css 实现房间状态图,酒店前台入住管理系统的设计与开发_第8张图片

自定义

,设置颜色样式

后端查询所有房间的数据返回给前端,前端遍历,动态拼接数据,绑定对应的点击事件。

if (data[i].roomState == "free" && data[i].bookAhead == "true") {
    html += '
  • \n' +         '
     ' + data[i].roomId + '
    ' +         '
    ' + data[i].roomType + '
    ' +         '
  • ';     this.room.bSum += 1; } else if (data[i].roomState == "using") { …… }……

    【效果图展示】

    vue2 +Html + css 实现房间状态图,酒店前台入住管理系统的设计与开发_第9张图片五、界面展示

    1、系统首页

    vue2 +Html + css 实现房间状态图,酒店前台入住管理系统的设计与开发_第10张图片

    2、房态图

    vue2 +Html + css 实现房间状态图,酒店前台入住管理系统的设计与开发_第11张图片

    3、点击查看某个房间

    【历史客人】

    vue2 +Html + css 实现房间状态图,酒店前台入住管理系统的设计与开发_第12张图片

    【当前客人】

    vue2 +Html + css 实现房间状态图,酒店前台入住管理系统的设计与开发_第13张图片 【房间日志】

    vue2 +Html + css 实现房间状态图,酒店前台入住管理系统的设计与开发_第14张图片

     【房间预订情况】

    vue2 +Html + css 实现房间状态图,酒店前台入住管理系统的设计与开发_第15张图片

    【订房业务】

    vue2 +Html + css 实现房间状态图,酒店前台入住管理系统的设计与开发_第16张图片

    【房间物品】

    vue2 +Html + css 实现房间状态图,酒店前台入住管理系统的设计与开发_第17张图片 【物品记录】

    vue2 +Html + css 实现房间状态图,酒店前台入住管理系统的设计与开发_第18张图片

    3、订房业务

    【选择房间】

    vue2 +Html + css 实现房间状态图,酒店前台入住管理系统的设计与开发_第19张图片

    【日期选择】

    vue2 +Html + css 实现房间状态图,酒店前台入住管理系统的设计与开发_第20张图片 【入住客人】

    vue2 +Html + css 实现房间状态图,酒店前台入住管理系统的设计与开发_第21张图片

     【确认订单】vue2 +Html + css 实现房间状态图,酒店前台入住管理系统的设计与开发_第22张图片

    预订情况已经变化

    vue2 +Html + css 实现房间状态图,酒店前台入住管理系统的设计与开发_第23张图片 4、入住管理

    vue2 +Html + css 实现房间状态图,酒店前台入住管理系统的设计与开发_第24张图片

    5、员工管理

    vue2 +Html + css 实现房间状态图,酒店前台入住管理系统的设计与开发_第25张图片6、权限设置

    vue2 +Html + css 实现房间状态图,酒店前台入住管理系统的设计与开发_第26张图片

    六、资源获取

    资源连接: 

    你可能感兴趣的:(毕业设计,html,前端,javascript,vue,java,spring,boot,sql)