黑马旅游网-旅游线路详情信息功能（九）
2024-06-30 14:24:19
目录
一、分析
二、前端实现
三、后端实现
RouteServlet
RouteService
RouteServiceImpl
RouteImgDao
RouteImgDaoImpl
SellerDaoImpl
SellerDao
四、测试
一、分析
根据id查询一个旅游线路的详细信息
二、前端实现
route_detail.html
<!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"><script src="js/jquery-3.3.1.js"></script><script src="js/getParameter.js"></script>
</head><body>
<!--引入头部-->
<div id="header"></div><!-- 详情 start --> <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="http://www.jinmalvyou.com/Public/uploads/goods_img/img_size4/201703/m49788843d72171643297ccc033d9288ee.jpg"></dt><dd id="ddString"></dd></dl><div class="prosum_right"><p id="pros_title" class="pros_title"></p><p id="hot" class="hot"></p><div class="pros_other"><p>经营商家 ：<span id="seller_name"></span></p><p>咨询电话 : <span id="phone_number"></span></p><p>地址 ： <span id="address"></span></p></div><div class="pros_price"><p id="price" class="price"><strong>¥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、根据中国海关总署的规定，旅客在境外购买的物品，在进入中国海关时可能需要征收关税。详细内容见《中华人民共和国海关总署公告2010年第54号文件》。</p><p>5、建议出发时行李托运，贵重物品、常用物品、常用药品、御寒衣物等请随身携带，尽量不要托运。行李延误属于不可抗力因素，我司将全力协助客人跟进后续工作，但我司对此不承担任何责任。</p><p>1、旅行社已投保旅行社责任险。建议游客购买旅游意外保险 <br><p>2、旅游者参加打猎、潜水、海边游泳、漂流、滑水、滑雪、滑草、蹦极、跳伞、滑翔、乘热气球、骑马、赛车、攀岩、水疗、水上飞机等属于高风险性游乐项目的，敬请旅游者务必在参加前充分了解项目的安全须知并确保身体状况能适应此类活动；如旅游者不具备较好的身体条件及技能，可能会造成身体伤害。</p><p>3、参加出海活动时，请务必穿着救生设备。参加水上活动应注意自己的身体状况，有心脏病、冠心病、高血压、感冒、发烧和饮酒及餐后不可以参加水上活动及潜水。在海里活动时，严禁触摸海洋中各种鱼类，水母，海胆，珊瑚等海洋生物，避免被其蛰伤。老人和小孩必须有成年人陪同才能参加合适的水上活动。在海边游玩时，注意保管好随身携带的贵重物品。</p><p>4、根据中国海关总署的规定，旅客在境外购买的物品，在进入中国海关时可能需要征收关税。详细内容见《中华人民共和国海关总署公告2010年第54号文件》。</p><p>5、建议出发时行李托运，贵重物品、常用物品、常用药品、御寒衣物等请随身携带，尽量不要托运。行李延误属于不可抗力因素，我司将全力协助客人跟进后续工作，但我司对此不承担任何责任。</p></div> </div></div><!-- 详情 end --><!--引入头部--><div id="footer"></div><!-- jQuery (necessary for Bootstrap's JavaScript plugins) --><script src="js/jquery-3.3.1.js"></script><!-- Include all compiled plugins (below), or include individual files as needed --><script src="js/bootstrap.min.js"></script><!--导入布局js，共享header和footer--><script type="text/javascript" src="js/include.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="http://www.jinmalvyou.com/Public/uploads/goods_img/img_size4/201703/m40920d0669855e745d97f9ad1df966ebb.jpg">// <img src="http://www.jinmalvyou.com/Public/uploads/goods_img/img_size2/201703/m20920d0669855e745d97f9ad1df966ebb.jpg">// </a>// <a title="" class="little_img cur_img" data-bigpic="http://www.jinmalvyou.com/Public/uploads/goods_img/img_size4/201703/m49788843d72171643297ccc033d9288ee.jpg">// <img src="http://www.jinmalvyou.com/Public/uploads/goods_img/img_size2/201703/m29788843d72171643297ccc033d9288ee.jpg">// </a>// <a title="" class="little_img" data-bigpic="http://www.jinmalvyou.com/Public/uploads/goods_img/img_size4/201703/m4531a8dbceefa2c44e6d0e35627cd2689.jpg">// <img src="http://www.jinmalvyou.com/Public/uploads/goods_img/img_size2/201703/m2531a8dbceefa2c44e6d0e35627cd2689.jpg">// </a>// <a title="" class="little_img" data-bigpic="http://www.jinmalvyou.com/Public/uploads/goods_img/img_size4/201703/m46d8cb900e9f6c0a762aca19eae40c00c.jpg">// <img src="http://www.jinmalvyou.com/Public/uploads/goods_img/img_size2/201703/m26d8cb900e9f6c0a762aca19eae40c00c.jpg">// </a>// <a title="" class="little_img" data-bigpic="http://www.jinmalvyou.com/Public/uploads/goods_img/img_size4/201703/m45ea00f6eba562a767b5095bbf8cffe07.jpg" style="display:none;">// <img src="http://www.jinmalvyou.com/Public/uploads/goods_img/img_size2/201703/m25ea00f6eba562a767b5095bbf8cffe07.jpg">// </a>// <a title="" class="little_img" data-bigpic="http://www.jinmalvyou.com/Public/uploads/goods_img/img_size4/201703/m4265ec488cd1bc7ce749bc8c9b34b87bc.jpg" style="display:none;">// <img src="http://www.jinmalvyou.com/Public/uploads/goods_img/img_size2/201703/m2265ec488cd1bc7ce749bc8c9b34b87bc.jpg">// </a>// <a title="" class="little_img" data-bigpic="http://www.jinmalvyou.com/Public/uploads/goods_img/img_size4/201703/m4e7e964909d7dd1a9f6e5494d4dc0c847.jpg" style="display:none;">// <img src="http://www.jinmalvyou.com/Public/uploads/goods_img/img_size2/201703/m2e7e964909d7dd1a9f6e5494d4dc0c847.jpg">// </a>// <a title="" class="little_img" data-bigpic="http://www.jinmalvyou.com/Public/uploads/goods_img/img_size4/201703/m467db00e1b76718fab0fe8b96e10f4d35.jpg" style="display:none;">// <img src="http://www.jinmalvyou.com/Public/uploads/goods_img/img_size2/201703/m267db00e1b76718fab0fe8b96e10f4d35.jpg">// </a>// <a title="" class="little_img" data-bigpic="http://www.jinmalvyou.com/Public/uploads/goods_img/img_size4/201703/m487bbbc6e43eba6aa6a36cc1a182f7a20.jpg" style="display:none;">// <img src="http://www.jinmalvyou.com/Public/uploads/goods_img/img_size2/201703/m287bbbc6e43eba6aa6a36cc1a182f7a20.jpg">// </a>// <a class="down_img down_img_disable" style="margin-bottom: 0;"></a>// </dd>var rid=getParameter("rid");//通过异步获取route信息$.get("route/queryOne",{rid:rid},function (route) {$("#pros_title").html(route.rname);$("#hot").html(route.routeIntroduce);$("#price").html("¥"+route.price);$("#seller_name").html(route.seller.sname);$("#phone_number").html(route.seller.consphone);$("#address").html(route.seller.address);//图片信息var ddstr = ' <a class="up_img up_img_disable"></a>';//遍历图片集合for(var i=0;i<route.routeImgList.length;i++){/**<a title="" class="little_img" data-bigpic="http://www.jinmalvyou.com/Public/uploads/goods_img/img_size4/201703/m40920d0669855e745d97f9ad1df966ebb.jpg"><img src="http://www.jinmalvyou.com/Public/uploads/goods_img/img_size2/201703/m20920d0669855e745d97f9ad1df966ebb.jpg"></a>*/var astr="";if (i>=4){//图片超出展示astr='<a title="" class="little_img" style="display:none;" data-bigpic="'+route.routeImgList[i].bigPic+'">\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>';$("#ddString").html(ddstr);goImg();});});</script>
</body></html>
三、后端实现
RouteServlet
package com.hotdas.travel.web.servlet;import com.hotdas.travel.domain.PageBean;
import com.hotdas.travel.domain.Route;
import com.hotdas.travel.service.RouteService;
import com.hotdas.travel.service.impl.RouteServiceImpl;import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;@WebServlet("/route/*")
public class RouteServlet extends BaseServlet {private RouteService routeService = new RouteServiceImpl();public void queryPage(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException,Exception {//接收参数String currentPageStr = request.getParameter("currentPage");String cidStr = request.getParameter("cid");String pageSizeStr = request.getParameter("pageSize");System.out.println("cid="+cidStr);//有可能通过线路名称查询String rnameStr = request.getParameter("rname");rnameStr=new String(rnameStr.getBytes("iso-8859-1"),"utf-8");System.out.println("rname="+rnameStr);//判断cidint cid =0;if(cidStr!=null && cidStr.length()>0 && !"null".equals(cidStr)){cid=Integer.parseInt(cidStr);}int currentPage=1;if(currentPageStr!=null && currentPageStr.length()>0){currentPage=Integer.parseInt(currentPageStr);}else{currentPage=1;}int pageSize = 0;if(pageSizeStr!=null && pageSizeStr.length()>0){pageSize=Integer.parseInt(pageSizeStr);}else{pageSize=5;}//调用service查询数据PageBean<Route> pageBean = routeService.queryPage(cid,currentPage,pageSize,rnameStr);writeValue(pageBean,response);}//查询路线详情信息public void queryOne(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException,Exception {System.out.println("queryOne is running ...");//获取ridString rid = request.getParameter("rid");//调用service查询路线的详情信息Route route = routeService.findOne(rid);//转化为json返回客户端writeValue(route,response);}
}
RouteService
package com.hotdas.travel.service;import com.hotdas.travel.domain.PageBean;
import com.hotdas.travel.domain.Route;public interface RouteService {PageBean<Route> queryPage(int cid, int currentPage, int pageSize, String rnameStr);Route findOne(String rid);
}
RouteServiceImpl
package com.hotdas.travel.service.impl;import com.hotdas.travel.dao.RouteDao;
import com.hotdas.travel.dao.RouteImgDao;
import com.hotdas.travel.dao.SellerDao;
import com.hotdas.travel.dao.impl.RouteDaoImpl;
import com.hotdas.travel.dao.impl.RouteImgDaoImpl;
import com.hotdas.travel.dao.impl.SellerDaoImpl;
import com.hotdas.travel.domain.PageBean;
import com.hotdas.travel.domain.Route;
import com.hotdas.travel.domain.RouteImg;
import com.hotdas.travel.domain.Seller;
import com.hotdas.travel.service.RouteService;import java.util.List;public class RouteServiceImpl implements RouteService {private RouteDao routeDao = new RouteDaoImpl();private RouteImgDao routeImgDao = new RouteImgDaoImpl();private SellerDao sellerDao = new SellerDaoImpl();@Overridepublic PageBean<Route> queryPage(int cid, int currentPage, int pageSize, String rnameStr) {PageBean<Route> pageBean = new PageBean<>();pageBean.setCurrentPage(currentPage);pageBean.setPageSize(pageSize);//每页的记录集//先求出开始的索引int start = (currentPage-1)*pageSize;List<Route> list = routeDao.queryPageList(cid,start,pageSize,rnameStr);pageBean.setList(list);//总记录数int totalCount = routeDao.queryCount(cid,rnameStr);pageBean.setTotalCount(totalCount);//求出总页数int pageCount = totalCount% pageSize ==0 ? totalCount/pageSize : (totalCount/pageSize)+1;pageBean.setTotalPage(pageCount);return pageBean;}@Overridepublic Route findOne(String rid) {//详情的文字信息Route route = routeDao.findOne(rid);//查询详情的图片设置到集合中List<RouteImg> list = routeImgDao.queryByRid(rid);route.setRouteImgList(list);//查询商家信息Seller seller = sellerDao.findById(route.getSid());route.setSeller(seller);return route;}
}
RouteImgDao
package com.hotdas.travel.dao;import com.hotdas.travel.domain.RouteImg;import java.util.List;public interface RouteImgDao {List<RouteImg> queryByRid(String rid);
}
RouteImgDaoImpl
package com.hotdas.travel.dao.impl;import com.hotdas.travel.dao.RouteImgDao;
import com.hotdas.travel.domain.RouteImg;
import com.hotdas.travel.util.JDBCUtils;
import org.springframework.jdbc.core.BeanPropertyRowMapper;
import org.springframework.jdbc.core.JdbcTemplate;import java.util.List;public class RouteImgDaoImpl implements RouteImgDao {private JdbcTemplate template = new JdbcTemplate(JDBCUtils.getDataSource());@Overridepublic List<RouteImg> queryByRid(String rid) {String sql ="select * from tab_route_img where rid =?";List<RouteImg> routeImgs = template.query(sql,new BeanPropertyRowMapper<RouteImg>(RouteImg.class),rid);return routeImgs;}
}
SellerDaoImpl
package com.hotdas.travel.dao.impl;import com.hotdas.travel.dao.SellerDao;
import com.hotdas.travel.domain.Seller;
import com.hotdas.travel.util.JDBCUtils;
import org.springframework.jdbc.core.BeanPropertyRowMapper;
import org.springframework.jdbc.core.JdbcTemplate;public class SellerDaoImpl implements SellerDao {private JdbcTemplate template = new JdbcTemplate(JDBCUtils.getDataSource());@Overridepublic Seller findById(int sid) {String sql = "select * from tab_seller where sid=?";Seller seller = template.queryForObject(sql,new BeanPropertyRowMapper<Seller>(Seller.class),sid);return seller;}
}
SellerDao
package com.hotdas.travel.dao;import com.hotdas.travel.domain.Seller;public interface SellerDao {Seller findById(int sid);
}
四、测试
点击国内游，选择一个，查看旅游详细页
有更好优化的代码，可以在评论区展示出来
黑马旅游网-旅游线路详情信息功能（九）相关推荐
- 黑马旅游网——旅游路线详情展示和旅游路线收藏功能（完结）
旅游路线详情展示效果: 将该旅游路线的价格.商家.风景图等等详细信息展示到详情页面上: 这个功能实现起来不难,但是比较墨迹,因为这一个页面中的信息要从三张表中查询:商家信息在seller表,图片在ro ...
- 迷你旅游网——旅游线路用名称查询以及查看详情（完成查询条件不确定性的定义模板方式解决...）
一. 即将完成的工作 线路名称查询(模糊查询) 查看线路详情 二.线路名称查询(模糊查询) 1.在之前的线路分页展示代码上修改部分代码来完成查询功能 查询参数的传递,类别id:cid,线路名称:rna ...
- 黑马旅游网编写练习(1)--注册功能
黑马旅游网编写练习 黑马旅游网是包含学习完java-web的一个综合项目:项目中既包含前端,也包含后端的逻辑处理.项目使用三级结构,并未使用框架技术. 本次项目使用maven管理.练习使用一些编写好的 ...
- 黑马旅游网-旅游分类线路分页显示（七）
目录 一.先查旅游分类所有内容 二.查询分页数据 三.实现后端代码 RouteServlet RouteServiceImpl RouteService RouteDaoImpl Rou ...
- 7. 黑马旅游网——旅游线路的名称查询
目录 12.旅游线路名称查询 12.1 查询参数的传递 12.2 修改后台代码 12.3 修改前台代码 13.旅游线路的详情展示 12.旅游线路名称查询 12.1 查询参数的传递 在header.ht ...
- 我发现了一个黑马旅游网旅游线路查询的bug
2020.5.5第一次编写 项目背景 有三种方式展示数据: 只通过category的cid属性来显示数据,也即是点击分类显示相应数据. 只通过查询(他对应变量为rname)来显示数据,也即是在首页直 ...
- 7-黑马旅游网-旅游线路收藏
旅游线路收藏功能 分析 判断当前登录用户是否收藏过该线路 当页面加载完成后,发送ajax请求,获取用户是否收藏的标记 根据标记,展示不同的按钮样式 后台代码 RouteServlet public v ...
- 02.javaWeb旅游网小项目【注册功能】
用户注册模块 1.实现注册功能 1)注册功能(前台页面) 前台注册页面注册校验成功 使用异步交互(JQuery-ajax) 点击注册 将当前提交内容从后台数据库查询是否存在 $(function () ...
- 【Vue3.0移动端项目--旅游网】-- 房屋详情页创建以及房屋详情图片展示
多一些不为什么的坚持
最新文章
- HDU 4288 Coder [线段树]
- 浮点转字符串性能比较
- 《庆余年》是爆了，但想打高分的阅文仍然没有公式可套
- 2016-6-28 工作总结
- 线程方法destroy（）和stop（Throwable）在JDK 11中删除
- ubuntu 虚拟机 串口 socket_上篇 | 虚拟机Ubuntu向开发板AMR传送文件
- android 浏览器 pc一样大小,手机端不同浏览器[主流的，包括Android自带]对cookie的不同限制，如个数和大小，如何查看？...
- 知识技能归档-SSL协议20210325
- 【华为云技术分享】【昇腾】ModelArts与Atlas 200 DK云端协同开发——行人检测Demo（提供完整Demo）
- Android编译默认英语,Android 编译系统 （一）
- 基于Bokeh库，手把手教你制作“子弹图“和“瀑布图“！
- cad lisp 法兰6_南昌平板法兰加工设备_山东平安数控机械有限公司
- inux快速修改文件夹及文件下所有文件与文件夹权限
- 【疑难杂症】xmind启动后，自动退出的问题
- 小程序的优势和劣势是什么？
- 中国大学mooc c语言作业,中国大学mooc程序设计入门——C语言：第三周测验(示例代码)...
- Elasticsearch: 运用 Pinned query 来提高文档的排名 （7.5发行版新功能）
- 异构数据源离线同步工具之DataX的安装部署
- 为什么误差采取平方和形式
- ECCV2018 papers