文章目录

21.加载列表

建议配合视频学习食用（11-2~11-5）：
https://www.bilibili.com/video/BV1rr4y1F7Y2?p=1

21.加载列表

21.1 加载房型列表

在这里插入图片描述

在编写后台关于房型的数据的时候有roomTypeList，可以直接调用这个方法，但是需要重新写一个控制器，不然会涉及到跨域问题，这里重新建立一个控制器RoomTypeController.java

package com.manong.controller;

import com.alibaba.fastjson.JSON;
import com.manong.service.RoomTypeService;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import javax.annotation.Resource;

@RestController
@RequestMapping("/roomType")
public class RoomTypeController {

    @Resource
    private RoomTypeService roomTypeService;
    /**
     * 查询房型列表
     * @return
     */
    @RequestMapping("/roomTypeList")
    public String roomTypeList(){
        return JSON.toJSONString(roomTypeService.findRoomTypeList(null));
    }

}

修改前台index.jsp文件
在这里插入图片描述

21.2 加载首页楼层和房间列表

在这里插入图片描述

1.在首页新加一层div用来加载楼层和房间列表，这就需要配置index.jsp文件
在这里插入图片描述

2.新加控制器
IndexController.java

package com.manong.controller;


import com.manong.entity.Floor;
import com.manong.entity.Room;
import com.manong.service.FloorService;
import com.manong.service.RoomService;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;

import javax.annotation.Resource;
import java.util.List;

@Controller
public class IndexController {

    @Resource
    private FloorService floorService;

    @Resource
    private RoomService roomService;


    @RequestMapping("/index")
    public String index(Model model){
        //调用查询所有楼层列表的方法
        List<Floor> floorList = floorService.findFloorList(null);
        //调用查询房间列表的方法
        List<Room> roomList = roomService.findRoomList(null);
        //将数据添加到模型中
        model.addAttribute("floorList",floorList);
        model.addAttribute("roomList",roomList);
        //返回逻辑视图名
        return "forward:/index.jsp";
    }

}

3.修改
welcome.jsp，与控制器中的 @RequestMapping("/index")对应
在这里插入图片描述
4.如果图片加载不出来
4.1将图片位置也部署到hotel-web中（同16.3.3）
4.2将后台的tomcat也开启

21.3 查询酒店详情

实现功能：点击房间图片进入房间详情页面
在这里插入图片描述

1.加载页面
detail.jsp
在这里插入图片描述

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="security" uri="http://www.springframework.org/security/tags" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en" class="fly-html-layui fly-html-store">
<head>
    <!-- 获取CSRF Token -->
    <meta name="_csrf" content="${_csrf.token}"/>
    <!-- 获取CSRF头，默认为X-CSRF-TOKEN -->
    <meta name="_csrf_header" content="${_csrf.headerName}"/>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/statics/layui/dist/css/layui.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/statics/css/global.css" charset="utf-8">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/statics/css/global(1).css" charset="utf-8">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/statics/css/store.css" charset="utf-8">
    <link rel="icon" href="${pageContext.request.contextPath}/statics/images/favicon.ico">
    <title>首页-酒店管理系统</title>
<body>
<!-- 顶部start -->
<div class="layui-header header header-store" style="background-color: #393D49;">
    <div class="layui-container">
        <a class="logo" href="/index.html">
            <img src="${pageContext.request.contextPath}/statics/images/logo.png" alt="layui">
        </a>
        <div class="layui-form component" lay-filter="LAY-site-header-component"></div>
        <ul class="layui-nav" id="layui-nav-userinfo">
            <li data-id="index" class="layui-nav-item layui-hide-xs">
                <a class="fly-case-active" data-type="toTopNav" href="/index">首页</a>
            </li>
            <li data-id="room" class="layui-nav-item layui-hide-xs layui-this">
                <a class="fly-case-active" data-type="toTopNav"  href="/room/list.html">房间</a>
            </li>
            <li data-id="login" class="layui-nav-item layui-hide-xs">
                <a class="fly-case-active" data-type="toTopNav" href="/login.jsp">登入</a>
            </li>
            <li data-id="register" class="layui-nav-item layui-hide-xs ">
                <a class="fly-case-active" data-type="toTopNav" href="/register.jsp">注册</a>
            </li>
            <span class="layui-nav-bar" style="left: 560px; top: 55px; width: 0px; opacity: 0;"></span>
        </ul>
    </div>
