10.旅游线路名称查询
10.1查询参数的传递
在header.html中
<!-- 头部 start --> <script src="js/getParameter.js"></script> <script> $(function () { //查询用户信息 $.get("user/findOne", {}, function (data) { //{uid:1,name:'李四'} var msg = "欢迎回来，" + data.name; $("#span_username").html(msg); }); //查询分类数据 $.get("category/findAll", {}, function (data) { //[{cid:1,cname:国内游},{},{}] var lis = '<li class="nav-active"><a href="index.html">首页</a></li>'; //遍历数组，拼接字符串 for (var i = 0; i < data.length; i++) { var li = ' <li><a href="favoriterank.html?cid=' + data[i].cid + '">' + data[i].cname + '</a></li>' lis += li; } //拼接收藏榜的li lis += ' <li><a href="favoriterank.html">收藏排行榜</a></li>'; //将lis中的内容设置到ul的html中 $("#category").html(lis); }); //给搜索按钮绑定单击事件，获取搜索输入框的内容 $("#search-button").click(function () { //线路名称 //线路名称 var rname = $("#search_input").val(); // 跳转路径 http://localhost/travel/route_list.html?cid=5，拼接上rname=xxx var cid = getParameter("cid"); location.href="http://localhost/travel/route_list.html?cid="+cid+"&rname="+rname; }); }); </script> <!-- 头部 start --> <header id="header"> <div class="top_banner"> <img src="images/top_banner.jpg" alt=""> </div> <div class="shortcut"> <!-- 未登录状态 --> <div class="login_out"> <a href="login.html">登录</a> <a href="register.html">注册</a> </div> <!-- 登录状态 --> <div class="login"> <span id="span_username"> </span> <a href="myfavorite.html" class="collection">我的收藏</a> <a href="javascript:location.href='exitServlet';">退出</a> </div> </div> <div class="header_wrap"> <div class="topbar"> <div class="logo"> <a href="/"><img src="images/logo.jpg" alt=""></a> </div> <div class="search"> <input name="" id = "search_input" type="text" placeholder="请输入路线名称" class="search_input" autocomplete="off"> <a href="javascript:;" id = "search-button" class="search-button">搜索</a> </div> <div class="hottel"> <div class="hot_pic"> <img src="images/hot_tel.jpg" alt=""> </div> <div class="hot_tel"> <p class="hot_time">客服热线(9:00-6:00)</p> <p class="hot_num">400-618-9090</p> </div> </div> </div> </div> </header> <!-- 头部 end --> <!-- 首页导航 --> <div class="navitem"> <ul id="category" class="nav"> <!-- <li class="nav-active"><a href="index.html">首页</a></li> <li><a href="route_list.html">门票</a></li> <li><a href="route_list.html">酒店</a></li> <li><a href="route_list.html">香港车票</a></li> <li><a href="route_list.html">出境游</a></li> <li><a href="route_list.html">国内游</a></li> <li><a href="route_list.html">港澳游</a></li> <li><a href="route_list.html">抱团定制</a></li> <li><a href="route_list.html">全球自由行</a></li> <li><a href="favoriterank.html">收藏排行榜</a></li>--> </ul> </div>
在route_list.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>黑马旅游-搜索</title> <link rel="stylesheet" type="text/css" href="css/common.css"> <link rel="stylesheet" href="css/search.css"> <script src="js/jquery-3.3.1.js"></script> <script src="js/getParameter.js"></script> <script> $(function () { /* var search = location.search; //alert(search);//?id=5 // 切割字符串，拿到第二个值 var cid = search.split("=")[1];*/ //获取cid的参数值 var cid = getParameter("cid"); //获取rname的参数值 var rname = getParameter("rname"); //判断rname如果不为null或者"" if(rname){ //url解码 rname = window.decodeURIComponent(rname); } //当页码加载完成后，调用load方法，发送ajax请求加载数据 load(cid); }); function load(cid, currentPage) { //发送ajax请求，请求route/pageQuery,传递cid $.get("route/pageQuery", {cid: cid, currentPage: currentPage}, function (pb) { //解析pagebean数据，展示到页面上 //1.分页工具条数据展示 //1.1 展示总页码和总记录数 $("#totalPage").html(pb.totalPage); $("#totalCount").html(pb.totalCount); var lis = ""; var firstPage = ' <li onclick="javascript:load(' + cid + ')"><a href="javascript:void(0)">首页</a></li>'; //计算上一页的页码 var beforeNum = pb.currentPage - 1; if (beforeNum <= 0) { beforeNum = 1; } var beforePage = '<li onclick="javascipt:load(' + cid + ',' + beforeNum + ')" class="threeword"><a href="javascript:void(0)">上一页</a></li>'; lis += firstPage; lis += beforePage; /*for (var i = 1; i <= pb.totalPage; i++) { //创建页码的li var li; //判断当前页码是否等于i if (pb.currentPage == i) { li = ' <li class="curPage" onclick="javascript:load(' + cid + ',' + i + ')"><a href="javascript:void(0)">' + i + '</a></li>'; } else { var li = ' <li onclick="javascript:load(' + cid + ',' + i + ')"><a href="javascript:void(0)">' + i + '</a></li>'; } //拼接字符串 lis += li; }*/ //1.2 展示分页页码 /* 1.一共展示10个页码，能够达到前5后4的效果 2.如果前边不够5个，后边补齐10个 3.如果后边不足4个，前边补齐10个 */ // 定义开始位置begin,结束位置 end var begin; // 开始位置 var end; // 结束位置 //1.要显示10个页码 if (pb.totalPage < 10) { //总页码不够10页 begin = 1; end = pb.totalPage; } else { //总页码超过10页 begin = pb.currentPage - 5; end = pb.currentPage + 4; //2.如果前边不够5个，后边补齐10个 if (begin < 1) { begin = 1; end = begin + 9; } //3.如果后边不足4个，前边补齐10个 if (end > pb.totalPage) { end = pb.totalPage; begin = end - 9; } } for (var i = begin; i <= end; i++) { var li; //判断当前页码是否等于i if (pb.currentPage == i) { li = '<li class="curPage" onclick="javascipt:load(' + cid + ',' + i + ')"><a href="javascript:void(0)">' + i + '</a></li>'; } else { //创建页码的li li = '<li onclick="javascipt:load(' + cid + ',' + i + ')"><a href="javascript:void(0)">' + i + '</a></li>'; } //拼接字符串 lis += li; } var lastNum = pb.totalPage; var lastPage = '<li onclick="javascript:load(' + cid + ',' + lastNum + ')"><a href="javascript:void(0)">末页</a></li>'; var nextNum = pb.currentPage + 1; if (nextNum > lastNum) { nextNum = lastNum; } var nextPage = '<li onclick="javascipt:load(' + cid + ',' + nextNum + ')" class="threeword"><a href="javascript:void(0)">下一页</a></li>'; lis += nextPage; lis += lastPage; //奖lis内容设置到ul中 $("#pageNum").html(lis); //2.列表数据展示 //2.列表数据展示 var route_lis = ""; for (var i = 0; i < pb.list.length; i++) { //获取{rid:1,rname:"xxx"} var route = pb.list[i]; var 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>¥</span>\n' + ' <span>' + route.price + '</span>\n' + ' <span>起</span>\n' + ' </p>\n' + ' <p><a href="route_detail.html">查看详情</a></p>\n' + ' </div>\n' + ' </li>'; route_lis += li; } $("#route").html(route_lis); //定位到页面顶部 window.scrollTo(0,0); }); } </script> </head> <body> <!--引入头部--> <div id="header"></div> <div class="page_one"> <div class="contant"> <div class="crumbs"> <img src="images/search.png" alt=""> <p>黑马旅行><span>搜索结果</span></p> </div> <div class="xinxi clearfix"> <div class="left"> <div class="header"> <span>商品信息</span> <span class="jg">价格</span> </div> <ul id="route"> <!-- <li > <div class="img"><img src="images/04-search_03.jpg" alt=""></div> <div class="text1"> <p>【减100元 含除夕/春节出发】广州增城三英温泉度假酒店/自由行套票</p> <br/> <p>1-2月出发，网付立享￥1099/2人起！爆款位置有限，抢完即止！</p> </div> <div class="price"> <p class="price_num"> <span>¥</span> <span>299</span> <span>起</span> </p> <p><a href="route_detail.html">查看详情</a></p> </div> </li>--> </ul> <div class="page_num_inf"> <i></i> 共 <span id="totalPage"> </span>页<span id="totalCount"> </span>条 </div> <div class="pageNum"> <ul id="pageNum"> <!-- <li><a href="">首页</a></li> <li class="threeword"><a href="#">上一页</a></li> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li class="threeword"><a href="javascript:;">下一页</a></li> <li class="threeword"><a href="javascript:;">末页</a></li>--> </ul> </div> </div> <div class="right"> <div class="top"> <div class="hot">HOT</div> <span>热门推荐</span> </div> <ul> <li> <div class="left"><img src="images/04-search_09.jpg" alt=""></div> <div class="right"> <p>清远新银盏温泉度假村酒店/自由行套...</p> <p>网付价<span>¥<span>899</span>起</span> </p> </div> </li> <li> <div class="left"><img src="images/04-search_09.jpg" alt=""></div> <div class="right"> <p>清远新银盏温泉度假村酒店/自由行套...</p> <p>网付价<span>¥<span>899</span>起</span> </p> </div> </li> <li> <div class="left"><img src="images/04-search_09.jpg" alt=""></div> <div class="right"> <p>清远新银盏温泉度假村酒店/自由行套...</p> <p>网付价<span>¥<span>899</span>起</span> </p> </div> </li> <li> <div class="left"><img src="images/04-search_09.jpg" alt=""></div> <div class="right"> <p>清远新银盏温泉度假村酒店/自由行套...</p> <p>网付价<span>¥<span>899</span>起</span> </p> </div> </li> <li> <div class="left"><img src="images/04-search_09.jpg" alt=""></div> <div class="right"> <p>清远新银盏温泉度假村酒店/自由行套...</p> <p>网付价<span>¥<span>899</span>起</span> </p> </div> </li> </ul> </div> </div> </div> </div> <!--引入头部--> <div id="footer"></div> <!--导入布局js，共享header和footer--> <script type="text/javascript" src="js/include.js"></script> </body> </html>
10.2修改后台代码
Servlet
package cn.itcast.travel.web.servlet; import cn.itcast.travel.domain.PageBean; import cn.itcast.travel.domain.Route; import cn.itcast.travel.service.RouteService; import cn.itcast.travel.service.impl.RouteServiceImpl; import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import java.io.IOException; @WebServlet("/route/*") public class RouteServlet extends BaseServlet { private RouteService routeService = new RouteServiceImpl(); /* 分页查询 */ public void pageQuery(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { //1.接受参数 String currentPageStr = request.getParameter("currentPage"); String pageSizeStr = request.getParameter("pageSize"); String cidStr = request.getParameter("cid"); //接受rname路线名称 String rname = request.getParameter("rname"); rname = new String(rname.getBytes("iso-8859-1"),"utf-8"); //2.处理参数 int cid = 0;//类别id if (cidStr != null && cidStr.length() > 0) { cid = Integer.parseInt(cidStr); } int currentPage = 0;//当前页码，默认为第一页 if (currentPageStr != null && currentPageStr.length() > 0) { currentPage = Integer.parseInt(currentPageStr); } else { currentPage = 1; } int pageSize = 0;//每页显示条数，默认显示5条 if (pageSizeStr != null && pageSizeStr.length() > 0) { pageSize = Integer.parseInt(pageSizeStr); } else { pageSize = 5; } //3. 调用service查询PageBean对象 PageBean<Route> pb = routeService.pageQuery(cid, currentPage, pageSize,rname); //4. 将pageBean对象序列化为json，返回 writeValue(pb, response); } }
Service
package cn.itcast.travel.service; import cn.itcast.travel.domain.PageBean; import cn.itcast.travel.domain.Route; public interface RouteService { /* 根据类别进行分页查询 */ PageBean<Route> pageQuery(int cid, int currentPage, int pageSize,String rname); }
package cn.itcast.travel.service.impl; import cn.itcast.travel.dao.RouteDao; import cn.itcast.travel.dao.impl.RouteDaoImpl; import cn.itcast.travel.domain.PageBean; import cn.itcast.travel.domain.Route; import cn.itcast.travel.service.RouteService; import java.util.List; public class RouteServiceImpl implements RouteService { private RouteDao routeDao = new RouteDaoImpl(); @Override public PageBean<Route> pageQuery(int cid, int currentPage, int pageSize,String rname) { //封装pageBean PageBean<Route> pb = new PageBean<>(); //设置当前页码 pb.setCurrentPage(currentPage); //设置每页显示条数 pb.setPageSize(pageSize); //设置总记录数 int totalCount = routeDao.findTotalCount(cid,rname); pb.setTotalCount(totalCount); //设置当前页显示的数据集合 int start = (currentPage - 1) * pageSize;//开始的记录数 List<Route> list = routeDao.findByPage(cid,start,pageSize,rname); pb.setList(list); //设置总页数 = 总记录数/每页显示条数 int totalPage = totalCount % pageSize == 0 ? totalCount / pageSize :(totalCount / pageSize) + 1 ; pb.setTotalPage(totalPage); return pb; } }
Dao
package cn.itcast.travel.dao; import cn.itcast.travel.domain.Route; import java.util.List; public interface RouteDao { /* 根据cid查询总记录数 */ int findTotalCount(int cid, String rname); /* 根据cid，start，pageSize查询当前页的数据集合 */ List<Route> findByPage(int cid, int start, int pageSize, String rname); }
package cn.itcast.travel.dao.impl; import cn.itcast.travel.dao.RouteDao; import cn.itcast.travel.domain.Route; import cn.itcast.travel.util.JDBCUtils; import org.springframework.jdbc.core.BeanPropertyRowMapper; import org.springframework.jdbc.core.JdbcTemplate; import java.util.ArrayList; import java.util.List; 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 ? , ?"; String sql = " select * from tab_route where 1 = 1 "; //1.定义sql模板 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()); } }
10.3修改前台代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>黑马旅游-搜索</title> <link rel="stylesheet" type="text/css" href="css/common.css"> <link rel="stylesheet" href="css/search.css"> <script src="js/jquery-3.3.1.js"></script> <script src="js/getParameter.js"></script> <script> $(function () { /* var search = location.search; //alert(search);//?id=5 // 切割字符串，拿到第二个值 var cid = search.split("=")[1];*/ //获取cid的参数值 var cid = getParameter("cid"); //获取rname的参数值 var rname = getParameter("rname"); //判断rname如果不为null或者"" if(rname){ //url解码 rname = window.decodeURIComponent(rname); } //当页码加载完成后，调用load方法，发送ajax请求加载数据 load(cid,null,rname); }); function load(cid, currentPage,rname) { //发送ajax请求，请求route/pageQuery,传递cid $.get("route/pageQuery", {cid: cid, currentPage: currentPage,rname:rname}, function (pb) { //解析pagebean数据，展示到页面上 //1.分页工具条数据展示 //1.1 展示总页码和总记录数 $("#totalPage").html(pb.totalPage); $("#totalCount").html(pb.totalCount); var lis = ""; var firstPage = ' <li onclick="javascript:load('+cid+',1,\''+rname+'\')"><a href="javascript:void(0)">首页</a></li>'; //计算上一页的页码 var beforeNum = pb.currentPage - 1; if (beforeNum <= 0) { beforeNum = 1; } var beforePage = '<li onclick="javascipt:load('+cid+','+beforeNum+',\''+rname+'\')" class="threeword"><a href="javascript:void(0)">上一页</a></li>'; lis += firstPage; lis += beforePage; /*for (var i = 1; i <= pb.totalPage; i++) { //创建页码的li var li; //判断当前页码是否等于i if (pb.currentPage == i) { li = ' <li class="curPage" onclick="javascript:load(' + cid + ',' + i + ')"><a href="javascript:void(0)">' + i + '</a></li>'; } else { var li = ' <li onclick="javascript:load(' + cid + ',' + i + ')"><a href="javascript:void(0)">' + i + '</a></li>'; } //拼接字符串 lis += li; }*/ //1.2 展示分页页码 /* 1.一共展示10个页码，能够达到前5后4的效果 2.如果前边不够5个，后边补齐10个 3.如果后边不足4个，前边补齐10个 */ // 定义开始位置begin,结束位置 end var begin; // 开始位置 var end; // 结束位置 //1.要显示10个页码 if (pb.totalPage < 10) { //总页码不够10页 begin = 1; end = pb.totalPage; } else { //总页码超过10页 begin = pb.currentPage - 5; end = pb.currentPage + 4; //2.如果前边不够5个，后边补齐10个 if (begin < 1) { begin = 1; end = begin + 9; } //3.如果后边不足4个，前边补齐10个 if (end > pb.totalPage) { end = pb.totalPage; begin = end - 9; } } for (var i = begin; i <= end; i++) { var li; //判断当前页码是否等于i if (pb.currentPage == i) { li = '<li class="curPage" onclick="javascipt:load('+cid+','+i+',\''+rname+'\')"><a href="javascript:void(0)">' + i + '</a></li>'; } else { //创建页码的li li = '<li onclick="javascipt:load('+cid+','+i+',\''+rname+'\')"><a href="javascript:void(0)">' + i + '</a></li>'; } //拼接字符串 lis += li; } var lastNum = pb.totalPage; var lastPage = '<li onclick="javascript:load('+cid+','+lastNum+',\''+rname+'\')"><a href="javascript:void(0)">末页</a></li>'; var nextNum = pb.currentPage + 1; if (nextNum > lastNum) { nextNum = lastNum; } var nextPage = '<li onclick="javascipt:load('+cid+','+nextNum+',\''+rname+'\')" class="threeword"><a href="javascript:void(0)">下一页</a></li>'; lis += nextPage; lis += lastPage; //奖lis内容设置到ul中 $("#pageNum").html(lis); //2.列表数据展示 //2.列表数据展示 var route_lis = ""; for (var i = 0; i < pb.list.length; i++) { //获取{rid:1,rname:"xxx"} var route = pb.list[i]; var 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>¥</span>\n' + ' <span>' + route.price + '</span>\n' + ' <span>起</span>\n' + ' </p>\n' + ' <p><a href="route_detail.html">查看详情</a></p>\n' + ' </div>\n' + ' </li>'; route_lis += li; } $("#route").html(route_lis); //定位到页面顶部 window.scrollTo(0,0); }); } </script> </head> <body> <!--引入头部--> <div id="header"></div> <div class="page_one"> <div class="contant"> <div class="crumbs"> <img src="images/search.png" alt=""> <p>黑马旅行><span>搜索结果</span></p> </div> <div class="xinxi clearfix"> <div class="left"> <div class="header"> <span>商品信息</span> <span class="jg">价格</span> </div> <ul id="route"> <!-- <li > <div class="img"><img src="images/04-search_03.jpg" alt=""></div> <div class="text1"> <p>【减100元 含除夕/春节出发】广州增城三英温泉度假酒店/自由行套票</p> <br/> <p>1-2月出发，网付立享￥1099/2人起！爆款位置有限，抢完即止！</p> </div> <div class="price"> <p class="price_num"> <span>¥</span> <span>299</span> <span>起</span> </p> <p><a href="route_detail.html">查看详情</a></p> </div> </li>--> </ul> <div class="page_num_inf"> <i></i> 共 <span id="totalPage"> </span>页<span id="totalCount"> </span>条 </div> <div class="pageNum"> <ul id="pageNum"> <!-- <li><a href="">首页</a></li> <li class="threeword"><a href="#">上一页</a></li> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li class="threeword"><a href="javascript:;">下一页</a></li> <li class="threeword"><a href="javascript:;">末页</a></li>--> </ul> </div> </div> <div class="right"> <div class="top"> <div class="hot">HOT</div> <span>热门推荐</span> </div> <ul> <li> <div class="left"><img src="images/04-search_09.jpg" alt=""></div> <div class="right"> <p>清远新银盏温泉度假村酒店/自由行套...</p> <p>网付价<span>¥<span>899</span>起</span> </p> </div> </li> <li> <div class="left"><img src="images/04-search_09.jpg" alt=""></div> <div class="right"> <p>清远新银盏温泉度假村酒店/自由行套...</p> <p>网付价<span>¥<span>899</span>起</span> </p> </div> </li> <li> <div class="left"><img src="images/04-search_09.jpg" alt=""></div> <div class="right"> <p>清远新银盏温泉度假村酒店/自由行套...</p> <p>网付价<span>¥<span>899</span>起</span> </p> </div> </li> <li> <div class="left"><img src="images/04-search_09.jpg" alt=""></div> <div class="right"> <p>清远新银盏温泉度假村酒店/自由行套...</p> <p>网付价<span>¥<span>899</span>起</span> </p> </div> </li> <li> <div class="left"><img src="images/04-search_09.jpg" alt=""></div> <div class="right"> <p>清远新银盏温泉度假村酒店/自由行套...</p> <p>网付价<span>¥<span>899</span>起</span> </p> </div> </li> </ul> </div> </div> </div> </div> <!--引入头部--> <div id="footer"></div> <!--导入布局js，共享header和footer--> <script type="text/javascript" src="js/include.js"></script> </body> </html>
注：RouteServlet中的有个小判断也要改
package cn.itcast.travel.web.servlet; import cn.itcast.travel.domain.PageBean; import cn.itcast.travel.domain.Route; import cn.itcast.travel.service.RouteService; import cn.itcast.travel.service.impl.RouteServiceImpl; import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import java.io.IOException; @WebServlet("/route/*") public class RouteServlet extends BaseServlet { private RouteService routeService = new RouteServiceImpl(); /* 分页查询 */ public void pageQuery(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { //1.接受参数 String currentPageStr = request.getParameter("currentPage"); String pageSizeStr = request.getParameter("pageSize"); String cidStr = request.getParameter("cid"); //接受rname路线名称 String rname = request.getParameter("rname"); rname = new String(rname.getBytes("iso-8859-1"),"utf-8"); //2.处理参数 int cid = 0;//类别id if(cidStr != null && cidStr.length() > 0 && !"null".equals(cidStr)){ cid = Integer.parseInt(cidStr); } int currentPage = 0;//当前页码，默认为第一页 if (currentPageStr != null && currentPageStr.length() > 0) { currentPage = Integer.parseInt(currentPageStr); } else { currentPage = 1; } int pageSize = 0;//每页显示条数，默认显示5条 if (pageSizeStr != null && pageSizeStr.length() > 0) { pageSize = Integer.parseInt(pageSizeStr); } else { pageSize = 5; } //3. 调用service查询PageBean对象 PageBean<Route> pb = routeService.pageQuery(cid, currentPage, pageSize,rname); //4. 将pageBean对象序列化为json，返回 writeValue(pb, response); } }
11.旅游线路的详情展示
11.1分析
11.2后台代码
Servlet
package cn.itcast.travel.web.servlet; import cn.itcast.travel.domain.PageBean; import cn.itcast.travel.domain.Route; import cn.itcast.travel.service.RouteService; import cn.itcast.travel.service.impl.RouteServiceImpl; import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import java.io.IOException; @WebServlet("/route/*") public class RouteServlet extends BaseServlet { private RouteService routeService = new RouteServiceImpl(); /* 分页查询 */ public void pageQuery(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { //1.接受参数 String currentPageStr = request.getParameter("currentPage"); String pageSizeStr = request.getParameter("pageSize"); String cidStr = request.getParameter("cid"); //接受rname路线名称 String rname = request.getParameter("rname"); rname = new String(rname.getBytes("iso-8859-1"),"utf-8"); //2.处理参数 int cid = 0;//类别id if(cidStr != null && cidStr.length() > 0 && !"null".equals(cidStr)){ cid = Integer.parseInt(cidStr); } int currentPage = 0;//当前页码，默认为第一页 if (currentPageStr != null && currentPageStr.length() > 0) { currentPage = Integer.parseInt(currentPageStr); } else { currentPage = 1; } int pageSize = 0;//每页显示条数，默认显示5条 if (pageSizeStr != null && pageSizeStr.length() > 0) { pageSize = Integer.parseInt(pageSizeStr); } else { pageSize = 5; } //3. 调用service查询PageBean对象 PageBean<Route> pb = routeService.pageQuery(cid, currentPage, pageSize,rname); //4. 将pageBean对象序列化为json，返回 writeValue(pb, response); } /* 根据id查询一个旅游线路的详细信息 */ public void findOne(HttpServletRequest request,HttpServletResponse response) throws IOException { //1.接收id String rid = request.getParameter("rid"); //2.调用service查询route对象 Route route = routeService.findOne(rid); //转为json写入客户端 writeValue(route,response); } }
Service
package cn.itcast.travel.service; import cn.itcast.travel.domain.PageBean; import cn.itcast.travel.domain.Route; public interface RouteService { /* 根据类别进行分页查询 */ PageBean<Route> pageQuery(int cid, int currentPage, int pageSize,String rname); Route findOne(String rid); }
package cn.itcast.travel.service.impl; import cn.itcast.travel.dao.RouteDao; import cn.itcast.travel.dao.RouteImgDao; import cn.itcast.travel.dao.SellerDao; import cn.itcast.travel.dao.impl.RouteDaoImpl; import cn.itcast.travel.dao.impl.RouteImgDaoImpl; import cn.itcast.travel.dao.impl.SellerDaoImpl; import cn.itcast.travel.domain.PageBean; import cn.itcast.travel.domain.Route; import cn.itcast.travel.domain.RouteImg; import cn.itcast.travel.domain.Seller; import cn.itcast.travel.service.RouteService; import java.util.List; public class RouteServiceImpl implements RouteService { private RouteDao routeDao = new RouteDaoImpl(); private RouteImgDao routeImgDao = new RouteImgDaoImpl(); private SellerDao sellerDao = new SellerDaoImpl(); @Override public PageBean<Route> pageQuery(int cid, int currentPage, int pageSize,String rname) { //封装pageBean PageBean<Route> pb = new PageBean<>(); //设置当前页码 pb.setCurrentPage(currentPage); //设置每页显示条数 pb.setPageSize(pageSize); //设置总记录数 int totalCount = routeDao.findTotalCount(cid,rname); pb.setTotalCount(totalCount); //设置当前页显示的数据集合 int start = (currentPage - 1) * pageSize;//开始的记录数 List<Route> list = routeDao.findByPage(cid,start,pageSize,rname); pb.setList(list); //设置总页数 = 总记录数/每页显示条数 int totalPage = totalCount % pageSize == 0 ? totalCount / pageSize :(totalCount / pageSize) + 1 ; pb.setTotalPage(totalPage); return pb; } /* 根据id查询 */ @Override public Route findOne(String rid) { //1.根据id去route表中查询route对象 Route route = routeDao.findOne(Integer.parseInt(rid)); //2.根据route的id查询图片的集合信息 List<RouteImg> routeImgList = routeImgDao.findByRid(route.getRid()); //2.1将集合设置到route对象 route.setRouteImgList(routeImgList); //3.根据route的sid（商家id）查询商家对象 Seller seller = sellerDao.findById(route.getSid()); route.setSeller(seller); return route; } }
SellerDao
package cn.itcast.travel.dao; import cn.itcast.travel.domain.Seller; public interface SellerDao { /** * 根据id查询 * @param id * @return */ Seller findById(int id); }
package cn.itcast.travel.dao.impl; import cn.itcast.travel.dao.SellerDao; import cn.itcast.travel.domain.Seller; import cn.itcast.travel.util.JDBCUtils; import org.springframework.jdbc.core.BeanPropertyRowMapper; import org.springframework.jdbc.core.JdbcTemplate; 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); } }
routeDao
package cn.itcast.travel.dao; import cn.itcast.travel.domain.Route; import java.util.List; public interface RouteDao { /* 根据cid查询总记录数 */ int findTotalCount(int cid, String rname); /* 根据cid，start，pageSize查询当前页的数据集合 */ List<Route> findByPage(int cid, int start, int pageSize, String rname); /* 根据id查询 */ Route findOne(int rid); }
package cn.itcast.travel.dao.impl; import cn.itcast.travel.dao.RouteDao; import cn.itcast.travel.domain.Route; import cn.itcast.travel.util.JDBCUtils; import org.springframework.jdbc.core.BeanPropertyRowMapper; import org.springframework.jdbc.core.JdbcTemplate; import java.util.ArrayList; import java.util.List; 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模板 //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 ? , ?"; String sql = " select * from tab_route where 1 = 1 "; //1.定义sql模板 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()); } @Override public Route findOne(int rid) { String sql = "select * from tab_route where rid = ?"; return template.queryForObject(sql,new BeanPropertyRowMapper<Route>(Route.class),rid); } }
RouteImgDao
package cn.itcast.travel.dao; import cn.itcast.travel.domain.RouteImg; import java.util.List; public interface RouteImgDao { /* 根据线路的id去查询图片 */ List<RouteImg> findByRid(int rid); }
package cn.itcast.travel.dao.impl; import cn.itcast.travel.dao.RouteImgDao; import cn.itcast.travel.domain.RouteImg; import cn.itcast.travel.util.JDBCUtils; import org.springframework.jdbc.core.BeanPropertyRowMapper; import org.springframework.jdbc.core.JdbcTemplate; import java.util.List; 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); } }
11.3前台代码
Route_detail.html中加载后
- 获取rid
- 发送ajax请求，获取route对象
- 解析对象的数据
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>路线详情</title> <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"> <link rel="stylesheet" type="text/css" href="css/common.css"> <link rel="stylesheet" type="text/css" href="css/route-detail.css"> </head> <body> <!--引入头部--> <div id="header"></div> <!-- 详情 start --> <div class="wrap"> <div class="bread_box"> <a href="/">首页</a> <span> ></span> <a href="#">国内游</a><span> ></span> <a href="#">全国-曼谷6-7天自由行 泰国出境旅游 特价往返机票自由行二次确认</a> </div> <div class="prosum_box"> <dl class="prosum_left"> <dt> <img alt="" class="big_img" src="http://www.jinmalvyou.com/Public/uploads/goods_img/img_size4/201703/m49788843d72171643297ccc033d9288ee.jpg"> </dt> <dd id="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 cur_img" data-bigpic="http://www.jinmalvyou.com/Public/uploads/goods_img/img_size4/201703/m49788843d72171643297ccc033d9288ee.jpg"> <img src="http://www.jinmalvyou.com/Public/uploads/goods_img/img_size2/201703/m29788843d72171643297ccc033d9288ee.jpg"> </a> <a title="" class="little_img" data-bigpic="http://www.jinmalvyou.com/Public/uploads/goods_img/img_size4/201703/m4531a8dbceefa2c44e6d0e35627cd2689.jpg"> <img src="http://www.jinmalvyou.com/Public/uploads/goods_img/img_size2/201703/m2531a8dbceefa2c44e6d0e35627cd2689.jpg"> </a> <a title="" class="little_img" data-bigpic="http://www.jinmalvyou.com/Public/uploads/goods_img/img_size4/201703/m46d8cb900e9f6c0a762aca19eae40c00c.jpg"> <img src="http://www.jinmalvyou.com/Public/uploads/goods_img/img_size2/201703/m26d8cb900e9f6c0a762aca19eae40c00c.jpg"> </a> <a title="" class="little_img" data-bigpic="http://www.jinmalvyou.com/Public/uploads/goods_img/img_size4/201703/m45ea00f6eba562a767b5095bbf8cffe07.jpg" style="display:none;"> <img src="http://www.jinmalvyou.com/Public/uploads/goods_img/img_size2/201703/m25ea00f6eba562a767b5095bbf8cffe07.jpg"> </a> <a title="" class="little_img" data-bigpic="http://www.jinmalvyou.com/Public/uploads/goods_img/img_size4/201703/m4265ec488cd1bc7ce749bc8c9b34b87bc.jpg" style="display:none;"> <img src="http://www.jinmalvyou.com/Public/uploads/goods_img/img_size2/201703/m2265ec488cd1bc7ce749bc8c9b34b87bc.jpg"> </a> <a title="" class="little_img" data-bigpic="http://www.jinmalvyou.com/Public/uploads/goods_img/img_size4/201703/m4e7e964909d7dd1a9f6e5494d4dc0c847.jpg" style="display:none;"> <img src="http://www.jinmalvyou.com/Public/uploads/goods_img/img_size2/201703/m2e7e964909d7dd1a9f6e5494d4dc0c847.jpg"> </a> <a title="" class="little_img" data-bigpic="http://www.jinmalvyou.com/Public/uploads/goods_img/img_size4/201703/m467db00e1b76718fab0fe8b96e10f4d35.jpg" style="display:none;"> <img src="http://www.jinmalvyou.com/Public/uploads/goods_img/img_size2/201703/m267db00e1b76718fab0fe8b96e10f4d35.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> </dl> <div class="prosum_right"> <p class="pros_title" id="rname">【尾单特卖】全国-曼谷6-7天自由行 泰国出境旅游 特价往返机票自由行二次确认</p> <p class="hot" id="routeIntroduce">1-2月出发，网付立享￥1099/2人起！爆款位置有限，抢完即止！</p> <div class="pros_other"> <p>经营商家 ：<span id="sname">黑马国旅</span></p> <p>咨询电话 : <span id="consphone">400-618-9090</span></p> <p>地址 ： <span id="address">传智播客黑马程序员</span></p> </div> <div class="pros_price"> <p class="price"><strong id="price">¥2699.00</strong><span>起</span></p> <p class="collect"> <a class="btn"><i class="glyphicon glyphicon-heart-empty"></i>点击收藏</a> <a class="btn already" disabled="disabled"><i class="glyphicon glyphicon-heart-empty"></i>点击收藏</a> <span>已收藏100次</span> </p> </div> </div> </div> <div class="you_need_konw"> <span>旅游须知</span> <div class="notice"> <p>1、旅行社已投保旅行社责任险。建议游客购买旅游意外保险 <br> <p> 2、旅游者参加打猎、潜水、海边游泳、漂流、滑水、滑雪、滑草、蹦极、跳伞、滑翔、乘热气球、骑马、赛车、攀岩、水疗、水上飞机等属于高风险性游乐项目的，敬请旅游者务必在参加前充分了解项目的安全须知并确保身体状况能适应此类活动；如旅游者不具备较好的身体条件及技能，可能会造成身体伤害。</p> <p> 3、参加出海活动时，请务必穿着救生设备。参加水上活动应注意自己的身体状况，有心脏病、冠心病、高血压、感冒、发烧和饮酒及餐后不可以参加水上活动及潜水。在海里活动时，严禁触摸海洋中各种鱼类，水母，海胆，珊瑚等海洋生物，避免被其蛰伤。老人和小孩必须有成年人陪同才能参加合适的水上活动。在海边游玩时，注意保管好随身携带的贵重物品。</p> <p>4、根据中国海关总署的规定，旅客在境外购买的物品，在进入中国海关时可能需要征收关税。详细内容见《中华人民共和国海关总署公告2010年第54号文件》。</p> <p>5、建议出发时行李托运，贵重物品、常用物品、常用药品、御寒衣物等请随身携带，尽量不要托运。行李延误属于不可抗力因素，我司将全力协助客人跟进后续工作，但我司对此不承担任何责任。</p> <p>1、旅行社已投保旅行社责任险。建议游客购买旅游意外保险 <br> <p> 2、旅游者参加打猎、潜水、海边游泳、漂流、滑水、滑雪、滑草、蹦极、跳伞、滑翔、乘热气球、骑马、赛车、攀岩、水疗、水上飞机等属于高风险性游乐项目的，敬请旅游者务必在参加前充分了解项目的安全须知并确保身体状况能适应此类活动；如旅游者不具备较好的身体条件及技能，可能会造成身体伤害。</p> <p> 3、参加出海活动时，请务必穿着救生设备。参加水上活动应注意自己的身体状况，有心脏病、冠心病、高血压、感冒、发烧和饮酒及餐后不可以参加水上活动及潜水。在海里活动时，严禁触摸海洋中各种鱼类，水母，海胆，珊瑚等海洋生物，避免被其蛰伤。老人和小孩必须有成年人陪同才能参加合适的水上活动。在海边游玩时，注意保管好随身携带的贵重物品。</p> <p>4、根据中国海关总署的规定，旅客在境外购买的物品，在进入中国海关时可能需要征收关税。详细内容见《中华人民共和国海关总署公告2010年第54号文件》。</p> <p>5、建议出发时行李托运，贵重物品、常用物品、常用药品、御寒衣物等请随身携带，尽量不要托运。行李延误属于不可抗力因素，我司将全力协助客人跟进后续工作，但我司对此不承担任何责任。</p> </div> </div> </div> <!-- 详情 end --> <!--引入头部--> <div id="footer"></div> <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> <script src="js/jquery-3.3.1.js"></script> <!-- Include all compiled plugins (below), or include individual files as needed --> <script src="js/bootstrap.min.js"></script> <script src="js/getParameter.js"></script> <!--导入布局js，共享header和footer--> <script type="text/javascript" src="js/include.js"></script> <script> $(document).ready(function () { goImg(); }); function goImg(){ //焦点图效果 //点击图片切换图片 $('.little_img').on('mousemove', function() { $('.little_img').removeClass('cur_img'); var big_pic = $(this).data('bigpic'); $('.big_img').attr('src', big_pic); $(this).addClass('cur_img'); }); //上下切换 var picindex = 0; var nextindex = 4; $('.down_img').on('click',function(){ var num = $('.little_img').length; if((nextindex + 1) <= num){ $('.little_img:eq('+picindex+')').hide(); $('.little_img:eq('+nextindex+')').show(); picindex = picindex + 1; nextindex = nextindex + 1; } }); $('.up_img').on('click',function(){ var num = $('.little_img').length; if(picindex > 0){ $('.little_img:eq('+(nextindex-1)+')').hide(); $('.little_img:eq('+(picindex-1)+')').show(); picindex = picindex - 1; nextindex = nextindex - 1; } }); } //自动轮播方法 function auto_play() { var cur_index = $('.prosum_left dd').find('a.cur_img').index(); cur_index = cur_index - 1; var num = $('.little_img').length; var max_index = 3; if ((num - 1) < 3) { max_index = num - 1; } if (cur_index < max_index) { var next_index = cur_index + 1; var big_pic = $('.little_img:eq(' + next_index + ')').data('bigpic'); $('.little_img').removeClass('cur_img'); $('.little_img:eq(' + next_index + ')').addClass('cur_img'); $('.big_img').attr('src', big_pic); } else { var big_pic = $('.little_img:eq(0)').data('bigpic'); $('.little_img').removeClass('cur_img'); $('.little_img:eq(0)').addClass('cur_img'); $('.big_img').attr('src', big_pic); } } $(function () { //1.获取id 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" 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>'; $("#dd").html(ddstr); //图片展示和切换代码调用 goImg(); }); }) </script> </body> </html>
