黑马旅游网（6）：旅游线路详情展示

1 功能描述
2 功能分析
3 代码实现
- 3.1 后端
- - 3.1.1 Servlet
  - 3.1.2 Service
  - 3.1.3 Dao
  - 3.1.4 route/findOne 程序的响应内容
- 3.2 前端
4 相关链接

1 功能描述

接上篇黑马旅游网（5）：旅游线路分页展示，本篇博客对网站中的旅游线路详情页面的展示功能进行分析和实现。在浏览旅游线路分页展示页面时，当用户想进一步了解某条旅游线路的更多内容时，通过单击对应的 查看详情 按钮时，使网页能够跳转至对应的线路详情页面中。

分页展示页面，单击旅游线路

页面跳转至线路详情

视频教程中没有实现 取消收藏 功能，后续博客笔者会进行分析并给出一种实现方式。

2 功能分析

分析线路详情页面中的动态元素，内部包含了 4 张大图（轮播展示）、4 张小图（同列展示）、商家信息、说明信息等。这意味着，在前端提交详情页面请求时，后端在 service 层应当调用不同的 dao 对象来查询相应的数据表。

后端做出正确查询和响应的前提是前端能够提供对应详细页面的指示信息。该指示信息为数据库中的旅游线路表 tab_route 和图片路径记录表 tab_route_img 中的 rid 字段。

在之前的做旅游线路分页展示时，后端已经拿到了 rid 字段并以 json 的形式响应给浏览器。

前端 route_list.html 请求分页数据：route/pageQuery

