黑马旅游综合案例续
12.旅游线路名称查询
1.查询参数的传递
- header.html
<script src="js/getParameter.js"></script>
<script>
$(function (){
//查询用户信息
...
//查询分类数据
...
//给搜索按钮绑定单击事件，获取搜索输入框的内容
$("#search-button").click(function (){
//线路名称
var rname = $("#search_input").val();
var cid = getParameter("cid");
//跳转路线 http://localhost/travel/route_list.html?cid=5，拼接上rname=xxx
location.href="http://localhost/travel/route_list.html?cid="+cid+"&rname=" + rname;
});
});
</script>
<input name="" id="search_input" type="text" placeholder="请输入路线名称" class="search_input" autocomplete="off">
<a href="javascript:;" id="search-button" class="search-button">搜索</a>
2.route_list.html
<script src="js/getParameter.js"></script>
<script>
$(function (){
/* var search = location.search;
//alert(serach);//?cid=5
//切割字符串，拿到第二个值
var cid = search.split("=")[1];
// alert(cid);//5*/
//获取cid的参数值
var cid = getParameter("cid");
//获取rname的参数值
var rname = getParameter("rname");
//判断rname如果不为null或者""
if(rname){
//url解码
rname = window.decodeURIComponent(rname);
}
load(cid,null,rname);
});
function load(cid,currentPage,rname){
//发送ajax请求，请求route/pageQuery，传递cid
$.get("route/pageQuery",{cid:cid,currentPage:currentPage,rname:rname},function (pb){
...
var firstPage = '<li οnclick="javascript:load('+cid+',1,\''+rname+'\')"><a href="javascript:void(0)">首页</a></li>';
var beforePage = '<li οnclick="javascript:load('+cid+','+beforeNum+',\''+rname+'\')" class="threeword"><a href="javascript:void(0)">上一页</a></li>';
li = '<li class="curPage" οnclick="javascript:load('+cid+','+i+',\''+rname+'\')"><a href="javascript:void(0)">'+i+'</a></li>';
li = '<li οnclick="javascript:load('+cid+','+i+',\''+rname+'\')"><a href="javascript:void(0)">'+i+'</a></li>';
var nextPage = '<li οnclick="javascript:load('+cid+','+nextNum+',\''+rname+'\')" class="threeword"><a href="javascript:void(0)">下一页</a></li>';
var lastPage = '<li οnclick="javascript:load('+cid+','+pb.totalPage+',\''+rname+'\')" class="threeword"><a href="javascript:void(0)">末页</a></li>';
...
}
}
3.RouteDao
public interface RouteDao {
//根据cid查询总记录数
public int findTotalCount(int cid,String rname);
//根据cid，start，pageSize查询当前页的数据集合
public List<Route> findByPage(int cid,int start,int pageSize,String rname);
}
4.RouteDaoImpl
public class RouteDaoImpl implements RouteDao {
private JdbcTemplate template = new JdbcTemplate(JDBCUtils.getDataSource());
@Override
public int findTotalCount(int cid,String rname) {
//String sql = "select count(*) from tab_route where cid = ?";
//1.定义sql模板
String sql = " select count(*) from tab_route where 1=1 ";
StringBuilder sb = new StringBuilder(sql);
List params = new ArrayList();//条件们
//2.判断参数是否有值
if(cid != 0){
sb.append(" and cid = ? ");
params.add(cid);//添加?对应的值
}
if(rname != null && rname.length() > 0){
sb.append(" and rname like ? ");
params.add("%"+rname+"%");
}
sql = sb.toString();
return template.queryForObject(sql,Integer.class,params.toArray());
}
@Override
public List<Route> findByPage(int cid, int start, int pageSize,String rname) {
//String sql = "select * from tab_route where cid = ? and rname like ? limit ?,?";
//1.定义sql模板
String sql = " select * from tab_route where 1=1 ";
StringBuilder sb = new StringBuilder(sql);
List params = new ArrayList();//条件们
//2.判断参数是否有值
if(cid != 0){
sb.append(" and cid = ? ");
params.add(cid);//添加?对应的值
}
if(rname != null && rname.length() > 0){
sb.append(" and rname like ? ");
params.add("%"+rname+"%");
}
sb.append(" limit ?,? ");//分页条件
sql = sb.toString();
params.add(start);
params.add(pageSize);
return template.query(sql,new BeanPropertyRowMapper<Route>(Route.class),params.toArray());
}
}
5.RouteService
public interface RouteService {
//根据类别进行分页查询
public PageBean<Route> pageQuery(int cid,int currentPage,int pageSize,String rname);
}
6.RouteServiceImpl
@Override
public PageBean<Route> pageQuery(int cid, int currentPage, int pageSize,String rname) {
...
//设置总记录数
int totalCount = dao.findTotalCount(cid,rname);
//设置当前页码显示的数据集合
int start = (currentPage - 1) * pageSize;//开始的记录数
List<Route> list = dao.findByPage(cid, start, pageSize,rname);
...
}
7.RouteServlet
//接收rname线路名称
String rname = request.getParameter("rname");
rname = new String(rname.getBytes("iso-8859-1"),"utf-8");
int cid = 0;//类别id
//2.处理参数
if(cidStr != null && cidStr.length() > 0 && !"null".equals(cidStr)){
cid = Integer.parseInt(cidStr);
}
//3.调用service查询PageBean对象
PageBean<Route> pb = service.pageQuery(cid, currentPage, pageSize,rname);
13.旅游线路的详情展示
1.分析
/*查询route表 rname price
查询route_img表
查询tab_seller表*/
1.查看详情：route_detail.html?rid=1
当页码加载时发送ajax请求，查询Route对象
2.RouteServlet
findOne(){
//1.接收rid
//2.调用service查询
//3.转换json返回
}
3.RouteService
findOne(int rid){
//1.根据id查询route对象 routeDao
//2.根据rid线路id查询tab_route_img，将集合设置到route对象
//3.根据sid查询卖家信息，将其设置到route对象
}
4.RouteDao
findOne(int rid)
5.RouteImgDao
6.SerrlerDao
2.RouteServlet
//根据id查询一个旅游线路的详细信息
public void findOne(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//1.接收id
String rid = request.getParameter("rid");
//2.调用service查询route对象
Route route = service.findOne(rid);
//3.转为json写回客户端
writeValue(route,response);
}
3.RouteDao
//根据id查询
public Route findOne(int rid);
4.RouteDaoImpl
@Override
public Route findOne(int rid) {
String sql = "select * from tab_route where rid = ?";
return template.queryForObject(sql,new BeanPropertyRowMapper<Route>(Route.class),rid);
}
5.SellerDao
public interface SellerDao {
//根据id查询
public Seller findById(int id);
}
6.SellerDaoImpl
public class SellerDaoImpl implements SellerDao {
private JdbcTemplate template = new JdbcTemplate(JDBCUtils.getDataSource());
@Override
public Seller findById(int id) {
String sql = "select * from tab_seller where sid = ?";
return template.queryForObject(sql,new BeanPropertyRowMapper<Seller>(Seller.class),id);
}
}
7.RouteImgDao
public interface RouteImgDao {
//根据route的id查询图片
public List<RouteImg> findByRid(int rid);
}
8.RouteImgDaoImpl
public class RouteImgDaoImpl implements RouteImgDao {
private JdbcTemplate template = new JdbcTemplate(JDBCUtils.getDataSource());
@Override
public List<RouteImg> findByRid(int rid) {
String sql = "select * from tab_route_img where rid = ?";
return template.query(sql,new BeanPropertyRowMapper<RouteImg>(RouteImg.class),rid);
}
}
9.RouteService
//根据id查询
public Route findOne(String rid);
10.RouteServiceImpl
private RouteImgDao routeImgDao = new RouteImgDaoImpl();
private SellerDao sellerDao = new SellerDaoImpl();
@Override
public Route findOne(String rid) {
//1.根据id去route表中查询route对象
Route route = dao.findOne(Integer.parseInt(rid));
//2.根据route的id查询图片集合信息
List<RouteImg> routeImgList = routeImgDao.findByRid(route.getRid());
//2.2将集合设置到route对象
route.setRouteImgList(routeImgList);
//3.根据route的sid(商家id)查询商家对象
Seller seller = sellerDao.findById(route.getSid());
route.setSeller(seller);
return route;
}
11.route_detail.html加载后
1.获取rid
2.发送ajax请求，获取route对象
3.解析对象的数据
<dd id="dd"></dd>
<script src="js/getParameter.js"></script>
$(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" 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>
*/
//1.获取rid
var rid = getParameter("rid");
//2.发送请求信息 route/findOne
$.get("route/findOne",{rid:rid},function (route){
//3.解析数据填充html
$("#rname").html(route.rname);
$("#routeIntroduce").html(route.routeIntroduce);
$("#price").html("￥"+route.price);
$("#sname").html(route.seller.sname);
$("#consphone").html(route.seller.consphone);
$("#address").html(route.seller.address);
//图片展示
var ddstr = '<a class="up_img up_img_disable"></a>';
//遍历routeImgList
for (var i = 0; i < route.routeImgList.length; i++) {
var astr;
if(i >= 4){
astr = '<a title="" class="little_img cur_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 cur_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>';
$("#dd").html(ddstr);
//图片展示和切换代码调用
goImg();
});
});
14.旅游线路收藏功能
1.分析
判断当前登录用户是否收藏过该线路
1.route_detail.html
1.当页面加载完成后，发送ajax请求，获取用户是否收藏的标记 【传递路线id rid】
2.根据标记，展示不同的按钮样式
2.RouteServlet
1.获取rid线路id
2.获取当前登录的用户对象session
- 如果user对象为null，设置uid=0
3.调用FavoriteService查询，传递rid，uid
4.写回客户端flag标记
3.FavoriteService
isFavorite(rid,uid)
4.FavoriteDao
findByUidAndRid(uid,rid)
2.RouteServlet
private FavoriteService favoriteService = new FavoriteServiceImpl();
//判断当前登录用户是否收藏过该线路
public void isFavorite(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//1.获取线路id
String rid = request.getParameter("rid");
//2.获取当前登录的用户 user
User user = (User) request.getSession().getAttribute("user");
int uid;//用户id
if(user == null){
//用户尚未登录
uid = 0;
}else {
//用户已经登录
uid = user.getUid();
}
//3.调用FavoriteService查询是否收藏
boolean flag = favoriteService.isFavorite(rid, uid);
//4.写回客户端
writeValue(flag,response);
}
3.FavoriteDao
public interface FavoriteDao {
//根据rid和uid查询收藏信息
public Favorite findByRidAndUid(int rid,int uid);
//根据rid查询收藏次数
public int findCountByRid(int rid);
}
4.FavoriteDaoImpl
public class FavoriteDaoImpl implements FavoriteDao {
private JdbcTemplate template = new JdbcTemplate(JDBCUtils.getDataSource());
@Override
public Favorite findByRidAndUid(int rid, int uid) {
Favorite favorite = null;
try {
String sql = "select * from tab_favorite where rid = ? and uid = ?";
favorite = template.queryForObject(sql, new BeanPropertyRowMapper<Favorite>(Favorite.class), rid, uid);
} catch (DataAccessException e) {
}
return favorite;
}
@Override
public int findCountByRid(int rid) {
String sql = "select count(*) from tab_favorite where rid = ?";
return template.queryForObject(sql,Integer.class,rid);
}
}
5.FavoriteService
public interface FavoriteService {
//判断是否收藏
public boolean isFavorite(String rid,int uid);
}
6.FavoriteServiceImpl
public class FavoriteServiceImpl implements FavoriteService {
private FavoriteDao favoriteDao = new FavoriteDaoImpl();
@Override
public boolean isFavorite(String rid, int uid) {
Favorite favorite = favoriteDao.findByRidAndUid(Integer.parseInt(rid), uid);
return favorite != null;//如果对象有值，则为true，反之，则为false
}
}
7.RouteServiceImpl
private FavoriteDao favoriteDao = new FavoriteDaoImpl();
findOne方法:
//4.查询收藏次数
int count = favoriteDao.findCountByRid(route.getRid());
route.setCount(count);
8.route_detail.html
<span id="favoriteCount">已收藏100次</span>
$.get("route/findOne",{rid:rid},function (route){
...
//设置收藏次数
$("#favoriteCount").html("已收藏"+route.count+"次");
...
}
$(function (){
//发送请求，判断用户是否收藏过该线路
var rid = getParameter("rid");
$.get("route/isFavorite",{rid:rid},function (flag){
if(flag){
//用户已经收藏过
//<a class="btn already" disabled="disabled">
//设置收藏按钮的样式
$("#favorite").addClass("already");
$("#favorite").attr("disabled","disabled");
}else {
//用户没有收藏
}
});
});
9.点击按钮收藏线路
1.分析
点击收藏
1.route_detail.html
发送ajax请求，判断用户是否登录
- 登录，点击按钮
- 没有登录，给出提示信息
2.RouteServlet
1.获取线路id rid
2.获取用户对象 uid
3.调用service添加
3.FavoriteService
add(String rid,int uid)
4.FavoriteDao
add(int rid,int uid)
2.RouteServlet
//添加收藏
public void addFavorite(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//1.获取线路rid
String rid = request.getParameter("rid");
//2.获取当前登录的用户 user
User user = (User) request.getSession().getAttribute("user");
int uid;//用户id
if (user == null) {
//用户尚未登录
return ;
} else {
//用户已经登录
uid = user.getUid();
}
//3.调用service添加
favoriteService.add(rid,uid);
}
3.FavoriteDao
//添加收藏
void add(int rid, int uid);
4.FavoriteDaoImpl
@Override
public void add(int rid, int uid) {
String sql = "insert into tab_favorite values(?,?,?)";
template.update(sql,rid,new Date(),uid);
}
5.FavoriteService
//添加收藏
void add(String rid, int uid);
6.FavoriteServiceImpl
@Override
public void add(String rid, int uid) {
favoriteDao.add(Integer.parseInt(rid),uid);
}
7.route_detail.html
<a class="btn" id="favorite" onclick="addFavorite();">
//设置收藏按钮的样式
$("#favorite").addClass("already");
$("#favorite").attr("disabled","disabled");
//删除按钮的点击事件
$("#favorite").removeAttr("onclick");
//点击收藏按钮触发的方法
function addFavorite(){
var rid = getParameter("rid");
//1.判断用户是否登录
$.get("user/findOne",{},function (user){
if(user){
//用户登录了
//添加功能
$.get("route/addFavorite",{rid:rid},function (){
//代码刷新页面
location.reload();
});
}else {
//用户没有登录
alert("您尚未登录，请登录");
location.href="http://localhost/travel/login.html";
}
});
184
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
