[资源下载] 【郑州校区】传智健康项目讲义第五章三

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

3.2.5 Mapper映射文件
创建Mapper映射文件OrderSettingDao.xml并提供相关SQL

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

<?xml version="1.0" encoding="UTF‐8" ?>
<!DOCTYPE mapper PUBLIC "‐//mybatis.org//DTD Mapper 3.0//EN"
"http://mybatis.org/dtd/mybatis‐3‐mapper.dtd" >
<mapper namespace="com.itheima.dao.OrderSettingDao" >
<!‐‐新增‐‐>
<insert id="add" parameterType="com.itheima.pojo.OrderSetting">
insert into t_ordersetting
(orderDate,number,reservations)
values
(#{orderDate},#{number},#{reservations})
</insert>
<!‐‐根据日期更新预约人数‐‐>
<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>
</mapper>

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

4.1 完善页面
4.1.1 使用静态数据调试为了能够快速看到效果，我们可以先使用静态数据模拟，然后再改为发送ajax请求查询数据库。
实现步骤：
（1）预约设置数据对应的模型数据为leftobj，在initData方法最后为leftobj模型数据赋值：

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

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模型数据，展示到日历上：

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

<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模型数据

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

//发送ajax请求，根据当前页面对应的月份查询预约设置信息
axios.post(
"/ordersetting/getOrderSettingByMonth.do?date="+this.currentYear+'‐
'+this.currentMonth
).then((response)=>{
if(response.data.flag){
//为模型数据赋值，通过双向绑定展示到日历中
this.leftobj = response.data.data;
}else{
this.$message.error(response.data.message);
}
[/size][/font][font=微软雅黑][size=3]});

帐号		自动登录	找回密码
密码			加入黑马

[资源下载] 【郑州校区】传智健康项目讲义第五章 三

0 个回复

[资源下载] 【郑州校区】传智健康项目讲义第五章三