文章目录
建议配合视频学习食用（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>状　态</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>
