如何制作一个简单的仿百度搜索功能的网页

最新推荐文章于 2024-07-10 13:43:03 发布

海那边的小萌男

最新推荐文章于 2024-07-10 13:43:03 发布

阅读量1w

点赞数 1

分类专栏： J2EE

本文链接：https://blog.csdn.net/weixin_37720904/article/details/76685892

版权

J2EE 专栏收录该内容

69 篇文章 0 订阅

订阅专栏

本篇博客知识点~
版本一：
实现一个小功能：通过点击页面上不同的页数，去数据库查询不同的信息，更新到页面上。
版本二：
在查询的结果集合上继续查询；查询结果数据分页后的分页

这里写图片描述
就像图上这样点击不同的页数，去数据库查询出不同的信息处来~

其实主要难点在于下面。

如何通过当前页数，查到数据库中对应的信息。

 页数 = 总行数/每一页显示的记录数+ (总行数%每一页显示的记录数==0?0:1);
 本页显示的起始记录数 =  （页数 -1 ）* 每一页显示的记录数

在通过 select * from stud limit "+ 本页显示的起始记录数+","+ 每一页显示的记录数 查询出来。

如何封装数据？

表数据：每条记录通过Map 来封装。 一个表再通过一个 List<Map>封装。

外面再用一个Map把List封装了，同时还可以封装其他数据。
/*
 * 必须返回：总页数(int) + 查询的表数据(List<Map<String,String>>)
 * 因此可封装成: 
 * int pageCount = ...
 * List<Map<String,String>> datas = ...
 * Map<String,Object> map = new HashMap<String,Object>();
 * 
 * map.put("pageCount",pageCount); //1
 * map.put("datas",datas);//2
 */

接下来就是代码了
实现从数据看查询结果出来并且封装的DAO代码

package cn.hncu.dao;

import java.util.HashMap;
import java.util.List;
import java.util.Map;
/*
 * 必须返回：总页数(int) + 查询的表数据(List<Map<String,String>>)
 * 因此可封装成: 
 * int pageCount = ...
 * List<Map<String,String>> datas = ...
 * Map<String,Object> map = new HashMap<String,Object>();
 * 
 * map.put("pageCount",pageCount); //1
 * map.put("datas",datas);//2
 */

import org.apache.commons.dbutils.QueryRunner;
import org.apache.commons.dbutils.handlers.MapListHandler;
import org.apache.commons.dbutils.handlers.ScalarHandler;

import cn.hncu.utils.C3p0ConnUtils;

public class StudDao implements IStudDAO{
/*
 * 页数 = 总行数/pageSize  + (总行数%pageSize==0?0:1);
 * 第n页的 起始行数 = （n-1）* pageSize；
 * 
 * (non-Javadoc)
 * @see cn.hncu.dao.IStudDAO#query(int)
 */
    @Override
    public Map<String, Object> query(int pageNo) throws Exception {
        Map<String, Object>  map = new HashMap<String, Object>();
        QueryRunner run = new QueryRunner( C3p0ConnUtils.getDataSource());
        int pageCount = Integer.valueOf(""+run.query("select count(1) from stud", new ScalarHandler()));

        int pageSize = 15; //每一页显示15行数据~
        int startNo = (pageNo-1)*pageSize;
        List<Map<String, Object>>  datas= run.query("select * from stud limit "+startNo+","+pageSize, new MapListHandler());
        map.put("datas",datas); //封装好了当前页面的数据总共的行数
        pageCount = pageCount/pageSize + (pageCount%pageSize==0?0:1);
        map.put("pageCount", pageCount);// 封装好了一个总共页数目
        return map;
    }
}

实现和页面连接的PageServlet代码如下。（与DAO之间会有几个没有实际作用的接口所以代码没贴了）

package cn.hncu.servlet;

import java.io.IOException;
import java.io.PrintWriter;
import java.util.Map;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import cn.hncu.service.IPageServiceDAO;
import cn.hncu.service.PageServiceDao;