</div>
<!-- 顶部end -->

<!-- 中间区域开始 -->
<div class="shop-nav shop-index">
    <!--搜索 start-->
    <div id="LAY-topbar" style="height: auto;">
        <form class="layui-form layuimini-form">
            <div class="input-search">
                <div id="searchRoom"><input type="text" placeholder="搜索你需要的房间" name="keywords" id="searchKeywords"
                                            autocomplete="off" value="">
                    <button class="layui-btn layui-btn-shop" lay-submit="" lay-filter="searchHotelRoom" style="background-color: #009688"><i
                            class="layui-icon layui-icon-search"></i></button>
                </div>
                <div class="layui-container layui-hide-xs"><a href="#" class="topbar-logo"> <img
                        src="${pageContext.request.contextPath}/statics/images/logo-1.png" alt="layui"> </a></div>
            </div>
        </form>
    </div>
    <!--搜索 end-->
</div>
<!-- 中间区域结束 -->

<!-- 房间详情start -->
<div class="layui-container shopdata">
    <div class="layui-card shopdata-intro">
        <div class="layui-card-header">
				<span class="layui-breadcrumb layui-hide-xs" style="visibility: visible;">
				<a href="/index">酒店首页</a><span lay-separator="">/</span>
						           <a href="JavaScript:void(0);" id="floorNumber">酒店${room.floor.floorName}</a><span lay-separator="">/</span>

						 <a><cite>房间详情</cite></a> </span>

        </div>
        <div class="layui-card-body layui-row">
            <div class="layui-col-md6">
                <div class="intro-img photos"> <img id="coverImg" src="/hotel/show/room-pic/main/${room.photo}" alt="产品封面" layer-index="0"> </div>
            </div>
            <div class="layui-col-md6">
                <div class="intro-txt">
                    <h1 class="title" id="roomName">${room.title}</h1>
                    <input type="hidden" id="id" name="id" value="1">
                    <div class="store-attrs">
                        <div class="summary">
                            <p class="reference"><span>房间号</span> <span id="roomNumber">${room.roomNum}</span></p>
                            <p class="reference"><span>房　型</span> <span id="bedType">${room.roomType.typeName}</span></p>
                            <p class="reference"><span>宽　带</span> <span id="broadband">免费wifi</span></p>
                            <p class="reference"><span>标准价</span> ￥<span id="standardPrice">${room.roomType.price}</span></p>
                            <p class="activity"><span>会员价</span><strong class="price"><i>￥</i><span id="memberPrice">${room.roomType.price * 0.9}</span></strong></p>
                            <p class="activity"><span>状&#12288;态</span>
                                <strong class="status">
                                    <c:if test="${room.status ==1}"><span>可预订</span></c:if>
                                    <c:if test="${room.status ==2}"><span>已预订</span></c:if>
                                </strong>
                            </p>
                        </div>
                    </div>
                    <p class="store-detail-active" id="shopEvent">
                        <c:if test="${room.status==1}">
                            <a href="javascript:;" id="bookRoomBtn" data-type="memberReserveHotel" class="store-bg-orange fly-memberReserveHotel">
                                <i class="layui-icon layui-icon-dollar"></i>立即预定
                            </a>
                        </c:if>
                        <c:if test="${room.status!=1}">
                            <a href="javascript:;"  data-type="memberReserveHotel" class="fly-memberReserveHotel"
                               style="background-color: #d3d3d3;cursor: not-allowed;">
                                <i class="layui-icon layui-icon-dollar"></i>立即预定
                            </a>
                        </c:if>
                    </p>
                </div>
            </div>
        </div>
    </div>
    <div class="layui-card shopdata-content">
        <div class="layui-card-body detail-body layui-text">
            <div class="layui-elem-quote"> ${room.roomRequirement}</div>
            <div id="roomContent">
                <%--<p><img src="http://qiniu.goodym.cn/7abc9f95-ca46-4a83-ad31-2a95c4ec0092.jpg" style="max-width:100%;"><br></p>--%>
                ${room.roomDesc}
            </div>
        </div>
    </div>
