Java后端学习路线笔记汇总表【黑马程序员】

JavaWeb黑马旅游网-学习笔记01【准备工作】

JavaWeb黑马旅游网-学习笔记02【注册功能】

JavaWeb黑马旅游网-学习笔记03【登陆和退出功能】

JavaWeb黑马旅游网-学习笔记04【BaseServlet抽取】

JavaWeb黑马旅游网-学习笔记05【分类数据展示功能】

JavaWeb黑马旅游网-学习笔记06【旅游线路分页展示分页展示】

JavaWeb黑马旅游网-学习笔记07【旅游线路查询】

JavaWeb黑马旅游网-学习笔记08【旅游线路详情】

JavaWeb黑马旅游网-学习笔记09【旅游线路收藏】

JavaWeb黑马旅游网-学习笔记10【项目代码】

31-旅游线路分页展示_类别id传递

32-旅游线路分页展示_分页数据展示_分析

PageBean.java // 服务器端代码编写

33-旅游线路分页展示_分页数据展示_代码实现_Servlet

RouteServlet.java // 服务器端代码编写

34-旅游线路分页展示_分页数据展示_代码实现_Dao

RouteDao.java

RouteDaoImpl.java

35-旅游线路分页展示_分页数据展示_代码实现_Service

RouteService.java

RouteServiceImpl.java

36-旅游线路分页展示_分页数据展示_前台代码_页码展示

37-旅游线路分页展示_分页数据展示_前台代码_数据展示

38-旅游线路分页展示_分页数据展示_前台代码_异步加载数据

39-旅游线路分页展示_分页数据展示_前台代码_页码处理

window跳转到页面顶部

route_list.html // 客户端代码编写

31-旅游线路分页展示_类别id传递

点击了不同的分类后，将来看到的旅游线路不一样的。通过分析数据库表结构，发现，旅游线路表和分类表是一个多对一的关系。

查询不同分类的旅游线路sql：Select * from tab_route where cid = ?;

Redis中查询score（cid）

页面传递cid

header.html传递cid

获取cid

$(function () {
   var search = location.search;
   //alert(search);/id=5
    // 切割字符串，拿到第二个值
    var cid = search.split("=")[1];
});

32-旅游线路分页展示_分页数据展示_分析

分页展示旅游线路数据。

分析：

PageBean.java // 服务器端代码编写

创建PageBean对象

package cn.itcast.travel.domain;import java.util.List;/*** 分页对象*/
public class PageBean<T> {private int totalCount;//总记录数private int totalPage;//总页数private int currentPage;//当前页码private int pageSize;//每页显示的条数private List<T> list;//每页显示的数据集合public int getTotalCount() {return totalCount;}public void setTotalCount(int totalCount) {this.totalCount = totalCount;}public int getTotalPage() {return totalPage;}public void setTotalPage(int totalPage) {this.totalPage = totalPage;}public int getCurrentPage() {return currentPage;}public void setCurrentPage(int currentPage) {this.currentPage = currentPage;}public int getPageSize() {return pageSize;}public void setPageSize(int pageSize) {this.pageSize = pageSize;}public List<T> getList() {return list;}public void setList(List<T> list) {this.list = list;}
}

33-旅游线路分页展示_分页数据展示_代码实现_Servlet

RouteServlet.java // 服务器端代码编写

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.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;@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");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);//4. 将pageBean对象序列化为json，返回writeValue(pb, response);}
}

34-旅游线路分页展示_分页数据展示_代码实现_Dao

RouteDao.java

package cn.itcast.travel.dao;import cn.itcast.travel.domain.Route;import java.util.List;public interface RouteDao {/*** 根据cid查询总记录数*/public int findTotalCount(int cid);/*** 根据cid、start、pageSize查询当前页的数据集合*/public List<Route> findByPage(int cid, int start, int pageSize);
}