public class PageServlet extends HttpServlet {
//      注入Service
    private IPageServiceDAO psDao = new PageServiceDao();
    public void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
            doPost(request, response);
    }

    public void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        String spageNo = request.getParameter("pageNo");
        if(spageNo==null || spageNo.trim().length()<=0){
            spageNo = "1";
        }
        Integer pageNo =1;
        Map<String, Object> map  = null;
        try {
            pageNo = Integer.valueOf(spageNo);
             map = psDao.query(pageNo);
        } catch (NumberFormatException e) {
            System.out.println("请传入正确格式的 数字参数");
            e.printStackTrace();
        } catch (Exception e) {
            System.out.println("导向错误页面");
            e.printStackTrace();
        }
        int pageCount = (Integer) map.get("pageCount");

        // 页面只显示最近10页面
        int starPagetNo = pageNo-5; int endPageNo =pageNo+4;
        if(pageNo<=6){
            starPagetNo = 1; endPageNo = starPagetNo + 9;
        }
        if(pageNo>=pageCount-4){
            endPageNo = pageCount;starPagetNo = endPageNo -9;
        }
        //把数据传给前端页面：起始页、结束页、当前页、当前页数据,总页面数
        request.setAttribute("startPageNo", starPagetNo);
        request.setAttribute("endPageNo", endPageNo);
        request.setAttribute("pageNo", pageNo);
        request.setAttribute("resList", map.get("datas"));
        request.setAttribute("pageCount", pageCount);
        request.getRequestDispatcher("/jsps/show.jsp").forward(request, response);
    }

}

最后是显示页面代码show.jsp

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<html>
  <head>
    <title>页面数据显示</title>
  </head>

  <body>
        <h3>网页数据分页显示技术</h3>
            <c:if test="${pageNo!=1}">
                <a href=" <c:url value='/PageServlet?pageNo=${pageNo-1}'/>">上一页</a>
            </c:if>
        <c:forEach begin="${startPageNo}" end="${endPageNo}" var="i">
            <c:if test="${i!=pageNo}">
                <a href=" <c:url value='/PageServlet?pageNo=${i}'/>" >${i}</a>
            </c:if>
            <c:if test="${i==pageNo}">
                <a style="font-size: larger;color: red;">  ${i} </a>
            </c:if>
        </c:forEach>
        <c:if test="${pageNo!=pageCount}">
                <a href=" <c:url value='/PageServlet?pageNo=${pageNo+1}'/>">下一页</a>
            </c:if>
        <hr>
        <c:forEach items="${resList}" var="map">
            ${map.id} ${map.name} <br/>
        </c:forEach>
  </body>
</html>

最后结果如下。因为我只完成功能没有加css。所以有点丑~
这里写图片描述

版本二：
底层查询数据库代码


public class StudDao implements IStudDAO{
/*
 * 页数 = 总行数/pageSize  + (总行数%pageSize==0?0:1);
 * 第n页的 起始行数 = （n-1）* pageSize；
 * 
 * (non-Javadoc)
 * @see cn.hncu.dao.IStudDAO#query(int)
 */
    @Override
    public Map<String, Object> query(int pageNo,Stud s) throws Exception {
        Map<String, Object>  map = new HashMap<String, Object>();
        QueryRunner run = new QueryRunner( C3p0ConnUtils.getDataSource());
        String sql = "select count(1) from stud where 1=1";

        int pageSize = 15; //每一页显示15行数据~
        int startNo = (pageNo-1)*pageSize;


        String sql2 = "select * from stud where 1=1";

        if(s.getId()!=null && s.getId().trim().length()>0){
            sql2 = sql2 + " and id like '%"+s.getId()+"%'";
            sql = sql + " and id like '%"+s.getId()+"%'";
        }
        if(s.getName()!=null && s.getName().trim().length()>0){
            sql2 = sql2 + " and name like '%"+s.getName()+"%'";
            sql = sql + " and name like '%"+s.getName()+"%'";
        }
        sql2 = sql2 +" limit "+startNo+","+pageSize;

        int pageCount = Integer.valueOf(""+run.query(sql, new ScalarHandler()));
        List<Map<String, Object>>  datas= run.query(sql2, new MapListHandler());
        map.put("datas",datas); //封装好了当前页面的数据总共的行数
        pageCount = pageCount/pageSize + (pageCount%pageSize==0?0:1);
        map.put("pageCount", pageCount);// 封装好了一个总共页数目
        return map;
    }
}

Servlet 层代码

package cn.hncu.servlet;

import java.io.IOException;
import java.io.PrintWriter;
import java.util.Map;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;

import cn.hncu.domain.Stud;
import cn.hncu.service.IPageServiceDAO;
import cn.hncu.service.PageServiceDao;

