预约成功页面展示
前面已经完成了体检预约,预约成功后页面会跳转到成功提示页面(orderSuccess.html)并展示预约的相关信息(体检人、体检套餐、体检时间等)。
页面调整#
提供orderSuccess.html页面,展示预约成功后相关信息

<div class="info-title"> <span class="name">体检预约成功</span> </div> <div class="notice-item"> <div class="item-title">预约信息</div> <div class="item-content"> <p>体检人:{{orderInfo.member}}</p> <p>体检套餐:{{orderInfo.setmeal}}</p> <p>体检日期:{{orderInfo.orderDate}}</p> <p>预约类型:{{orderInfo.orderType}}</p> </div> </div>

<script> //从请求URL根据参数名获取对应值,orderId为预约id var id = getUrlParam("orderId"); </script> <script> var vue = new Vue({ el:'#app', data:{ orderInfo:{} }, mounted(){ axios.post("/order/findById.do?id=" + id).then((response) => { this.orderInfo = response.data.data; }); } }); </script>
后台代码#
Controller#
在OrderController中提供findById方法,根据预约id查询预约相关信息

/** * 根据id查询预约信息,包括套餐信息和会员信息 * @param id * @return */ @RequestMapping("/findById") public Result findById(Integer id){ try{ Map map = orderService.findById(id); //查询预约信息成功 return new Result(true,MessageConstant.QUERY_ORDER_SUCCESS,map); }catch (Exception e){ e.printStackTrace(); //查询预约信息失败 return new Result(false,MessageConstant.QUERY_ORDER_FAIL); } }
服务接口#
在OrderService服务接口中扩展findById方法
//根据id查询预约信息,包括体检人信息、套餐信息 public Map findById(Integer id) throws Exception;
服务实现类#
在OrderServiceImpl服务实现类中实现findById方法
//根据id查询预约信息,包括体检人信息、套餐信息 public Map findById(Integer id) throws Exception { Map map = orderDao.findById4Detail(id); if(map != null){ //处理日期格式 Date orderDate = (Date) map.get("orderDate"); map.put("orderDate",DateUtils.parseDate2String(orderDate)); } return map; }
Dao接口#
在OrderDao接口中扩展findById4Detail方法
public Map findById4Detail(Integer id);
Mapper映射文件#
在OrderDao.xml映射文件中提供SQL语句
<!--根据预约id查询预约信息,包括体检人信息、套餐信息--> <select id="findById4Detail" parameterType="int" resultType="map"> select m.name member ,s.name setmeal,o.orderDate orderDate,o.orderType orderType from t_order o, t_member m, t_setmeal s where o.member_id=m.id and o.setmeal_id=s.id and o.id=#{id} </select>
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· AI与.NET技术实操系列(二):开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识(上)
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
· DeepSeek 开源周回顾「GitHub 热点速览」
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布:重大改进与新特性概览!
· AI与.NET技术实操系列(二):开始使用ML.NET
· .NET10 - 预览版1新功能体验(一)