RouteDaoImpl.java

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.List;public class RouteDaoImpl implements RouteDao {private JdbcTemplate template = new JdbcTemplate(JDBCUtils.getDataSource());@Overridepublic int findTotalCount(int cid) {String sql = "select count(*) from tab_route where cid = ?";return template.queryForObject(sql, Integer.class, cid);}@Overridepublic List<Route> findByPage(int cid, int start, int pageSize) {String sql = "select * from tab_route where cid = ? limit ? , ?";return template.query(sql, new BeanPropertyRowMapper<Route>(Route.class), cid, start, pageSize);}
}

35-旅游线路分页展示_分页数据展示_代码实现_Service

RouteService.java

package cn.itcast.travel.service;import cn.itcast.travel.domain.PageBean;
import cn.itcast.travel.domain.Route;/*** 线路Service*/
public interface RouteService {/*** 根据类别进行分页查询** @param cid* @param currentPage* @param pageSize* @return*/public PageBean<Route> pageQuery(int cid, int currentPage, int pageSize);
}

RouteServiceImpl.java

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();@Overridepublic PageBean<Route> pageQuery(int cid, int currentPage, int pageSize) {//封装PageBeanPageBean<Route> pb = new PageBean<Route>();//设置当前页码pb.setCurrentPage(currentPage);//设置每页显示条数pb.setPageSize(pageSize);//设置总记录数int totalCount = routeDao.findTotalCount(cid);pb.setTotalCount(totalCount);//设置当前页显示的数据集合int start = (currentPage - 1) * pageSize;//开始的记录数List<Route> list = routeDao.findByPage(cid, start, pageSize);pb.setList(list);//设置总页数 = 总记录数/每页显示条数int totalPage = totalCount % pageSize == 0 ? totalCount / pageSize : (totalCount / pageSize) + 1;pb.setTotalPage(totalPage);return pb;}
}

36-旅游线路分页展示_分页数据展示_前台代码_页码展示

37-旅游线路分页展示_分页数据展示_前台代码_数据展示

38-旅游线路分页展示_分页数据展示_前台代码_异步加载数据

39-旅游线路分页展示_分页数据展示_前台代码_页码处理

window跳转到页面顶部

