[JavaWeb] - 网页搜索 & 分页显示
文章目录
- 一. 功能效果
- 二. 功能思路
- 三. 代码
- 3.1 前端部分代码
- 3.2 web层代码 : routeServlet 继承 baseServlet
- 3.3 service层代码 : routeServiceImpl 实现 routeService接口
- 3.4 dao层代码 : routeDaoImpl 实现 routeDao接口
- 3.5 其他代码
- 3.5.1 PageUtil - 调用静态方法计算PageBean中的部分数据
- 3.5.2 BaseServlet - 自己封装的RouteServlet的父类
一. 功能效果
![[JavaWeb] - 网页搜索 & 分页显示_第1张图片](http://img.e-com-net.com/image/info8/9bfa81a2094243eda99a47408b0bc657.jpg)
二. 功能思路
![[JavaWeb] - 网页搜索 & 分页显示_第2张图片](http://img.e-com-net.com/image/info8/40d26bd5f98346548253eeae946897f4.jpg)
说明:
- PageBean 是自己封装的类 , 成员变量即为service层需要传给web层的数据项
- service层的数据计算公式 :
// 分了多少页
pageCount = Math.ceil ( totalCount * 1.0 ) / pageSize ;
// 页码从几页开始显示
start = pageNum -5 // 要根据不同的当前页码数做条件判断, 因此封装了工具类PageUtil
// 页码显示到几页结束
end = start + 10 // 要根据不同的当前页码数做条件判断, 因此封装了工具类PageUtil
- dao层的动态SQL :
由于条件查询中的条件不是必选的 , 所以会有参数为空的情况
此时要动态拼接SQL 语句, 有参数再加上相应的过滤条件 , 没有参数不能加
String sql = "SELECT COUNT(*) FROM tab_route WHERE rflag = 1 ";
List<Object> params = new ArrayList<>(); // 这是实参集合
if (rname != null && !"".equals(rname)) {
sql += " AND rname LIKE ? ";
params.add("%" + rname + "%");
}
int count = jdbcTemplate.queryForObject(sql, Integer.class, params.toArray());
//注意参数集合需要转成数组才可以用
三. 代码
3.1 前端部分代码
<script type="text/javascript" src="js/getParameter.js">script>
<script>
//接收参数
var pageNum = getParameter("pageNum");
var rname = getParameter("rname");
var minprice = getParameter("minprice");
var maxprice = getParameter("maxprice");
//拼接参数
var param = "action=rankRoute&pageNum=" + pageNum + "&rname=" + rname + "&minprice=" + minprice + "&maxprice=" + maxprice;
//发送Ajax请求
$.post("route", param, function (result) {
if (result.ok) {
var rankPageBean = result.data;
//显示路线 : 由于没有使用前端框架, 这里只能用字符串拼接的方法
var rankRoute = rankPageBean.data;
var rankCount = (rankPageBean.pageNumber - 1) * rankPageBean.pageSize + 1; // 排行榜的序号
var routeHtml = "";
for (var route of rankRoute) {
routeHtml += "\n" +
" " + rankCount + "\n" +
" + route.rid + "\">![](\""</span)
+ route.rimage + "\" alt=\"\">\n" +
" + route.rid + "\">" + route.rname + "
\n" +
" \n"
+
" ¥" + route.price + "起\n" +
" 已收藏" + route.count + "次\n" +
" \n" +
" "
rankCount += 1;
}
$(".list>ul").html(routeHtml);
//页码显示
var pageHtml = "";
//首页和上一页
if (rankPageBean.pageNumber > 1) {
pageHtml += " + rname + "&minprice=" + minprice + "&maxprice=" + maxprice + "\">首页 ";
pageHtml += " + (rankPageBean.pageNumber - 1) + "&rname=" + rname + "&minprice=" + minprice + "&maxprice=" + maxprice + "\">上一页 "
}
//中间页码
for (var i = rankPageBean.start; i <= rankPageBean.end; i++) {
if (i === rankPageBean.pageNumber) {
pageHtml += " + i + "&rname=" + rname + "&minprice=" + minprice + "&maxprice=" + maxprice + "\">" + i + " "
} else {
pageHtml += " + i + "&rname=" + rname + "&minprice=" + minprice + "&maxprice=" + maxprice + "\">" + i + " "
}
}
//下一页和末页
if (rankPageBean.pageNumber < rankPageBean.pageCount) {
pageHtml += " + (rankPageBean.pageNumber + 1) + "&rname=" + rname + "&minprice=" + minprice + "&maxprice=" + maxprice + "\">下一页 ";
pageHtml += " + rankPageBean.pageCount + "&rname=" + rname + "&minprice=" + minprice + "&maxprice=" + maxprice + "\">末页 ";
}
$(".pageNum>ul").html(pageHtml);
} else {
alert(result.msg);
}
}, "json")
//点击[搜索]按钮, 触发点击事件 : 带参跳转到favoriterank.html页面
$(".shaixuan>button").click(function () {
location.href = "favoriterank.html?pageNum=1&rname=" + ($(".rnameSearch").val()) + "&minprice=" + ($(".minpriceSearch").val()) + "&maxprice=" + ($(".maxpriceSearch").val())
})
script>
3.2 web层代码 : routeServlet 继承 baseServlet
baseServlet : 由servlet中的基础方法 doPost和doGet封装而成
/**
* 收藏排行榜
* 只贴相关方法, doPost和doGet封装成了baseServlet,routeServlet继承baseServlet
*/
public void rankRoute(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
try {
//接收参数
String pageNum = request.getParameter("pageNum");
String rname = request.getParameter("rname");
String minprice = request.getParameter("minprice");
String maxprice = request.getParameter("maxprice");
//设置默认页码为1 , 防止没有页码时页面数据错误
if (pageNum == null || "".equals(pageNum)) {
pageNum = 1 + "";
}
//设置每页显示8条
Integer pageSize = 8;
PageBean pageBean = routeService.rankRoute(pageNum,pageSize,rname,minprice,maxprice);
//ResultInfo是自定义的放置结果的类, 有3个成员变量, ok : 是否正常 ; data : 放传输的数据 ; msg : 如果有异常,错误信息
ResultInfo resultInfo = new ResultInfo(true,pageBean);
} catch (Exception e) {
e.printStackTrace();
ResultInfo resultInfo = new ResultInfo(false,"服务器忙");
}
//将resultInfo转成json
ObjectMapper objectMapper = new ObjectMapper();
String json = objectMapper.writeValueAsString(resultInfo);
response.getWriter().print(json);
}
3.3 service层代码 : routeServiceImpl 实现 routeService接口
/**
* 收藏排行榜
*/
@Override
public PageBean rankRoute(String pageNum, Integer pageSize, String rname, String minprice, String maxprice) {
/*当前页码 */
Integer pageNumber = Integer.parseInt(pageNum);
/*每页多少条 : int pageSize*/
/*总共多少数据*/
Integer totalCount = routeDao.queryrankAll(rname,minprice,maxprice);
/*分了多少页*/
Integer pageCount = PageUtils.calcPageCount(totalCount, pageSize);
/*页码条从几开始显示*/
Integer start = PageUtils.pagination(pageNumber, pageCount)[0];
/*页码条显示到几结束*/
Integer end = PageUtils.pagination(pageNumber, pageCount)[1];
/*当前页的数据集合*/
Integer index = PageUtils.calcSqlLimitIndex(pageNumber,pageSize);
List<Route> data = routeDao.queryrankPageData(rname,minprice,maxprice,index,pageSize);
PageBean pageBean = new PageBean();
pageBean.setPageNumber(pageNumber);
pageBean.setPageSize(pageSize);
pageBean.setTotalCount(totalCount);
pageBean.setPageCount(pageCount);
pageBean.setStart(start);
pageBean.setEnd(end);
pageBean.setData(data);
return pageBean;
}
3.4 dao层代码 : routeDaoImpl 实现 routeDao接口
/**
* 收藏排行榜 - 符合条件的总数据量
*/
@Override
public Integer queryrankAll(String rname, String minprice, String maxprice) {
String sql = "SELECT COUNT(*) FROM tab_route WHERE rflag = 1 ";
List<Object> params = new ArrayList<>();
if (rname != null && !"".equals(rname)) {
sql += " AND rname LIKE ? ";
params.add("%" + rname + "%");
}
if (minprice != null && !"".equals(minprice)) {
sql += " AND price >= ? ";
params.add(minprice);
}
if (maxprice != null && !"".equals(maxprice)) {
sql += " AND price<=? ";
params.add(maxprice);
}
return jdbcTemplate.queryForObject(sql, Integer.class, params.toArray());
}
/**
* 收藏排行榜 - 路线数据
*/
@Override
public List<Route> queryrankPageData(String rname, String minprice, String maxprice, Integer index, Integer pageSize) {
String sql = "SELECT * FROM tab_route WHERE rflag = 1 ";
List<Object> params = new ArrayList<>();
if (rname != null && !"".equals(rname)) {
sql += " AND rname LIKE ? ";
params.add("%" + rname + "%");
}
if (minprice != null && !"".equals(minprice)) {
sql += " AND price >= ? ";
params.add(minprice);
}
if (maxprice != null && !"".equals(maxprice)) {
sql += " AND price<=? ";
params.add(maxprice);
}
sql += " ORDER BY COUNT DESC ";
sql += " limit ?,? ";
params.add(index);
params.add(pageSize);
return jdbcTemplate.query(sql,new BeanPropertyRowMapper<>(Route.class),params.toArray());
}
3.5 其他代码
3.5.1 PageUtil - 调用静态方法计算PageBean中的部分数据
package util;
import java.util.Arrays;
public class PageUtils {
/**
* 计算分页时limit条件的index值
* @param pageNumber 当前是第几页
* @param pageSize 每页显示多少条
* @return 分页时limit的index值
*/
public static int calcSqlLimitIndex(int pageNumber, int pageSize){
return (pageNumber - 1) * pageSize;
}
/**
* 计算分了多少页
* @param totalCount 要分页的总数量
* @param pageSize 每页显示多少条
* @return 分了多少页
*/
public static int calcPageCount(int totalCount, int pageSize){
return (int) Math.ceil(totalCount * 1.0 / pageSize);
}
/**
* 10页-分页条：前5后4动态分页，计算起始页
*
* @param pageNumber 当前页码
* @param pageCount 总共有多少页
* @return int[0]：开始页码； int[1]：结束页面
*/
public static int[] pagination(int pageNumber, int pageCount) {
//初始化开始页为1
int start = 1;
//初始化结束页为总页数
int end = pageCount;
//如果总页数超过10页，需要计算开始页和结束页
if (pageCount > 10) {
//计算开始页
start = (pageNumber <= 5) ? 1 : (pageNumber - 5);
//计算结束页：开始页面之后，再显示9个页码，共10个页码
end = start + 9;
//处理结束页越界的情况
if (end > pageCount) {
end = pageCount;
start = end - 9;
}
}
return new int[]{start, end};
}
public static void main(String[] args) {
int[] pagination = pagination(7, 11);
System.out.println(Arrays.toString(pagination));
}
}
3.5.2 BaseServlet - 自己封装的RouteServlet的父类
package web.base;
import web.UserServlet;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.lang.reflect.Method;
public class BaseServlet extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
try {
String action = request.getParameter("action");
Class clazz = this.getClass();
Method method = clazz.getMethod(action, HttpServletRequest.class, HttpServletResponse.class);
method.invoke(this,request,response);
} catch (Exception e) {
e.printStackTrace();
}
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
this.doPost(request, response);
}
}