失眠网 > 6-黑马旅游网-旅游线路详情

6-黑马旅游网-旅游线路详情

时间：2019-10-20 22:30:34

相关推荐

6-黑马旅游网-旅游线路详情

旅游线路详情

分析

后端

RouteServlet

findOne方法

/*** 根据id查询一个旅游线路的详细信息* @param request* @param response* @throws ServletException* @throws IOException*/public void findOne(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {//1.接收idString rid = request.getParameter("rid");//2.调用service查询route对象Route route = routeService.findOne(rid);//3.转为json写回客户端writeValue(route,response);}

RouteService

@Overridepublic Route findOne(String rid) {//1.根据id去route表中查询route对象Route route = routeDao.findOne(Integer.parseInt(rid));//2.根据route的id 查询图片集合信息List<RouteImg> routeImgList = routeImgDao.findByRid(route.getRid());//2.2将集合设置到route对象route.setRouteImgList(routeImgList);//3.根据route的sid（商家id）查询商家对象Seller seller = sellerDao.findById(route.getSid());route.setSeller(seller);return route;}

RouteDao

@Overridepublic Route findOne(int rid) {String sql = "select * from tab_route where rid = ?";return template.queryForObject(sql,new BeanPropertyRowMapper<Route>(Route.class),rid);}

RouteImgDaoImpl

public class RouteImgDaoImpl implements RouteImgDao {private JdbcTemplate template = new JdbcTemplate(JDBCUtils.getDataSource());@Overridepublic List<RouteImg> findByRid(int rid) {String sql = "select * from tab_route_img where rid = ? ";return template.query(sql,new BeanPropertyRowMapper<RouteImg>(RouteImg.class),rid);}}

SellerDaoImpl

public class SellerDaoImpl implements SellerDao {private JdbcTemplate template = new JdbcTemplate(JDBCUtils.getDataSource());@Overridepublic Seller findById(int id) {String sql = "select * from tab_seller where sid = ? ";return template.queryForObject(sql,new BeanPropertyRowMapper<Seller>(Seller.class),id);}}

前台

Route_detail.html中加载后

1.获取rid

2.发送ajax请求，获取route对象

3.解析对象的数据

//1.获取ridvar rid = getParameter("rid");//2.发送请求请求 route/findOne$.get("route/findOne",{rid:rid},function (route) {//3.解析数据填充html$("#rname").html(route.rname);$("#routeIntroduce").html(route.routeIntroduce);$("#price").html("¥"+route.price);$("#sname").html(route.seller.sname);$("#consphone").html(route.seller.consphone);$("#address").html(route.seller.address);//图片展示var ddstr = '<a class="up_img up_img_disable"></a>';//遍历routeImgListfor (var i = 0; i < route.routeImgList.length; i++) {var astr ;if(i >= 4){astr = '<a title="" class="little_img" data-bigpic="'+route.routeImgList[i].bigPic+'" style="display:none;">\n' +' <img src="'+route.routeImgList[i].smallPic+'">\n' +'</a>';}else{astr = '<a title="" class="little_img" data-bigpic="'+route.routeImgList[i].bigPic+'">\n' +' <img src="'+route.routeImgList[i].smallPic+'">\n' +'</a>';}ddstr += astr;}ddstr+='<a class="down_img down_img_disable" style="margin-bottom: 0;"></a>';$("#dd").html(ddstr);//图片展示和切换代码调用goImg();});

<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><title>路线详情</title><link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"><link rel="stylesheet" type="text/css" href="css/common.css"><link rel="stylesheet" type="text/css" href="css/route-detail.css"></head><body><div id="header"></div> <div class="wrap"><div class="bread_box"><a href="/">首页</a><span> ></span><a href="#">国内游</a><span> ></span><a href="#">全国-曼谷6-7天自由行泰国出境旅游特价往返机票自由行二次确认</a></div><div class="prosum_box"><dl class="prosum_left"><dt><img alt="" class="big_img" src="/Public/uploads/goods_img/img_size4/03/m49788843d72171643297ccc033d9288ee.jpg"></dt><dd id="dd"><a class="up_img up_img_disable"></a><a title="" class="little_img" data-bigpic="/Public/uploads/goods_img/img_size4/03/m40920d0669855e745d97f9ad1df966ebb.jpg"><img src="/Public/uploads/goods_img/img_size2/03/m20920d0669855e745d97f9ad1df966ebb.jpg"></a><a title="" class="little_img cur_img" data-bigpic="/Public/uploads/goods_img/img_size4/03/m49788843d72171643297ccc033d9288ee.jpg"><img src="/Public/uploads/goods_img/img_size2/03/m29788843d72171643297ccc033d9288ee.jpg"></a><a title="" class="little_img" data-bigpic="/Public/uploads/goods_img/img_size4/03/m4531a8dbceefa2c44e6d0e35627cd2689.jpg"><img src="/Public/uploads/goods_img/img_size2/03/m2531a8dbceefa2c44e6d0e35627cd2689.jpg"></a><a title="" class="little_img" data-bigpic="/Public/uploads/goods_img/img_size4/03/m46d8cb900e9f6c0a762aca19eae40c00c.jpg"><img src="/Public/uploads/goods_img/img_size2/03/m26d8cb900e9f6c0a762aca19eae40c00c.jpg"></a><a title="" class="little_img" data-bigpic="/Public/uploads/goods_img/img_size4/03/m45ea00f6eba562a767b5095bbf8cffe07.jpg" style="display:none;"><img src="/Public/uploads/goods_img/img_size2/03/m25ea00f6eba562a767b5095bbf8cffe07.jpg"></a><a title="" class="little_img" data-bigpic="/Public/uploads/goods_img/img_size4/03/m4265ec488cd1bc7ce749bc8c9b34b87bc.jpg" style="display:none;"><img src="/Public/uploads/goods_img/img_size2/03/m2265ec488cd1bc7ce749bc8c9b34b87bc.jpg"></a><a title="" class="little_img" data-bigpic="/Public/uploads/goods_img/img_size4/03/m4e7e964909d7dd1a9f6e5494d4dc0c847.jpg" style="display:none;"><img src="/Public/uploads/goods_img/img_size2/03/m2e7e964909d7dd1a9f6e5494d4dc0c847.jpg"></a><a title="" class="little_img" data-bigpic="/Public/uploads/goods_img/img_size4/03/m467db00e1b76718fab0fe8b96e10f4d35.jpg" style="display:none;"><img src="/Public/uploads/goods_img/img_size2/03/m267db00e1b76718fab0fe8b96e10f4d35.jpg"></a><a title="" class="little_img" data-bigpic="/Public/uploads/goods_img/img_size4/03/m487bbbc6e43eba6aa6a36cc1a182f7a20.jpg" style="display:none;"><img src="/Public/uploads/goods_img/img_size2/03/m287bbbc6e43eba6aa6a36cc1a182f7a20.jpg"></a><a class="down_img down_img_disable" style="margin-bottom: 0;"></a></dd></dl><div class="prosum_right"><p class="pros_title" id="rname">【尾单特卖】全国-曼谷6-7天自由行泰国出境旅游特价往返机票自由行二次确认</p><p class="hot" id="routeIntroduce">1-2月出发，网付立享￥1099/2人起！爆款位置有限，抢完即止！</p><div class="pros_other"><p >经营商家：<span id="sname">黑马国旅</span></p><p >咨询电话 : <span id="consphone">400-618-9090</span></p><p >地址： <span id="address">传智播客黑马程序员</span></p></div><div class="pros_price"><p class="price"><strong id="price">¥2699.00</strong><span>起</span></p><p class="collect"><a class="btn"><i class="glyphicon glyphicon-heart-empty"></i>点击收藏</a><a class="btn already" disabled="disabled"><i class="glyphicon glyphicon-heart-empty"></i>点击收藏</a><span>已收藏100次</span></p></div> </div></div><div class="you_need_konw"><span>旅游须知</span><div class="notice"><p>1、旅行社已投保旅行社责任险。建议游客购买旅游意外保险 <br><p>2、旅游者参加打猎、潜水、海边游泳、漂流、滑水、滑雪、滑草、蹦极、跳伞、滑翔、乘热气球、骑马、赛车、攀岩、水疗、水上飞机等属于高风险性游乐项目的，敬请旅游者务必在参加前充分了解项目的安全须知并确保身体状况能适应此类活动；如旅游者不具备较好的身体条件及技能，可能会造成身体伤害。</p><p>3、参加出海活动时，请务必穿着救生设备。参加水上活动应注意自己的身体状况，有心脏病、冠心病、高血压、感冒、发烧和饮酒及餐后不可以参加水上活动及潜水。在海里活动时，严禁触摸海洋中各种鱼类，水母，海胆，珊瑚等海洋生物，避免被其蛰伤。老人和小孩必须有成年人陪同才能参加合适的水上活动。在海边游玩时，注意保管好随身携带的贵重物品。</p><p>4、根据中国海关总署的规定，旅客在境外购买的物品，在进入中国海关时可能需要征收关税。详细内容见《中华人民共和国海关总署公告第54号文件》。</p><p>5、建议出发时行李托运，贵重物品、常用物品、常用药品、御寒衣物等请随身携带，尽量不要托运。行李延误属于不可抗力因素，我司将全力协助客人跟进后续工作，但我司对此不承担任何责任。</p><p>1、旅行社已投保旅行社责任险。建议游客购买旅游意外保险 <br><p>2、旅游者参加打猎、潜水、海边游泳、漂流、滑水、滑雪、滑草、蹦极、跳伞、滑翔、乘热气球、骑马、赛车、攀岩、水疗、水上飞机等属于高风险性游乐项目的，敬请旅游者务必在参加前充分了解项目的安全须知并确保身体状况能适应此类活动；如旅游者不具备较好的身体条件及技能，可能会造成身体伤害。</p><p>3、参加出海活动时，请务必穿着救生设备。参加水上活动应注意自己的身体状况，有心脏病、冠心病、高血压、感冒、发烧和饮酒及餐后不可以参加水上活动及潜水。在海里活动时，严禁触摸海洋中各种鱼类，水母，海胆，珊瑚等海洋生物，避免被其蛰伤。老人和小孩必须有成年人陪同才能参加合适的水上活动。在海边游玩时，注意保管好随身携带的贵重物品。</p><p>4、根据中国海关总署的规定，旅客在境外购买的物品，在进入中国海关时可能需要征收关税。详细内容见《中华人民共和国海关总署公告第54号文件》。</p><p>5、建议出发时行李托运，贵重物品、常用物品、常用药品、御寒衣物等请随身携带，尽量不要托运。行李延误属于不可抗力因素，我司将全力协助客人跟进后续工作，但我司对此不承担任何责任。</p></div> </div></div><div id="footer"></div><script src="js/jquery-3.3.1.js"></script><script src="js/bootstrap.min.js"></script><script type="text/javascript" src="js/include.js"></script><script src="js/getParameter.js"></script><script>$(document).ready(function() {//自动播放goImg();// var timer = setInterval("auto_play()", 5000);});function goImg(){//焦点图效果//点击图片切换图片$('.little_img').on('mousemove', function() {$('.little_img').removeClass('cur_img');var big_pic = $(this).data('bigpic');$('.big_img').attr('src', big_pic);$(this).addClass('cur_img');});//上下切换var picindex = 0;var nextindex = 4;$('.down_img').on('click',function(){var num = $('.little_img').length;if((nextindex + 1) <= num){$('.little_img:eq('+picindex+')').hide();$('.little_img:eq('+nextindex+')').show();picindex = picindex + 1;nextindex = nextindex + 1;}});$('.up_img').on('click',function(){var num = $('.little_img').length;if(picindex > 0){$('.little_img:eq('+(nextindex-1)+')').hide();$('.little_img:eq('+(picindex-1)+')').show();picindex = picindex - 1;nextindex = nextindex - 1;}});}//自动轮播方法function auto_play() {var cur_index = $('.prosum_left dd').find('a.cur_img').index();cur_index = cur_index - 1;var num = $('.little_img').length;var max_index = 3;if ((num - 1) < 3) {max_index = num - 1;}if (cur_index < max_index) {var next_index = cur_index + 1;var big_pic = $('.little_img:eq(' + next_index + ')').data('bigpic');$('.little_img').removeClass('cur_img');$('.little_img:eq(' + next_index + ')').addClass('cur_img');$('.big_img').attr('src', big_pic);} else {var big_pic = $('.little_img:eq(0)').data('bigpic');$('.little_img').removeClass('cur_img');$('.little_img:eq(0)').addClass('cur_img');$('.big_img').attr('src', big_pic);}}$(function () {/*<dd><a class="up_img up_img_disable"></a><a title="" class="little_img" data-bigpic="/Public/uploads/goods_img/img_size4/03/m40920d0669855e745d97f9ad1df966ebb.jpg"><img src="/Public/uploads/goods_img/img_size2/03/m20920d0669855e745d97f9ad1df966ebb.jpg"></a><a title="" class="little_img cur_img" data-bigpic="/Public/uploads/goods_img/img_size4/03/m49788843d72171643297ccc033d9288ee.jpg"><img src="/Public/uploads/goods_img/img_size2/03/m29788843d72171643297ccc033d9288ee.jpg"></a><a title="" class="little_img" data-bigpic="/Public/uploads/goods_img/img_size4/03/m4531a8dbceefa2c44e6d0e35627cd2689.jpg"><img src="/Public/uploads/goods_img/img_size2/03/m2531a8dbceefa2c44e6d0e35627cd2689.jpg"></a><a title="" class="little_img" data-bigpic="/Public/uploads/goods_img/img_size4/03/m46d8cb900e9f6c0a762aca19eae40c00c.jpg"><img src="/Public/uploads/goods_img/img_size2/03/m26d8cb900e9f6c0a762aca19eae40c00c.jpg"></a><a title="" class="little_img" data-bigpic="/Public/uploads/goods_img/img_size4/03/m45ea00f6eba562a767b5095bbf8cffe07.jpg" style="display:none;"><img src="/Public/uploads/goods_img/img_size2/03/m25ea00f6eba562a767b5095bbf8cffe07.jpg"></a><a title="" class="little_img" data-bigpic="/Public/uploads/goods_img/img_size4/03/m4265ec488cd1bc7ce749bc8c9b34b87bc.jpg" style="display:none;"><img src="/Public/uploads/goods_img/img_size2/03/m2265ec488cd1bc7ce749bc8c9b34b87bc.jpg"></a><a title="" class="little_img" data-bigpic="/Public/uploads/goods_img/img_size4/03/m4e7e964909d7dd1a9f6e5494d4dc0c847.jpg" style="display:none;"><img src="/Public/uploads/goods_img/img_size2/03/m2e7e964909d7dd1a9f6e5494d4dc0c847.jpg"></a><a title="" class="little_img" data-bigpic="/Public/uploads/goods_img/img_size4/03/m467db00e1b76718fab0fe8b96e10f4d35.jpg" style="display:none;"><img src="/Public/uploads/goods_img/img_size2/03/m267db00e1b76718fab0fe8b96e10f4d35.jpg"></a><a title="" class="little_img" data-bigpic="/Public/uploads/goods_img/img_size4/03/m487bbbc6e43eba6aa6a36cc1a182f7a20.jpg" style="display:none;"><img src="/Public/uploads/goods_img/img_size2/03/m287bbbc6e43eba6aa6a36cc1a182f7a20.jpg"></a><a class="down_img down_img_disable" style="margin-bottom: 0;"></a></dd>*///1.获取ridvar rid = getParameter("rid");//2.发送请求请求 route/findOne$.get("route/findOne",{rid:rid},function (route) {//3.解析数据填充html$("#rname").html(route.rname);$("#routeIntroduce").html(route.routeIntroduce);$("#price").html("¥"+route.price);$("#sname").html(route.seller.sname);$("#consphone").html(route.seller.consphone);$("#address").html(route.seller.address);//图片展示var ddstr = '<a class="up_img up_img_disable"></a>';//遍历routeImgListfor (var i = 0; i < route.routeImgList.length; i++) {var astr ;if(i >= 4){astr = '<a title="" class="little_img" data-bigpic="'+route.routeImgList[i].bigPic+'" style="display:none;">\n' +' <img src="'+route.routeImgList[i].smallPic+'">\n' +'</a>';}else{astr = '<a title="" class="little_img" data-bigpic="'+route.routeImgList[i].bigPic+'">\n' +' <img src="'+route.routeImgList[i].smallPic+'">\n' +'</a>';}ddstr += astr;}ddstr+='<a class="down_img down_img_disable" style="margin-bottom: 0;"></a>';$("#dd").html(ddstr);//图片展示和切换代码调用goImg();});});</script></body></html>

如果觉得《6-黑马旅游网-旅游线路详情》对你有帮助，请点赞、收藏，并留下你的观点哦！

本内容不代表本网观点和政治立场，如有侵犯你的权益请联系我们处理。

网友评论

网友评论仅供其表达个人看法，并不表明网站立场。