</div>
<!-- 房间详情end -->


<%-- 预订房间 --%>
<div style="display: none;padding: 5px" id="orderRoomWindow">
    <form class="layui-form" style="width:90%;" id="dataFrm" lay-filter="dataFrm">
        <%-- 隐藏域，保存房间ID --%>
        <input type="hidden" name="roomId" value="${room.id}">
        <%-- 隐藏域，保存房型ID --%>
        <input type="hidden" name="roomTypeId" value="${room.roomTypeId}">
        <div class="layui-form-item">
            <label class="layui-form-label">预订日期</label>
            <div class="layui-input-block">
                <input type="text" id="book_date" lay-verify="required" autocomplete="off" readonly placeholder="请选择预订日期范围"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">入住时间</label>
                <div class="layui-input-inline">
                    <input type="text" name="arriveDate" id="arriveDate" lay-verify="required"  readonly placeholder="请选择入住时间"
                           class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">离店时间</label>
                <div class="layui-input-inline">
                    <input type="text" name="leaveDate" id="leaveDate" lay-verify="required" readonly  placeholder="请选择离店时间"
                           class="layui-input">
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">入住天数</label>
                <div class="layui-input-inline">
                    <input type="text" name="day" id="day" lay-verify="required" readonly  placeholder="入住天数自动计算"
                           class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">房费价格</label>
                <div class="layui-input-inline">
                    <input type="text" name="reservePrice" id="reservePrice" lay-verify="required"  readonly placeholder="房费价格自动计算"
                           class="layui-input">
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">预订姓名</label>
                <div class="layui-input-inline">
                    <input type="text" name="reservationName" lay-verify="required"  placeholder="请输入预订人姓名"
                           class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">预订电话</label>
                <div class="layui-input-inline">
                    <input type="text" name="phone" lay-verify="required"  placeholder="请输入预订人电话"
                           class="layui-input">
                </div>
            </div>
        </div>



        <div class="layui-form-item">
            <label class="layui-form-label">身份证号</label>
            <div class="layui-input-block">
                <input type="text" name="idCard" lay-verify="required" autocomplete="off" placeholder="请输入身份证号码"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">备注留言</label>
            <div class="layui-input-block">
                <textarea class="layui-textarea" name="remark" id="content"></textarea>
            </div>
        </div>
        <div class="layui-form-item" style="margin-left: 80px">
            <span style="color: red;font-size: 16px;">预订须知：请携带本人的身份证办理入住手续，办理入住需要在前台缴纳押金￥500</span>
        </div>
        <div class="layui-form-item layui-row layui-col-xs12">
            <div class="layui-input-block" style="text-align: center;">
                <button type="button" class="layui-btn" lay-submit lay-filter="doSubmit"><span
                        class="layui-icon layui-icon-add-1"></span>提交
                </button>
                <button type="reset" class="layui-btn layui-btn-warm"><span
                        class="layui-icon layui-icon-refresh-1"></span>重置
                </button>
            </div>
        </div>
    </form>
</div>


<!-- 底部 -->
<div class="fly-footer">
    <p><a href="#">酒店系统</a> 2022 © <a href="#">test.cn</a></p>
    <p>
        <a href="https://blog.csdn.net/qq_41722217?">CSND</a>
        <a href="https://www.cnblogs.com/msq2000/">博客园</a>
        <a href="https://msqilue.github.io/">blog</a>
        <a href="https://www.githubs.cn/" target="_blank">GiitHub社区论坛</a>
    </p>

</div>


