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

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

  

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

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

3 代码实现

3.1 后端

3.1.1 Servlet

RouteServlet.java

/**
 * 查询单个旅游路线的详细信息
 */
public void findOne(HttpServletRequest request, HttpServletResponse response) throws IOException {
    HttpSession session = request.getSession();
    // 1.接收线路id
    String 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 对象
     */
    @Override
    public 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集合
     */
    @Override
    public 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 对象
     */
    @Override
    public 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>';
    // 遍历 routeImgList
    for (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