文章目录
- 第四章. 日历展示预约设置信息
-
- 4.1. 前台代码
- 4.1.1. 使用静态数据调试
- 4.1.2. 发送ajax获取动态数据
- 4.2. 后台代码
- 4.2.1. Controller
- 4.2.2. 服务接口
- 4.2.3. 服务实现类
- 4.2.4. Dao接口
- 4.2.5. Mapper映射文件
- 4.3. 初始化下个月,上个月数据
- 第五章. 基于日历实现预约设置
- 【讲解】
- 5.1. 前台代码
- 5.1.1. 为设置按钮绑定事件
- 5.1.2. 弹出预约设置窗口并发送ajax请求
- 5.2. 后台代码
- 5.2.1. Controller
- 5.2.2. 服务接口
- 5.2.3. 服务实现类
- 5.2.4. Dao接口
- 5.2.5. Mapper映射文件
第四章. 日历展示预约设置信息
1.预约设置需求分析
前面我们已经完成了自由行管理、跟团游管理、套餐管理等。接下来我们需要进行预约设置,其实就是设置每一天的旅游预约最大数量。客户可以通过微信端在线预约,在线预约时需要选择旅游的时间,使得选择旅游时间的已预约人数加1,如果客户选择的时间已经预约满则无法进行预约。
2.t_ordersetting表结构:
1:前台代码
(1)使用静态数据调试
(2)发送ajax获取动态数据
2:后台代码
• 在页面上,使用日历展示预约设置信息
(1)OrderSettingController.java(Controller)
(2)OrderSettingService.java(服务接口)
(3)OrderSettingServiceImpl.java(服务实现类)
(4)OrderSettingDao.java(Dao接口)
(5)OrderSettingDao.xml(Mapper映射文件)
3:初始化下个月,上个月数据
【需求】
前面已经完成了预约设置功能,现在就需要通过日历的方式展示出来每天设置的预约人数。
在页面中已经完成了日历的动态展示,我们只需要查询当前月份的预约设置信息并展示到日历中即可,同时在日历中还需要展示已经预约的人数,效果如下:
4.1. 前台代码
4.1.1. 使用静态数据调试
为了能够快速看到效果,我们可以先使用静态数据模拟,然后再改为发送ajax请求查询数据库。
实现步骤:
(1)预约设置数据对应的模型数据为leftobj,在initData方法最后为leftobj模型数据赋值:
this.leftobj = [
{
date: 1, number: 120, reservations: 1 },
{
date: 3, number: 120, reservations: 1 },
{
date: 4, number: 120, reservations: 120 },
{
date: 6, number: 120, reservations: 1 },
{
date: 8, number: 120, reservations: 1 }
];
其中date表示日期,number表示可预约人数,reservations表示已预约人数
(2)使用VUE的v-for标签遍历上面的leftobj模型数据,展示到日历上:
<template>
<template v-for="obj in leftobj">
<template v-if="obj.date == dayobject.day.getDate()">
<template v-if="obj.number > obj.reservations">
<div class="usual">
<p>可预约{
{
obj.number}}人</p>
<p>已预约{
{
obj.reservations}}人</p>
</div>
</template>
<template v-else>
<div class="fulled">
<p>可预约{
{
obj.number}}人</p>
<p>已预约{
{
obj.reservations}}人</p>
<p>已满</p>
</div>
</template>
</template>
</template>
<button v-if="dayobject.day > today" @click="handleOrderSet(dayobject.day)" class="orderbtn">设置</button>
</template>
4.1.2. 发送ajax获取动态数据
将上面的静态模拟数据去掉,改为发送ajax请求,根据当前页面对应的月份查询数据库获取预约设置信息,将查询结果赋值给leftobj模型数据
(1)在钩子函数created中添加:
created: function () {
//在vue初始化时调用
this.initData(null);
this.createdData();
},
(2)创建函数createData()
组织this.leftobj的数据,返回 List
//发送ajax请求,根据当前页面对应的月份查询预约设置信息
methods: {
createdData(){
axios.get("/ordersetting/getOrderSettingByMonth.do?date="+this.currentYear+"-"+this.currentMonth).then((response)=>{
if(response.data.flag){
this.leftobj = response.data.data;
this.$message({
message:response.data.message,
type:"success"
})
}else{
this.$message.error(response.data.message);
}
})
},
...
}
4.2. 后台代码
【路径】
1.OrderSettingController.java
2.OrderSettingServiceImpl.java
// 1.组织查询Map,dateBegin表示月份开始时间,dateEnd月份结束时间
// 2.查询当前月份的预约设置
// 3.将List<OrderSetting>,组织成List<Map>
3.OrderSettingDao.java
查询当前月份的预约设置
4.OrderSettingDao.xml
查询当前月份的预约设置(使用between and)
4.2.1. Controller
在OrderSettingController中提供getOrderSettingByMonth方法,根据月份查询预约设置信息
package com.atguigu.controller;
import com.alibaba.dubbo.config.annotation.Reference;
import com.atguigu.constant.MessageConstant;
import com.atguigu.entity.Result;
import com.atguigu.pojo.OrderSetting;
import com.a