《黑马旅游网》综合案例day03
-
旅游线路名称查询
12.1查询参数的传递在
header.html
中$("#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; });
在
route_list.html
var cid = getParameter("cid"); //获取rname的参数值 var rname = getParameter("rname"); //判断rname如果不为null或者"" if(rname){ //url解码 rname = window.decodeURIComponent(rname); }
12.2修改后台代码
Servlet
@WebServlet("/route/*") public class RouteServlet extends BaseServlet { private RouteService routeService = new RouteServiceImpl(); /** * 分页查询 * @param request * @param response * @throws ServletException * @throws IOException */ 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"); int cid = 0;//类别id //2.处理参数 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
public PageBean<Route> pageQuery(int cid, int currentPage, int pageSize,String rname ) { //封装PageBean PageBean<Route> pb = new PageBean<Route>(); //设置当前页码 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
@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()); }
12.3修改前台代码
$(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); /* <li><a href="">首页</a></li> <li class="threeword"><a href="#">上一页</a></li> <li class="curPage"><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> <li><a href="#">5</a></li> <li><a href="#">6</a></li> <li><a href="#">7</a></li> <li><a href="#">8</a></li> <li><a href="#">9</a></li> <li><a href="#">10</a></li> <li class="threeword"><a href="javascript:;">下一页</a></li> <li class="threeword"><a href="javascript:;">末页</a></li> */ var lis = ""; var fristPage = '<li οnclick="javascipt:load('+cid+',1,\''+rname+'\')"><a href="javascript:void(0)">首页</a></li>'; //计算上一页的页码 var beforeNum = pb.currentPage - 1; if(beforeNum <= 0){ beforeNum = 1; } var beforePage = '<li οnclick="javascipt:load('+cid+','+beforeNum+',\''+rname+'\')" class="threeword"><a href="javascript:void(0)">上一页</a></li>'; lis += fristPage; lis += beforePage; //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" οnclick="javascipt:load('+cid+','+i+',\''+rname+'\')"><a href="javascript:void(0)">'+i+'</a></li>'; }else{ //创建页码的li li = '<li οnclick="javascipt:load('+cid+','+i+',\''+rname+'\')"><a href="javascript:void(0)">'+i+'</a></li>'; } //拼接字符串 lis += li; } /* for (var i = 1; i <= pb.totalPage ; i++) { var li; //判断当前页码是否等于i if(pb.currentPage == i){ li = '<li class="curPage" οnclick="javascipt:load('+cid+','+i+')"><a href="javascript:void(0)">'+i+'</a></li>'; }else{ //创建页码的li li = '<li οnclick="javascipt:load('+cid+','+i+')"><a href="javascript:void(0)">'+i+'</a></li>'; } //拼接字符串 lis += li; }*/ var lastPage = '<li class="threeword"><a href="javascript:;">末页</a></li>'; var nextPage = '<li class="threeword"><a href="javascript:;">下一页</a></li>'; lis += nextPage; lis += lastPage; //将lis内容设置到 ul $("#pageNum").html(lis); /* <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> */ //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); }); }
-
旅游线路的详情展示
13.1分析
13.2代码实现
13.2.1后台代码
Servlet
/** * 根据id查询一个旅游线路的详细信息 * @param request * @param response * @throws ServletException * @throws IOException */ public void findOne(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { //1.接收id String rid = request.getParameter("rid"); //2.调用service查询route对象 Route route = routeService.findOne(rid); //3.转为json写回客户端 writeValue(route,response); }
Service
@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.2将集合设置到route对象 route.setRouteImgList(routeImgList); //3.根据route的sid(商家id)查询商家对象 Seller seller = sellerDao.findById(route.getSid()); route.setSeller(seller); return route; }
SellerDao
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
@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
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); } }
13.2.2前台代码
Route_detail.html
中加载后1.获取rid 2.发送ajax请求,获取route对象 3.解析对象的数据
<script src="js/getParameter.js"></script> <script> $(document).ready(function() { goImg(); //自动播放 // var timer = setInterval("auto_play()", 5000); }); 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.获取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); //图片展示 /* <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 class="down_img down_img_disable" style="margin-bottom: 0;"></a> </dd> </dl> */ 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>
踩坑:
-
旅游线路查询 报错:
1.1 后端服务,现阶段正常出现bug
1.2. 后端服务,现阶段出现意外bug
报错信息:baseServlet的service被执行了 请求uri:/travel/route/pageQuery 方法名称:pageQuery cn.itcast.travel.web.servlet.RouteServlet@62959ccc java.lang.reflect.InvocationTargetException at sun.reflect.NativeMethodAccessorImpl.invoke0(Native Method) at sun.reflect.NativeMethodAccessorImpl.invoke(NativeMethodAccessorImpl.java:62) at sun.reflect.DelegatingMethodAccessorImpl.invoke(DelegatingMethodAccessorImpl.java:43) at java.lang.reflect.Method.invoke(Method.java:498) at cn.itcast.travel.web.servlet.BaseServlet.service(BaseServlet.java:36) at javax.servlet.http.HttpServlet.service(HttpServlet.java:728) at org.apache.catalina.core.ApplicationFilterChain.internalDoFilter(ApplicationFilterChain.java:305) at org.apache.catalina.core.ApplicationFilterChain.doFilter(ApplicationFilterChain.java:210) at org.apache.catalina.core.StandardWrapperValve.invoke(StandardWrapperValve.java:222) at org.apache.catalina.core.StandardContextValve.invoke(StandardContextValve.java:123) at org.apache.catalina.authenticator.AuthenticatorBase.invoke(AuthenticatorBase.java:472) at org.apache.catalina.core.StandardHostValve.invoke(StandardHostValve.java:171) at org.apache.catalina.valves.ErrorReportValve.invoke(ErrorReportValve.java:99) at org.apache.catalina.valves.AccessLogValve.invoke(AccessLogValve.java:936) at org.apache.catalina.core.StandardEngineValve.invoke(StandardEngineValve.java:118) at org.apache.catalina.connector.CoyoteAdapter.service(CoyoteAdapter.java:407) at org.apache.coyote.http11.AbstractHttp11Processor.process(AbstractHttp11Processor.java:1004) at org.apache.coyote.AbstractProtocol$AbstractConnectionHandler.process(AbstractProtocol.java:589) at org.apache.tomcat.util.net.JIoEndpoint$SocketProcessor.run(JIoEndpoint.java:310) at java.util.concurrent.ThreadPoolExecutor.runWorker(ThreadPoolExecutor.java:1149) at java.util.concurrent.ThreadPoolExecutor$Worker.run(ThreadPoolExecutor.java:624) at java.lang.Thread.run(Thread.java:748) Caused by: java.lang.NullPointerException at cn.itcast.travel.web.servlet.RouteServlet.pageQuery(RouteServlet.java:35) ... 22 more
-
旅游线路的详情展示,前端页面
<dd id="dd"> ... </dd>
如果添加id ,则会出现bug,不添加,则没有bug