/*** 分页请求函数*/
function load(cid, currentPage, rname) {if (isNaN(currentPage)) {currentPage = 1;}// 发送AJAX请求，向后端请求route/pageQuery执行程序，传递cid$.get("route/pageQuery", {cid: cid, currentPage: currentPage, rname: rname}, function (pageBean) {/* 其它JS代码 */

后端 RouteServlet.java/pageQuery 响应分页数据：json

综上所述，从时间线上看：

在 route_list.html 中，对 查看详情 字样的 <a> 标签设置跳转链接为 route_detail，同时也要夹带一个 rid 请求参数说明查询哪条线路的详情数据，通常采用 GET 请求即可。，即 route_detail?rid=xxx。
对于后端的处理，如前文所述：servlet 层接收到请求后，在 service 层应当调用不同的 dao 对象来查询相应的数据表即可并返回至 servlet 层。最后以 json 形式响应回浏览器。
浏览器再对响应内容加以解析和渲染，功能完成。

3 代码实现

3.1 后端

3.1.1 Servlet

RouteServlet.java

/*** 查询单个旅游路线的详细信息*/
public void findOne(HttpServletRequest request, HttpServletResponse response) throws IOException {HttpSession session = request.getSession();// 1.接收线路idString rid = request.getParameter("rid");rid = this.parseStr(rid);   // 主要防止获取的"null"字符串// 2.调用service查询Route route = routeService.findOne(rid);// 3.回写给客户端浏览器this.writeValue(route, response);
}

3.1.2 Service

RouteServiceImpl.java

/*** 根据线路id查询详细信息* @param rid 线路id* @return Route Bean 对象*/
@Override
public Route findOne(String rid) {// 1.根据rid从tab_route表中查询Route Bean对象Route route = routeDao.findOne(Integer.parseInt(rid));// 2.根据 Route Bean 对象中的 rid 查询图片集合信息List<RouteImg> routeImgList = routeImgDao.findByRid(route.getRid());route.setRouteImgList(routeImgList);    // 将集合设置为route对象的属性// 3.根据 Route Bean 对象中的 id 查询商家信息（Seller Bean 对象）Seller seller = sellerDao.findById(route.getSid());route.setSeller(seller);        // 将seller设置为route对象的属性return route;
}

3.1.3 Dao

RouteDaoImpl.java

public class RouteDaoImpl implements RouteDao {JdbcTemplate template = new JdbcTemplate(JDBCUtils.getDataSource());/*** 根据线路id查询详细信息* @param rid 线路id* @return Route Bean 对象*/@Overridepublic Route findOne(int rid) {String sql = "SELECT * FROM tab_route WHERE rid = ?";return template.queryForObject(sql, new BeanPropertyRowMapper<>(Route.class), rid);}

RouteImgDaoImpl.java

public class RouteImgDaoImpl implements RouteImgDao {JdbcTemplate template = new JdbcTemplate(JDBCUtils.getDataSource());/*** 根据 Route Bean 对象中的 rid 属性查询展示图片集合* @param rid 线路id* @return 泛型为 RouteImg Bean 对象的List集合*/@Overridepublic List<RouteImg> findByRid(int rid) {String sql = "SELECT * FROM tab_route_img WHERE rid = ?";return template.query(sql, new BeanPropertyRowMapper<>(RouteImg.class), rid);}
}

SellerDaoImpl.java

public class SellerDaoImpl implements SellerDao {JdbcTemplate template = new JdbcTemplate(JDBCUtils.getDataSource());/*** 根据商家id查询商家信息* @param sid 商家id* @return Seller Bean 对象*/@Overridepublic Seller findById(int sid) {String sql = "SELECT * FROM tab_seller WHERE sid = ?";return template.queryForObject(sql, new BeanPropertyRowMapper<>(Seller.class), sid);}
}

3.1.4 route/findOne 程序的响应内容

3.2 前端

route_list.html

for(let i = 0; i < pageBean.list.length; i ++) {// 获取一个 Route Bean 对象let route = pageBean.list[i];let li = '<li>\n' +
'                        <div class="img"><img src="'+ route["rimage"] +'" style="width: 299px"></div>\n' +
'                        <div class="text1">\n' +
'                            <p>'+ route["rname"] +'</p>\n' +
'                            <br/>\n' +
'                            <p>'+ route["routeIntroduce"] +'</p>\n' +
'                        </div>\n' +
'                        <div class="price">\n' +
'                            <p class="price_num">\n' +
'                                <span>&yen;</span>\n' +
'                                <span>'+ route["price"] +'</span>\n' +
'                                <span>起</span>\n' +
'                            </p>\n' +
'                            <p><a href="route_detail.html?rid='+ route.rid +'">查看详情</a></p>\n' +
'                        </div>\n' +
'                    </li>';routeLis += li;
}
$("#route").html(routeLis);

route_detail.html

// 1.获取线路id（rid）
let rid = getParameter("rid");// 2.发送请求请求路径 route/findOne
$.get("route/findOne", {rid: rid}, function (route) {// alert(route.rname);// 3.解析数据，填充html$("#rname").html(route.rname);$("#routeIntroduce").html(route.routeIntroduce);$("#price").html("￥"+route.price);$("#sname").html(route.seller.sname);$("#cnosphone").html(route.seller.consphone);$("#address").html(route.seller.address);$("#favoriteCount").html("已收藏"+ route.count +"次");  // 设置收藏次数// 图片展示// 先加载左侧大图let dtstr = '<img alt="" class="big_img" src="'+ route.routeImgList[0].bigPic +'">\n';$("#dt").html(dtstr);// 加载右侧小图，同时更新对应的左侧大图let ddstr = '<a class="up_img up_img_disable"></a>';// 遍历 routeImgListfor (let i = 0; i < route.routeImgList.length; i ++) {let 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>';// 将动态图片内容填充html$("#dd").html(ddstr);// 图片的展示和切换代码调用goImg();
});

4 相关链接

项目课程链接：https://www.bilibili.com/video/BV1CE411E7h4
完整课程连接：https://www.bilibili.com/video/BV1uJ411k7wy
笔者完整项目链接：https://github.com/Abexope/ItCast-HeiMa-Travel

JavaWeb - 黑马旅游网（6）：旅游线路详情展示相关推荐

黑马旅游网编写练习(7)--某一旅游线路详情展示
黑马旅游网编写练习(7)–某一旅游线路详情展示在分页展示的页面中,我们点击某一个旅游,想要查看详细信息,则点击了查看详情后,会跳转到该旅游路线对应的详细信息页面.接下来对该详细信息页面的查询与展示. ...
html大学生网站开发实践作业：旅游网站设计——联途旅游网(39页) HTML+CSS+JavaSc 旅游网页html 开心旅游网html 旅游网前端框架HTML模板
HTML5期末大作业:旅游网站设计--联途旅游网(39页) HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计计算机毕设网页设计源码常见网页设计作业题材 ...
html大学生网站开发实践作业：旅游网站设计——联途旅游网(39页) HTML+CSS+JavaSc 旅游网页html 开心旅游网html 旅游网前端框架HTML模板...
HTML5期末大作业:旅游网站设计--联途旅游网(39页) HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计计算机毕设网页设计源码常见网页设计作业题材 ...
黑马旅游网学习笔记之分页展示(六)
概述 (一)类别id传递 (二)功能分析 (三)后台代码实现 (四)前台代码实现 (一)类别id传递数据库中的一个category对应多个route,也就是一个分类中有多个线路查询不同分类的旅游线 ...
JavaWeb27.2【综合案例：旅游线路详情展示】
route_datail.html 1 <!DOCTYPE html>2 <html lang="en">3 4 <head>5 <met ...
JavaWeb - 《黑马旅游网》系列博客及笔者源码传送门
<黑马旅游网>系列博客及笔者源码传送门系列博客正篇番外笔者源码系列博客正篇项目启动用户注册登录与退出首页线路分类展示旅游线路分页展示旅游线路详情展示线路搜索分页展 ...
黑马旅游网完整代码_JavaWeb+黑马旅游网
JavaWeb+黑马旅游网 |____资料 |____16.黑马旅游网 |____15.Maven基础 |____14.Redis |____13.Ajax和JSON |____12.Jquery | ...
黑马旅游网完整代码_JavaWeb黑马旅游网视频下载
课程目录: JavaWeb+黑马旅游网 |____资料 |____16.黑马旅游网 |____15.Maven基础 |____14.Redis |____13.Ajax和JSON |____12.Jq ...
黑马旅游网项目详细思路和完整代码整理 -附源码
黑马旅游网项目详细思路和完整代码整理前言由于新冠病毒的原因,无法上学.百无聊赖下自己开始看视频学习,跟着视频做完了这个项目来检验学习成果,顺便写篇博客来记录一下. 话不多说,开始正题. 文档及其源 ...

JavaWeb - 黑马旅游网（6）：旅游线路详情展示