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

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

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
  • 1
    点赞
  • 14
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

明月常新

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值