预约管理_预约设置_日历展示预约_设置信息

第四章. 日历展示预约设置信息

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