public class PageServlet extends HttpServlet {
//      注入Service
    private IPageServiceDAO psDao = new PageServiceDao();
    public void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
            doPost(request, response);
    }

    public void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {

        HttpSession session = request.getSession();
        Stud s = (Stud) session.getAttribute("stud");
        if(s==null){// 第一次进来~
            s = new Stud();
        }

        if(request.getMethod().equalsIgnoreCase("POST")){
            String id = request.getParameter("id");
            String name = request.getParameter("name");
            //Post方式就需要重新封装 Stud 
            s.setId(id);
            s.setName(name);
            session.setAttribute("stud", s);
        }
        request.setAttribute("id", s.getId());
        request.setAttribute("name", s.getName());

        //下面不管前面，只负责拿到  要查的页 和 Stud
        String spageNo = request.getParameter("pageNo");
        if(spageNo==null || spageNo.trim().length()<=0){
            spageNo = "1";
        }
        Integer pageNo =1;
        Map<String, Object> map  = null;
        try {
            pageNo = Integer.valueOf(spageNo);
             map = psDao.query(pageNo,s);
        } catch (NumberFormatException e) {
            System.out.println("请传入正确格式的 数字参数");
            e.printStackTrace();
        } catch (Exception e) {
            System.out.println("导向错误页面");
            e.printStackTrace();
        }
        int pageCount = (Integer) map.get("pageCount");

        // 页面只显示最近10页面
        int starPagetNo = pageNo-5; int endPageNo =pageNo+4;
        if(pageNo<=6){
            starPagetNo = 1; endPageNo = starPagetNo + 9;
        }
        if(pageNo>=pageCount-4){
            endPageNo = pageCount;starPagetNo = endPageNo -9;
        }
        if(pageCount<10){
            starPagetNo = 1; endPageNo =pageCount;
        }
        //把数据传给前端页面：起始页、结束页、当前页、当前页数据,总页面数
        request.setAttribute("startPageNo", starPagetNo);
        request.setAttribute("endPageNo", endPageNo);
        request.setAttribute("pageNo", pageNo);
        request.setAttribute("resList", map.get("datas"));
        request.setAttribute("pageCount", pageCount);
        request.getRequestDispatcher("/jsps/show.jsp").forward(request, response);
    }

}

显示页面代码 show.jsp

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<html>
  <head>
    <title>页面数据显示</title>
  </head>

  <body>
        <h3>网页数据分页显示技术</h3>

        <form action="<c:url value='/PageServlet'/>" method="post">
            id包含：<input type="text" name="id" value="${id }"/> &nbsp; &nbsp;
            Name包含：<input type="text" name="name" value="${name }"/> &nbsp; &nbsp;
            <input type="submit" value="查询一下">
        </form>

        <hr>
            <c:if test="${pageNo!=1}">
                <a href=" <c:url value='/PageServlet?pageNo=${pageNo-1}'/>">上一页</a>
            </c:if>
        <c:forEach begin="${startPageNo}" end="${endPageNo}" var="i">
            <c:if test="${i!=pageNo}">
                <a href=" <c:url value='/PageServlet?pageNo=${i}'/>" >${i}</a>
            </c:if>
            <c:if test="${i==pageNo}">
                <a style="font-size: larger;color: red;">  ${i} </a>
            </c:if>
        </c:forEach>
        <c:if test="${pageNo!=pageCount}">
                <a href=" <c:url value='/PageServlet?pageNo=${pageNo+1}'/>">下一页</a>
        </c:if>
    <select onchange="sub(this);">
        <c:forEach begin="1" end="${pageCount}" var="idx">
           <option <c:if test='${idx==pageNo}'>selected</c:if> value="${idx}"> 第${idx}页 </option>
        </c:forEach>
    </select>
    <script type="text/javascript">
       function sub(obj){
           window.location.href="<c:url value='/PageServlet?pageNo='/>" +obj.value;
       }
    </script>
        <hr>
        <c:forEach items="${resList}" var="map">
            ${map.id} ${map.name} <br/>
        </c:forEach>
  </body>
</html>

结果页面展示
查询id包含2 名字包含Tom信息
这里写图片描述

海那边的小萌男

关注

1
点赞
踩
14

收藏

觉得还不错? 一键收藏
1
评论
如何制作一个简单的仿百度搜索功能的网页

本篇博客知识点~ 版本一：实现一个小功能：通过点击页面上不同的页数，去数据库查询不同的信息，更新到页面上。版本二：在查询的结果集合上继续查询；查询结果数据分页后的分页就像图上这样点击不同的页数，去数据库查询出不同的信息处来~其实主要难点在于下面。如何通过当前页数，查到数据库中对应的信息。页数 = 总行数/每一页显示的记录数+ (总行数%每一页显示的记录数==0?0:1); 本页
复制链接

扫一扫

专栏目录