文章目录
第四章. 日历展示预约设置信息
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.atguigu.service.OrdersettingService;
import com.atguigu.utils.POIUtils;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.multipart.MultipartFile;
import java.io.IOException;
import java.util.ArrayList;
import java.util.Date;
import java.util.List;
import java.util.Map;
@RestController
@RequestMapping("/ordersetting")
public class OrdersettingController {
@Reference
OrderSettingService orderSettingService;
/**
* 根据日期查询预约设置数据(获取指定日期所在月份的预约设置数据)
* @param date
* @return
*/
@RequestMapping("/getOrderSettingByMonth")
public Result getOrderSettingByMonth(String date){//参数格式为：2019-03
try{//返回的是一个list集合
List<Map> list = orderSettingService.getOrderSettingByMonth(date);
//获取预约设置数据成功
return new Result(true,MessageConstant.GET_ORDERSETTING_SUCCESS,list);
}catch (Exception e){
e.printStackTrace();
//获取预约设置数据失败
return new Result(false,MessageConstant.GET_ORDERSETTING_FAIL);
}
}
4.2.2. 服务接口
在OrderSettingService服务接口中扩展方法getOrderSettingByMonth
List<Map> getOrderSettingByMonth(String date); //参数格式为：2019-03
4.2.3. 服务实现类
在OrderSettingServiceImpl服务实现类中实现方法getOrderSettingByMonth
package com.atguigu.service.impl;
import com.alibaba.dubbo.config.annotation.Service;
import com.atguigu.dao.OrdersettingDao;
import com.atguigu.pojo.OrderSetting;
import com.atguigu.service.OrdersettingService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.transaction.annotation.Transactional;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
@Service(interfaceClass = OrdersettingService.class)
@Transactional
public class OrdersettingServiceImpl implements OrdersettingService {
@Autowired
private OrdersettingDao ordersettingDao;
/** 传递的参数
* date（格式：2019-8）
* 构建的数据List<Map>
* map.put("date",1);
map.put("number",120);
map.put("reservations",10);
* 查询方案：SELECT * FROM t_ordersetting WHERE orderDate LIKE '2019-08-%'
* 查询方案：SELECT * FROM t_ordersetting WHERE orderDate BETWEEN '2019-9-1' AND '2019-9-31'
*/
//根据日期查询预约设置数据
public List<Map> getOrderSettingByMonth(String date) {//2019-3
// 1.组织查询Map，dateBegin表示月份开始时间，dateEnd月份结束时间
String dateBegin = date + "-1";//2019-3-1
String dateEnd = date + "-31";//2019-3-31
Map<String,Object> map = new HashMap();
//传入多个参数可以用map
map.put("dateBegin",dateBegin);
map.put("dateEnd",dateEnd);
// 2.查询当前月份的预约设置
List<OrderSetting> list = orderSettingDao.getOrderSettingByMonth(map);
List<Map> data = new ArrayList<>();
//原来的时间带有时分秒 需要格式化 否则前端显示不了
//SimpleDateFormat simpleDateFormat = new SimpleDateFormat();
// 3.将List<OrderSetting>，组织成List<Map>
for (OrderSetting orderSetting : list) {
Map orderSettingMap = new HashMap();
//orderSettingMap.put("date",simpleDateFormat.format(orderSetting.getOrderDate()));//获得日期 年月日
orderSettingMap.put("date",orderSetting.getOrderDate().getDate());//获得日期（几号）
orderSettingMap.put("number",orderSetting.getNumber());//可预约人数
orderSettingMap.put("reservations",orderSetting.getReservations());//已预约人数
data.add(orderSettingMap);
}
return data;
}
4.2.4. Dao接口
在OrderSettingDao接口中扩展方法getOrderSettingByMonth
List<OrderSetting> getOrderSettingByMonth(Map map);
4.2.5. Mapper映射文件
在OrderSettingDao.xml文件中扩展SQL
<!--根据月份查询预约设置信息
也可以使用sql语句：SELECT * FROM t_ordersetting WHERE orderDate LIKE '2019-08-%'
-->
<select id="getOrderSettingByMonth" parameterType="hashmap" resultType="orderSetting">
select * from t_ordersetting where orderDate between #{dateBegin} and #{dateEnd}
</select>
4.3. 初始化下个月，上个月数据
（1）点击事件
<div class="choose">
<span @click="goCurrentMonth(currentYear,currentMonth)" class="gotoday">今天</span>
<span @click="pickPre(currentYear,currentMonth)">?</span>
<span @click="pickNext(currentYear,currentMonth)">?</span>
</div>
（2）初始化日期数据（今天、上个月、下个月）：
//切换到当前月份
goCurrentMonth: function (year, month) {
var d = new Date();
this.initData(this.formatDate(d.getFullYear(), d.getMonth() + 1, 1));
this.createdDate();
},
//向前一个月
pickPre: function (year, month) {
// setDate(0); 上月最后一天
// setDate(-1); 上月倒数第二天
// setDate(dx) 参数dx为 上月最后一天的前后dx天
var d = new Date(this.formatDate(year, month, 1));
d.setDate(0);
this.initData(this.formatDate(d.getFullYear(), d.getMonth() + 1, 1));
this.createdDate();
},
//向后一个月
pickNext: function (year, month) {
var d = new Date(this.formatDate(year, month, 1));
d.setDate(35);获取指定天之后的日期
this.initData(this.formatDate(d.getFullYear(), d.getMonth() + 1, 1));
this.createDate();
},
分别执行this.createDate();表示初始化数据。
第五章. 基于日历实现预约设置
1：前台代码
（1）为设置按钮绑定事件
（2）弹出预约设置窗口，并发送ajax请求
2：后台代码
业务：
? 在页面上，基于日历实现预约设置
（1）OrderSettingController.java（Controller）
（2）OrderSettingService.java（服务接口）
（3）OrderSettingServiceImpl.java（服务实现类）
（4）OrderSettingDao.java（Dao接口）
（5）OrderSettingDao.xml（Mapper映射文件）
【讲解】
【需求】
本章节要完成的功能为通过点击日历中的设置按钮来设置对应日期的可预约人数。效果如下：
5.1. 前台代码
5.1.1. 为设置按钮绑定事件
（1）为日历中的设置按钮绑定单击事件，当前日期作为参数
<button v-if="dayobject.day > today" @click="handleOrderSet(dayobject.day)" class="orderbtn">设置</button>
（2）handleOrderset()方法
//预约设置
handleOrderSet(day){
alert(day);
},
5.1.2. 弹出预约设置窗口并发送ajax请求
完善handleOrderSet方法，弹出预约设置窗口，用户点击确定按钮则发送ajax请求
参考：$prompt 提交内容
//预约设置
handleOrderSet(day){
//alert(day); //day表示日期类型
//alert(day.getFullYear()); // 2019
//alert(day.getMonth()+1); // 8
//alert(day.getDate()); // 26
//alert(this.formatDate(day.getFullYear(),day.getMonth()+1,day.getDate()));
/**
* /^[0-9]*[1-9][0-9]*$/
* ^ 这表示以其后面的字符开头
* [0-9]* 这个匹配0个或0个以上的0-9之间的数字
* [1-9] 匹配一个1-9之间的数字
* $ 这表示以其前面的字符结尾
*/
this.$prompt('请输入可预约人数', '预约设置', {
confirmButtonText: '确定',
cancelButtonText: '取消',
inputPattern: /^[0-9]*[1-9][0-9]*$/,
inputErrorMessage: '只能输入正整数'
}).then(({ value }) => {//固定写法
//发送ajax请求根据日期修改可预约人数
axios.post("/ordersetting/editNumberByDate.do",{
orderDate:this.formatDate(day.getFullYear(),day.getMonth()+1,day.getDate()), //日期
number:value //可预约人数
}).then((response)=>{
if(response.data.flag){
this.createdData();
this.$message({
type: 'success',
message: response.data.message
});
}else{
this.$message.error(response.data.message);
}
});
}).catch(() => {
this.$message({
type: 'info',
message: '已取消'
});
});
},
也可以这样写//
var str = day.getFullYear()+"-"+(day.getMonth()+1)+"-"+day.getDate()
var param = {
number:value,
//orderDate:this.formatDate(day.getFullYear(),day.getMonth()+1,day.getDate())
orderDate:str
}
传参时这样传
axios.post("/ordersetting/editNumberByDate.do",param).then((response)=>{})
5.2. 后台代码
5.2.1. Controller
在OrderSettingController中提供方法editNumberByDate
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.atguigu.service.OrdersettingService;
import com.atguigu.utils.POIUtils;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.multipart.MultipartFile;
import java.io.IOException;
import java.util.ArrayList;
import java.util.Date;
import java.util.List;
import java.util.Map;
@RestController
@RequestMapping("/ordersetting")
public class OrdersettingController {
@Reference
private OrdersettingService ordersettingService;
/**
* 根据指定日期修改可预约人数
* @param orderSetting
* @return
*/
@RequestMapping("/editNumberByDate")
public Result editNumberByDate(@RequestBody OrderSetting orderSetting){
try{
orderSettingService.editNumberByDate(orderSetting);
//预约设置成功
return new Result(true,MessageConstant.ORDERSETTING_SUCCESS);
}catch (Exception e){
e.printStackTrace();
//预约设置失败
return new Result(false,MessageConstant.ORDERSETTING_FAIL);
}
}
5.2.2. 服务接口
在OrderSettingService服务接口中提供方法editNumberByDate
void editNumberByDate(OrderSetting orderSetting);
5.2.3. 服务实现类
在OrderSettingServiceImpl服务实现类中实现editNumberByDate
package com.atguigu.service.impl;
import com.alibaba.dubbo.config.annotation.Service;
import com.atguigu.dao.OrdersettingDao;
import com.atguigu.pojo.OrderSetting;
import com.atguigu.service.OrdersettingService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.transaction.annotation.Transactional;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
@Service(interfaceClass = OrdersettingService.class)
@Transactional
public class OrdersettingServiceImpl implements OrdersettingService {
@Autowired
private OrdersettingDao orderSettingDao;
//根据日期修改可预约人数
public void editNumberByDate(OrderSetting orderSetting) {
long count = orderSettingDao.findCountByOrderDate(orderSetting.getOrderDate());
if(count > 0){
//当前日期已经进行了预约设置，需要进行修改操作
orderSettingDao.editNumberByOrderDate(orderSetting);
}else{
//当前日期没有进行预约设置，进行添加操作
orderSettingDao.add(orderSetting);
}
}
5.2.4. Dao接口
在OrderSettingDao接口中提供方法
long findCountByOrderDate(Date orderDate);
void editNumberByOrderDate(OrderSetting orderSetting);
5.2.5. Mapper映射文件
在OrderSettingDao.xml映射文件中提供SQL
<!--根据日期更新预约人数-->
<update id="editNumberByOrderDate" parameterType="orderSetting">
update t_ordersetting set number = #{number} where orderDate = #{orderDate}
</update>
<!--根据预约日期查询-->
<select id="findCountByOrderDate" parameterType="java.util.Date" resultType="long">
select count(*) from t_ordersetting where orderDate = #{orderDate}
</select>