//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;//判断当前页码是否等于iif (pb.currentPage == i) {li = '<li class="curPage" onclick="javascipt:load(' + cid + ',' + i + ')"><a href="javascript:void(0)">' + i + '</a></li>';} else {//创建页码的lili = '<li onclick="javascipt:load(' + cid + ',' + i + ')"><a href="javascript:void(0)">' + i + '</a></li>';}//拼接字符串lis += li;
}

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>$(function () {var search = location.search;//alert(search);//?id=5// 切割字符串，拿到第二个值var cid = search.split("=")[1];//当页面加载完成后，调用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);/*<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 onclick="javascipt: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 += fristPage;lis += beforePage;//1.2 展示分页页码/*1.一共展示10个页码，能够达到前5后4的效果2.如果前边不够5个，后边补齐10个3.如果后边不足4个，前边补齐10个*/// 定义开始位置begin,结束位置 endvar 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;//判断当前页码是否等于iif (pb.currentPage == i) {li = '<li class="curPage" onclick="javascipt:load(' + cid + ',' + i + ')"><a href="javascript:void(0)">' + i + '</a></li>';} else {//创建页码的lili = '<li onclick="javascipt:load(' + cid + ',' + i + ')"><a href="javascript:void(0)">' + i + '</a></li>';}//拼接字符串lis += li;}/*// 显示所有页码for (var i = 1; i <= pb.totalPage; i++) {var li;//判断当前页码是否等于iif (pb.currentPage == i) {li = '<li class="curPage" onclick="javascipt:load(' + cid + ',' + i + ')"><a href="javascript:void(0)">' + i + '</a></li>';} else {//创建页码的lili = '<li onclick="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="data: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>&yen;</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>&yen;</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="data: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="data: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>&yen;</span><span>299</span><span>起</span></p><p><a href="route_detail.html">查看详情</a></p></div></li><li><div class="img"><img src="data:images/04-search_03.jpg" alt=""></div><div class="text1"><p>浪花朵朵旅行普吉岛丛林飞跃空中飞人探险游中文服务泰国旅游</p><br/><p>1-2月出发，网付立享￥1099/2人起！爆款位置有限，抢完即止！</p></div><div class="price"><p class="price_num"><span>&yen;</span><span>899</span><span>起</span></p><p><a href="route_detail.html">查看详情</a></p></div></li><li><div class="img"><img src="data:images/04-search_03.jpg" alt=""></div><div class="text1"><p>黑妞皇家旅行普吉岛攀牙湾大船星光之旅皮划艇日落休闲特色体验</p><br/><p>1-2月出发，网付立享￥1099/2人起！爆款位置有限，抢完即止！</p></div><div class="price"><p class="price_num"><span>&yen;</span><span>999</span><span>起</span></p><p><a href="route_detail.html">查看详情</a></p></div></li><li><div class="img"><img src="data:images/04-search_03.jpg" alt=""></div><div class="text1"><p>浪花朵朵旅行普吉岛皇帝岛珊瑚岛香蕉船拖拽伞水上项目</p><br/><p>1-2月出发，网付立享￥1099/2人起！爆款位置有限，抢完即止！</p></div><div class="price"><p class="price_num"><span>&yen;</span><span>99</span><span>起</span></p><p><a href="route_detail.html">查看详情</a></p></div></li><li><div class="img"><img src="data:images/04-search_03.jpg" alt=""></div><div class="text1"><p>环游记 泰国清迈Lila massage女子监狱spa 丽菈泰式按摩马杀鸡</p><br/><p>1-2月出发，网付立享￥1099/2人起！爆款位置有限，抢完即止！</p></div><div class="price"><p class="price_num"><span>&yen;</span><span>199</span><span>起</span></p><p><a href="route_detail.html">查看详情</a></p></div></li><li><div class="img"><img src="data: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>&yen;</span><span>899</span><span>起</span></p><p><a href="route_detail.html">查看详情</a></p></div></li><li><div class="img"><img src="data: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>&yen;</span><span>1199</span><span>起</span></p><p><a href="route_detail.html">查看详情</a></p></div></li><li><div class="img"><img src="data:images/04-search_03.jpg" alt=""></div><div class="text1"><p>泰国芭提雅三合一日游芭提雅蒂芬妮人妖秀成人门票bigeye含接送</p><br/><p>1-2月出发，网付立享￥1099/2人起！爆款位置有限，抢完即止！</p></div><div class="price"><p class="price_num"><span>&yen;</span><span>1589</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">12</span>页<span id="totalCount">132</span>条</div><div class="pageNum"><ul id="pageNum"><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></ul></div></div><div class="right"><div class="top"><div class="hot">HOT</div><span>热门推荐</span></div><ul><li><div class="left"><img src="data:images/04-search_09.jpg" alt=""></div><div class="right"><p>清远新银盏温泉度假村酒店/自由行套...</p><p>网付价<span>&yen;<span>899</span>起</span></p></div></li><li><div class="left"><img src="data:images/04-search_09.jpg" alt=""></div><div class="right"><p>清远新银盏温泉度假村酒店/自由行套...</p><p>网付价<span>&yen;<span>899</span>起</span></p></div></li><li><div class="left"><img src="data:images/04-search_09.jpg" alt=""></div><div class="right"><p>清远新银盏温泉度假村酒店/自由行套...</p><p>网付价<span>&yen;<span>899</span>起</span></p></div></li><li><div class="left"><img src="data:images/04-search_09.jpg" alt=""></div><div class="right"><p>清远新银盏温泉度假村酒店/自由行套...</p><p>网付价<span>&yen;<span>899</span>起</span></p></div></li><li><div class="left"><img src="data:images/04-search_09.jpg" alt=""></div><div class="right"><p>清远新银盏温泉度假村酒店/自由行套...</p><p>网付价<span>&yen;<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>

只有你爬到山顶了，这座山才会支撑着你。

JavaWeb黑马旅游网-学习笔记06【旅游线路分页展示分页展示】相关推荐

黑马旅游网学习笔记之旅游线路详情(八)
概述 (一)需求分析 (二)后台代码 (三)前台代码 (一)需求分析再来看看数据库的关系这里使用SQLyog能够清晰看到一对多的关系 (二)后台代码 RouteServlet: /*** 根据id ...
黑马旅游网学习笔记之旅游线路查询(七)
概述 (一)参数传递 (二)后台代码 (三)前台代码 (一)参数传递 (二)后台代码第一步,加上rname字段然后分三种情况: 第一种,直接在首页查询只有rname 没有cid 第二种,进去之后 ...
JavaWeb黑马旅游网-学习笔记09【旅游线路收藏】
Java后端学习路线笔记汇总表[黑马程序员] JavaWeb黑马旅游网-学习笔记01[准备工作] JavaWeb黑马旅游网-学习笔记02[注册功能] JavaWeb黑马旅游网-学习笔记03[登陆和 ...
JavaWeb黑马旅游网-学习笔记08【旅游线路详情】
Java后端学习路线笔记汇总表[黑马程序员] JavaWeb黑马旅游网-学习笔记01[准备工作] JavaWeb黑马旅游网-学习笔记02[注册功能] JavaWeb黑马旅游网-学习笔记03[登陆和 ...
JavaWeb黑马旅游网-学习笔记05【分类数据展示功能】
Java后端学习路线笔记汇总表[黑马程序员] JavaWeb黑马旅游网-学习笔记01[准备工作] JavaWeb黑马旅游网-学习笔记02[注册功能] JavaWeb黑马旅游网-学习笔记03[登陆和 ...
JavaWeb黑马旅游网-学习笔记04【BaseServlet抽取】
Java后端学习路线笔记汇总表[黑马程序员] JavaWeb黑马旅游网-学习笔记01[准备工作] JavaWeb黑马旅游网-学习笔记02[注册功能] JavaWeb黑马旅游网-学习笔记03[登陆和 ...
JavaWeb黑马旅游网-学习笔记03【登陆和退出功能】
Java后端学习路线笔记汇总表[黑马程序员] JavaWeb黑马旅游网-学习笔记01[准备工作] JavaWeb黑马旅游网-学习笔记02[注册功能] JavaWeb黑马旅游网-学习笔记03[登陆和 ...
JavaWeb黑马旅游网-学习笔记02【注册功能】
Java后端学习路线笔记汇总表[黑马程序员] JavaWeb黑马旅游网-学习笔记01[准备工作] JavaWeb黑马旅游网-学习笔记02[注册功能] JavaWeb黑马旅游网-学习笔记03[登陆和 ...
JavaWeb黑马旅游网-学习笔记01【准备工作】
Java后端学习路线笔记汇总表[黑马程序员] JavaWeb黑马旅游网-学习笔记01[准备工作] JavaWeb黑马旅游网-学习笔记02[注册功能] JavaWeb黑马旅游网-学习笔记03[登陆和 ...

JavaWeb黑马旅游网-学习笔记06【旅游线路分页展示分页展示】

31-旅游线路分页展示_类别id传递

32-旅游线路分页展示_分页数据展示_分析

PageBean.java // 服务器端代码编写

33-旅游线路分页展示_分页数据展示_代码实现_Servlet

RouteServlet.java // 服务器端代码编写

34-旅游线路分页展示_分页数据展示_代码实现_Dao

RouteDao.java

RouteDaoImpl.java

35-旅游线路分页展示_分页数据展示_代码实现_Service

RouteService.java

RouteServiceImpl.java

36-旅游线路分页展示_分页数据展示_前台代码_页码展示

37-旅游线路分页展示_分页数据展示_前台代码_数据展示

38-旅游线路分页展示_分页数据展示_前台代码_异步加载数据

39-旅游线路分页展示_分页数据展示_前台代码_页码处理

window跳转到页面顶部

route_list.html // 客户端代码编写

JavaWeb黑马旅游网-学习笔记06【旅游线路分页展示分页展示】相关推荐

最新文章

热门文章