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();
});
});