JavaWeb-旅游网-详情展示

JavaWeb-旅游网-注册和登录
JavaWeb-旅游网-导航条和分页展示
JavaWeb-旅游网-线路搜索
JavaWeb-旅游网-点击收藏
功能： 当用户点击查看详情时，可以查看到详细的线路信息


当点击详情时，会跳转到对应的详情页面，请求路径带有该线路的rid，后台根据此rid查询数据并响应给前端

详情页面有三部分，线路的详细信息，商家信息，图片展示,把这三部分信息，全都封装再Route类中再响应给前端进行解析展示

        Route route = routeDao.findByRid(rid);
        //根据rid查询旅游线路的图片集合
        List<RouteImg> routeImgList = routeImageDao.findByRid(route.getRid());
        route.setRouteImgList(routeImgList);
        //根据sid查询商家信息
        Seller seller = sellerDao.findBySid(route.getSid());
        route.setSeller(seller);

详细信息：

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

商家信息

    /**
     * 通过sid获得商家信息
     * @param sid
     * @return
     */
    @Override
    public Seller findBySid(int sid) {
        String sql = "select *from tab_seller where sid = ?";
        return template.queryForObject(sql,new BeanPropertyRowMapper<>(Seller.class),sid );
    }

图片集合

    /**
     * 根据rid获取图片集合
     * @param rid
     * @return
     */
    @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 );
    }

前端解析并展示

 $(function () {
       var rid = getParameter("rid");
       $.get("route/findOne",{rid:rid},function (data) {
           $("#title").html(data.rname);
           $("#introduce").html(data.routeIntroduce);
           $("#sname").html(data.seller.sname);
           $("#tel").html(data.seller.consphone);
           $("#address").html(data.seller.address);
           $("#price").html("￥"+data.price);
           $("#collectCount").html("已被收藏: "+data.count+" 次")

           //图片展示
           var ddstr = '<a class="up_img up_img_disable"></a>'
           //遍历图片列表

           for (var i = 0; i < data.routeImgList.length; i++) {
               var astr = '';
               if (i <= 4){
                   var astr = '<a title="" class="little_img" data-bigpic="'+data.routeImgList[i].bigPic+'">\n' +
                       '                        <img src="'+data.routeImgList[i].smallPic+'">\n' +
                       '                    </a>'
               } else {
                   var astr = '<a title="" class="little_img" data-bigpic="'+data.routeImgList[i].bigPic+'"style="display:none;">\n' +
                       '                        <img src="'+data.routeImgList[i].smallPic+'">\n' +
                       '                    </a>'
               }
               ddstr += astr;
           }

            ddstr += '<a class="down_img down_img_disable" style="margin-bottom: 0;"></a>'
           $("#dd").html(ddstr);
           goImg();
       });

    });