ssm项目笔记（七）日历设置

短命女 2022-01-06 00:25 270阅读 0赞

## 日历展示预约信息 ##

### 画图解析： ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwOTc2NzYx_size_16_color_FFFFFF_t_70][]

### 1.完善页面 ###

> 为设置按钮绑定事件
> 
> 为日历的设置按钮绑定单击事件，当前日期作为参数

![20190624100250780.png][]

### 1.1预约设置 ###

![20190624100343195.png][]

### 1.2弹出设置预约按钮并发送ajax请求 ###

> 完善预约设置handleOrderSet方法，弹出预约设置窗口，用户点击按钮则发送ajax请求

//预约设置
                    handleOrderSet(day){
                        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.initData(this.formatDate(day.getFullYear(), day.getMonth() + 1, 1));
                                    this.$message({
                                        type: 'success',
                                        message: response.data.message
                                    });
                                }else{
                                    this.$message.error(response.data.message);
                                }
                            });
                        }).catch(() => {
                            this.$message({
                                type: 'info',
                                message: '已取消'
                            });
                        });
                    },

## 后端数据 ##

### 1.3Controller ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwOTc2NzYx_size_16_color_FFFFFF_t_70 1][]

### 1.4服务接口 ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwOTc2NzYx_size_16_color_FFFFFF_t_70 2][]

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwOTc2NzYx_size_16_color_FFFFFF_t_70 3][]

### 1.6映射器Dao层 ###

![20190624102556929.png][]

### 1.7Mapper映射文件 ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwOTc2NzYx_size_16_color_FFFFFF_t_70 4][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwOTc2NzYx_size_16_color_FFFFFF_t_70]: /images/20211228/d62e50addf24466d9d2cb3b5ad477565.png
[20190624100250780.png]: /images/20211228/322bed888fb44e0c90db213c373651fa.png
[20190624100343195.png]: /images/20211228/a6e1ac94e9c6463e856e6b15813376ed.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwOTc2NzYx_size_16_color_FFFFFF_t_70 1]: /images/20211228/e000b72eb09645189a94a3691476d9a9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwOTc2NzYx_size_16_color_FFFFFF_t_70 2]: /images/20211228/f96b0dc3b38447e29b89247ad0917855.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwOTc2NzYx_size_16_color_FFFFFF_t_70 3]: /images/20211228/de88b8ef91df4faaa14320087303a99d.png
[20190624102556929.png]: /images/20211228/d0741bc8dd3d4f6dbd8cd900134be482.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwOTc2NzYx_size_16_color_FFFFFF_t_70 4]: /images/20211228/e3effff749c040d2b3db4f3a753c9fd4.png