ssm项目笔记（六）日历展示预约设置信息

怼烎@ 2022-01-05 10:34 224阅读 0赞

### 1.1完善页面 ###

> 前面已经完成了预约设置功能，现在就需要通过日历的方式展示出来每天设置的预约人数。
> 
> 在页面中已经完成了日历的动态展示，我们只需要查询当前月份的预约设置信息并展示到日历中即可，同时在日历中还需要展示已经预约的人数，效果如下：

### 1.2使用静态数据调试 ###

> 首先使用静态数据模拟，然后改为发送ajax请求查询数据库

### 1.3实现步骤 ###

> 预约设置数据对应的模型数据为leftobj,在initData方法最后为leftobj模型数据赋值

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwOTc2NzYx_size_16_color_FFFFFF_t_70][]

**其中date表示日期，number表示可预约人数，reservations表示已预约人数**

### **1.4**使用VUE的v-for标签遍历上面的leftobj模型数据，展示到日历上： ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwOTc2NzYx_size_16_color_FFFFFF_t_70 1][]

### 效果展示 ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwOTc2NzYx_size_16_color_FFFFFF_t_70 2][]

## 回显数据 ##

## 使用静态数据调试 ##

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwOTc2NzYx_size_16_color_FFFFFF_t_70 3][]

> 修改：
> 
> 为了能够快速看到效果，我们可以先使用静态数据模拟，然后再改为发送ajax请求查询数据库。

### 1.1按钮 ###

![2019062408325191.png][]

### 1.2发送请求 ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwOTc2NzYx_size_16_color_FFFFFF_t_70 4][]

### 1.3Controller ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwOTc2NzYx_size_16_color_FFFFFF_t_70 5][]

### 1.4服务接口 ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwOTc2NzYx_size_16_color_FFFFFF_t_70 6][]

### 1.5服务实现类 ###

/***
         * 服务实现类
         * 根据日期查询预约的设置数据（获取指定的日期所在的月份预约设置数据）
         * @param date
         * @return
         */
        @Override
        public List<Map> getOrderSettingByMonth(String date) {
            //拼接
            String dateBegin = date + "-01";//2019-3-1
            String dateEnd = date + "-31";//2019-3-31
            //定义一个Map
            Map<String,String> map = new HashMap<>();
            //添加
            map.put("dateBegin", dateBegin);
            map.put("dateEnd", dateEnd);
            //调用
            // List<OrderSetting> list得到的结果
            List<OrderSetting> list = orderSettingDao.getOrderSettingByMonth(map);
            //最终返回的结果的对象
            List<Map> data = new ArrayList<>();
            if (list!=null && list.size()>0) {
                for (OrderSetting orderSetting : list) {
                    Map<String,Object> orderSettingMap = new HashMap<>();
                    //获得日期几号
                    //getDate获取当前几号
                    orderSettingMap.put("date",orderSetting.getOrderDate().getDate());
                    //可以预约的人数
                    orderSettingMap.put("number",orderSetting.getNumber());
                    //已近预约的人数
                    orderSettingMap.put("resservations",orderSetting.getReservations());
                    //存储到data中
                    data.add(orderSettingMap);
                }
            }
            return data;
        }

### 1.6持久层 ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwOTc2NzYx_size_16_color_FFFFFF_t_70 7][]

### 1.7映射器xml文件 ###

![20190624095636188.png][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwOTc2NzYx_size_16_color_FFFFFF_t_70]: /images/20211229/c5ac511c40984b85a260b402ff592ef0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwOTc2NzYx_size_16_color_FFFFFF_t_70 1]: /images/20211229/2556c0884c20419f9519b7878f57693c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwOTc2NzYx_size_16_color_FFFFFF_t_70 2]: /images/20211229/1cce06d423f64afe86b69aa073c391c9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwOTc2NzYx_size_16_color_FFFFFF_t_70 3]: /images/20211229/2433983fb37d4078a52625d88234fa68.png
[2019062408325191.png]: /images/20211229/298a5c04aef6451db71b2e4863c71957.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwOTc2NzYx_size_16_color_FFFFFF_t_70 4]: /images/20211229/43469ec22ad64dddb670d2b8be2f135b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwOTc2NzYx_size_16_color_FFFFFF_t_70 5]: /images/20211229/09aa7c9030b748e4a15b424e3ecbfc5b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwOTc2NzYx_size_16_color_FFFFFF_t_70 6]: /images/20211229/b78dfde8e7aa413288c335ac4b65597e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwOTc2NzYx_size_16_color_FFFFFF_t_70 7]: /images/20211229/0d01af01a5704fc8ba58c130242b99f1.png
[20190624095636188.png]: /images/20211229/322a6e43a8244a5e883f44af54046c74.png