[JavaWeb] - 网页搜索 & 分页显示

最新推荐文章于 2024-05-11 13:30:09 发布

dawn2134

最新推荐文章于 2024-05-11 13:30:09 发布

阅读量849

点赞数

分类专栏： JavaWeb 文章标签： JavaWeb

本文链接：https://blog.csdn.net/dawn2134/article/details/90520177

版权

JavaWeb 专栏收录该内容

0 篇文章 0 订阅

订阅专栏

文章目录

一. 功能效果

在这里插入图片描述

二. 功能思路

在这里插入图片描述
说明:

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 += "<li>\n" +
                    "                <span class=\"num\">" + rankCount + "</span>\n" +
                    "                <a href=\"route_detail.html?rid=" + route.rid + "\"><img src=\"" + route.rimage + "\" alt=\"\"></a>\n" +
                    "                <h4><a href=\"route_detail.html?rid=" + route.rid + "\">" + route.rname + "</a></h4>\n" +
                    "                <p>\n" +
                    "                    <b class=\"price\">&yen;<span>" + route.price + "</span>起</b>\n" +
                    "                    <span class=\"shouchang\">已收藏" + route.count + "次</span>\n" +
                    "                </p>\n" +
                    "            </li>"
                rankCount += 1;
            }
            $(".list>ul").html(routeHtml);

            //页码显示
            var pageHtml = "";
            //首页和上一页
            if (rankPageBean.pageNumber > 1) {
                pageHtml += "<li><a href=\"favoriterank.html?pageNum=1&rname=" + rname + "&minprice=" + minprice + "&maxprice=" + maxprice + "\">首页</a></li>";
                pageHtml += "<li class=\"threeword\"><a href=\"favoriterank.html?pageNum=" + (rankPageBean.pageNumber - 1) + "&rname=" + rname + "&minprice=" + minprice + "&maxprice=" + maxprice + "\">上一页</a></li>"
            }
            //中间页码
            for (var i = rankPageBean.start; i <= rankPageBean.end; i++) {
                if (i === rankPageBean.pageNumber) {
                    pageHtml += "<li class='curPage'><a href=\"favoriterank.html?pageNum=" + i + "&rname=" + rname + "&minprice=" + minprice + "&maxprice=" + maxprice + "\">" + i + "</a></li>"
                } else {
                    pageHtml += "<li><a href=\"favoriterank.html?pageNum=" + i + "&rname=" + rname + "&minprice=" + minprice + "&maxprice=" + maxprice + "\">" + i + "</a></li>"
                }
            }
            //下一页和末页
            if (rankPageBean.pageNumber < rankPageBean.pageCount) {
                pageHtml += "<li class=\"threeword\"><a href=\"favoriterank.html?pageNum=" + (rankPageBean.pageNumber + 1) + "&rname=" + rname + "&minprice=" + minprice + "&maxprice=" + maxprice + "\">下一页</a></li>";
                pageHtml += "<li class=\"threeword\"><a href=\"favoriterank.html?pageNum=" + rankPageBean.pageCount + "&rname=" + rname + "&minprice=" + minprice + "&maxprice=" + maxprice + "\">末页</a></li>";
            }
            $(".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);
    }
}

dawn2134

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
[JavaWeb] - 网页搜索 & 分页显示

一. 功能效果二. 功能思路说明:PageBean 是自己封装的类 , 成员变量即为service层需要传给web层的数据项service层的数据计算公式 : // 分了多少页 pageCount = Math.ceil ( totalCount * 1.0 ) / pageSize ; // 页码从几页开始显示 start = pageNum -5 // 要根据不...
复制链接

扫一扫

专栏目录