<!-- 脚本开始 -->
<script src="${pageContext.request.contextPath}/statics/layui/dist/layui.js"></script>
<script>
    layui.use(["form","element","carousel","layer","laydate"], function () {
        var form = layui.form,
            layer = layui.layer,
            element = layui.element,
            carousel = layui.carousel,
            laydate = layui.laydate,
            $ = layui.$;

        //渲染轮播图
        carousel.render({
            elem: '#LAY-store-banner'
            ,width: '100%' //设置容器宽度
            ,height: '460' //设置容器高度
            ,arrow: 'always' //始终显示箭头
        });
        //获取<meta>标签中封装的CSRF Token
        var token = $("meta[name='_csrf']").attr("content");
        var header = $("meta[name='_csrf_header']").attr("content");
        //将头中的CSRF Token信息进行发送
        $(document).ajaxSend(function (e,xhr,options) {
            xhr.setRequestHeader(header,token);
        });

        /**
         * 计算两个日期的天数差
         * @param strDateStart
         * @param strDateEnd
         * @returns {number}
         */
        function getDays(strDateStart,strDateEnd){
            var strSeparator = "-"; //日期分隔符
            Date1= strDateStart.split(strSeparator);
            oDate2= strDateEnd.split(strSeparator);
            var strDateS = new Date(Date1[0], Date1[1]-1, Date1[2]);
            var strDateE = new Date(oDate2[0], oDate2[1]-1, oDate2[2]);
            iDays = parseInt(Math.abs(strDateS - strDateE ) / 1000 / 60 / 60 /24)//把相差的毫秒数转换为天数
            return iDays ;
        }

        //渲染日期范围组件
        laydate.render({
            elem:"#book_date",
            range:"至",
            done:function (value,date,endDate) {
                var startDate = value.substr(0,value.indexOf("至")).trim();//入住时间
                var endDate = value.substr(value.indexOf("至")+1).trim();//离店时间
                //赋值
                $("#arriveDate").val(startDate);
                $("#leaveDate").val(endDate);
                //计算天数
                var day = getDays(startDate,endDate);
                //赋值天数
                $("#day").val(day);
                //计算价格
                $("#reservePrice").val(day * ${room.roomType.price});
            }
        });

        var mainIndex;
        //点击事件
        $("#bookRoomBtn").click(function () {
            //打开预订房间窗口
            mainIndex = layer.open({
                type: 1,//打开类型
                title: "预订房间",//窗口标题
                area: ["800px", "550px"],//窗口宽高
                content: $("#orderRoomWindow"),//引用的内容窗口
                success: function () {
                    //清空表单数据
                    $("#dataFrm")[0].reset();
                }
            });
        });

        //监听表单提交事件
        form.on("submit(doSubmit)",function (data) {
            //发送请求
            $.post("/orders/addOrder",data.field,function(result){
                if(result.success){
                    layer.alert(result.message,{icon:1},function (index) {
                        //去到我的订单列表页面
                        //location.href="/";
                        layer.close(index);
                    });

                }else{
                    layer.alert(result.message,{icon:2});
                }
                layer.close(mainIndex);
            },"json");
            return false;
        });

    });
</script>
<!-- 脚本结束 -->
<ul class="layui-fixbar">
    <li class="layui-icon layui-fixbar-top" lay-type="top" style=""></li>
</ul>
<div class="layui-layer-move"></div>

</body>
</html>

2.新建控制器
RoomController.java

package com.manong.controller;

import com.manong.entity.Room;
import com.manong.service.RoomService;
import com.manong.vo.RoomVo;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestMapping;

import javax.annotation.Resource;
import java.util.List;

@Controller
@RequestMapping("/room")
public class RoomController {

    @Resource
    private RoomService roomService;

    /**
     * 查询房间详情
     * @param id
     * @param model
     * @return
     */
    @RequestMapping("/detail/{id}.html")
    public String detail(@PathVariable Integer id, Model model){
        Room room = roomService.findById(id);
        model.addAttribute("room",room);
        return "detail";
    }
}

3.业务层
RoomService.java

    /**
     * 查询房型信息
     * @param id
     * @return
     */
    Room findById(Integer id);

RoomServiceImpl.java

    public Room findById(Integer id) {
        return roomMapper.findById(id);
    }

4.数据层
RoomMapper.java

    /**
     * 查询房型信息
     * @param id
     * @return
     */
    Room findById(Integer id);

RoomMapper.xml

    <select id="findById" resultMap="roomResultMap">
        select t1.*,t2.`typeName`,t2.price,t3.`floorName`,t2.roomNum as roomNumber from t_room t1
        inner join t_room_type t2 on t2.id = t1.`roomTypeId`
        inner join t_floor t3 on t3.id = t1.`floorId`
        where t1.id = #{id}
    </select>

SSM酒店管理系统项目Day17

文章目录

21.加载列表

21.1 加载房型列表

21.2 加载首页楼层和房间列表

21.3 查询酒店详情