黑马程序员技术交流社区

标题: 【郑州校区】传智健康项目讲义第五章 五 [打印本页]

---

作者: 我是楠楠    时间: 2019-10-31 10:27
标题: 【郑州校区】传智健康项目讲义第五章 五

【郑州校区】传智健康项目讲义第五章 五

5. 基于日历实现预约设置
本章节要完成的功能为通过点击日历中的设置按钮来设置对应日期的可预约人数。效果如下：

5.1 完善页面
5.1.1 为设置按钮绑定事件
为日历中的设置按钮绑定单击事件，当前日期作为参数

[AppleScript] 纯文本查看 复制代码

 <button v‐if="dayobject.day > today"

@click="handleOrderSet(dayobject.day)" class="orderbtn">设

置</button>//预约设置

handleOrderSet(day){

alert(day);

} 

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

[AppleScript] 纯文本查看 复制代码

//预约设置

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: '已取消'

});

});

}

5.2 后台代码
5.2.1 Controller
在OrderSettingController中提供方法editNumberByDate

[AppleScript] 纯文本查看 复制代码

/**

* 根据指定日期修改可预约人数

* @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

[AppleScript] 纯文本查看 复制代码

 public void editNumberByDate(OrderSetting orderSetting);

5.2.3 服务实现类
在OrderSettingServiceImpl服务实现类中实现editNumberByDate

[AppleScript] 纯文本查看 复制代码

//根据日期修改可预约人数

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接口中提供方法

[AppleScript] 纯文本查看 复制代码

 public void editNumberByOrderDate(OrderSetting orderSetting);

public long findCountByOrderDate(Date orderDate); 

5.2.5 Mapper映射文件
在OrderSettingDao.xml映射文件中提供SQL

[AppleScript] 纯文本查看 复制代码

<!‐‐根据日期更新可预约人数‐‐>

<update id="editNumberByOrderDate"

parameterType="com.itheima.pojo.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>

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2