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

一、需求分析

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

系统功能

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

基本要求

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

二、功能模块

三、数据库设计

1、bills 账单表

2、cancel退房表

3、employees员工表

4、商品数量goods

5、客人表guests

6、入住表intake

7、购买表purchase

8、房间表room

9、房间日志room_log

10、占据表takeups

11、用户表user

四、功能分析

4.1登录校验

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

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

        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，便于每次获取登录用户数据数据。拦截器原理图如下所示，外层拦截用户登录，登录校验，内层拦截需要管理员才能发起的请求，例如权限设置。

【拦截器部分代码】

        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语句如下图所示：

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

if (takeUps.size() == 0) {
    //如果集合为空直接返回结果集
    for (int i = 1; i <= 15; i++) {
        Map<String, String> day = new HashMap<String, String>();
        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<String, String> valid = new HashMap<String, String>();
                valid.put("value", i + "");
                selectResults.add(valid);
                break;
            }
        }
    }
}

4.3、订房限制

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

1. 房间状态

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

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

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

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

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

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

4.4、房态图

自定义<div>,设置颜色样式

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

if (data[i].roomState == "free" && data[i].bookAhead == "true") {
    html += '<li id="myroom' + i + '" onclick=showMyModal("' + data[i].roomId + '") ' +
        'onmouseover=showdetail("' + i + '","' + 1 + '") onmouseleave=clearData("' + i + '","' + 1 + '") class="room-bookAhead">\n' +
        '<div style="color: white"><i class="fa fa-calendar" style="color: #e55957"></i> ' + data[i].roomId + '</div>' +
        '<div style="color: white">' + data[i].roomType + '</div>' +
        '</li>';
    this.room.bSum += 1;
} else if (data[i].roomState == "using") {

……

}……

【效果图展示】

五、界面展示

1、系统首页

2、房态图

3、点击查看某个房间

【历史客人】

【当前客人】

 【房间日志】

 【房间预订情况】

【订房业务】

【房间物品】

 【物品记录】

3、订房业务

【选择房间】

【日期选择】

 【入住客人】

 【确认订单】

预订情况已经变化

 4、入住管理

5、员工管理

6、权限设置

六、资源获取

资源连接：