首页 > 其他分享 >课上测试-实现分页显示和模糊查询（代码部分）

课上测试-实现分页显示和模糊查询（代码部分）

时间：2023-04-10 20:55:05浏览次数：34  
标签：index 分页 text bean 查询 课上 ._ var page

　　今天的软工课上，老师给我们布置了课堂小测试，要求我们做一个简单的科技政策查询系统，

具体要能实现模糊查询和分页显示。这里展示我实现的代码。

　　目前实现了基本功能，还有点小不完善，之后再改一改吧。

Query.java

package main;

import dao.Bean;
import datas.DB;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.ArrayList;


@WebServlet("/Query")
public class Query extends HttpServlet {

    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {

        resp.setContentType("text/html;charset=UTF-8");
        PrintWriter out = resp.getWriter();

        String put_name =  req.getParameter("name");

        DB db = new DB();
        ArrayList<Bean> result = new ArrayList<>();
        int num = 0;
        try {

            db.rs = db.stmt.executeQuery("SELECT * FROM policy WHERE name LIKE " + "'%" + put_name + "%'");
            while (db.rs.next()) {

                Bean bean = new Bean();
                bean._name = db.rs.getString("name");//名称
                bean._organ = db.rs.getString("organ");//结构
                bean._pubdata = db.rs.getString("pubdata");//日期
                bean._type = db.rs.getString("type");//分类
                bean._text = db.rs.getString("text");//内容
                result.add(bean);
                num++;
            }

        }catch (Exception e){
            e.printStackTrace();
        }finally {
            db.close();
        }

        if (result!=null){
            req.setAttribute("queryResult", result);
            req.setAttribute("queryNum", num);
            req.getRequestDispatcher("/message.jsp").forward(req, resp);
        }else {
            req.getRequestDispatcher("/fail.jsp").forward(req, resp);
        }

    }
    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        doGet(req, resp);
    }
    @Override
    public void init() throws ServletException {
    }
    @Override
    public void destroy() {

    }
}

message.jsp

<%@ page import="dao.Bean" %>
<%@ page import="java.util.ArrayList" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="zh">
<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/main1.css"/>
    <link rel="stylesheet" href="css/side.css">
</head>
<body>
<div class="sidenav">
    <a href="http://localhost:8080/imageExcel_war_exploded/A1.html">科技文档管理</a>
    <a href="http://localhost:8080/imageExcel_war_exploded/A2.html">系统设置</a>
</div>

<!-- 内容块 class="page-block"-->
<div class="page-block">
    <div class="page-1">
        <img src="images/LOGO.png" height="70" width="70">
        <h1>科技政策查询系统</h1>
        <h1>第一页</h1>

        <hr>
        <div style="display: block">
            <form action="Query">

                查询<input type="text" style="height:20px;width:150px;" placeholder="按名称查询" name="name"/>
                <input type="submit"  style="height:20px;width:150px;" value="查询"/>

            </form>
        </div>
        <hr>
        <%
            int num = (int) request.getAttribute("queryNum");
            int n2 = num/10;
        %>
        <p>   查询到了<%=num%>条数据</p>
        <table>
            <tr>

                <table border="0" cellpadding="10" style=" border-left-color: #B0C4DE; border-bottom-color: #B0C4DE; width: 100%;border-top-style: solid; border-top-color: #B0C4DE; border-right-style: solid; border-left-style: solid; height: 250px; border-right-color: #B0C4DE; border-bottom-style: solid">

                    <tr>
                        <th align="center" bgcolor="#F0FFFF" ><%="政策名称"%></th>
                        <th align="center" bgcolor="#F0FFFF" ><%="发文机构"%></th>
                        <th align="center" bgcolor="#F0FFFF" ><%="颁布日期"%></th>
                        <th align="center" bgcolor="#F0FFFF" ><%="政策分类"%></th>
                        <th align="center" bgcolor="#F0FFFF" ><%="操作"%></th>
                    </tr>
                    <%
                        response.setContentType("text/html;charset=UTF-8");

                        ArrayList<Bean> arr = (ArrayList<Bean>) request.getAttribute("queryResult");

                        Bean bean = new Bean();

                        bean._name = arr.get(0)._name;//名称
                        bean._organ = arr.get(0)._organ;//结构
                        bean._pubdata = arr.get(0)._pubdata;//日期
                        bean._type = arr.get(0)._type;//分类
                        bean._text = arr.get(0)._text;//内容
                    %>
                    <%
                       //arr.size()
                            for (int i = 1; i < 11; i++) {

                                Bean bean1 = new Bean();
                                bean1._name = arr.get(i)._name;
                                bean1._organ   = arr.get(i)._organ;
                                bean1._pubdata       = arr.get(i)._pubdata;
                                bean1._type          = arr.get(i)._type;

                    %>

                    <tr>
                        <td align="center" bgcolor="#F5F5F5"><%=bean1._name%></td>

                        <td align="center" bgcolor="#F5F5F5"><%=bean1._organ%></td>

                        <td align="center" bgcolor="#F5F5F5"><%=bean1._pubdata%></td>

                        <td align="center" bgcolor="#F5F5F5"><%=bean1._type%></td>

                        <td align="center" bgcolor="#f5f5dc"><a href="news2.html">查看详情</a></td>

                    </tr>


                    <%
                        }
                    %>




                </table>
                </td>
            </tr>


        </table>


    </div>

    <div class="page-2">
        <h1>第二页</h1>

        <hr>
        <div style="display: block">
            <form action="Query">

                查询<input type="text" style="height:20px;width:150px;" placeholder="按名称查询" name="name"/>
                <input type="submit"  style="height:20px;width:150px;" value="查询"/>

            </form>
        </div>
        <p>   查询到了<%=num%>条数据</p>
        <hr>
        <table style="border-width: 0; width: 100%; padding: 5px; " >
            <tr>

                <table border="0" cellpadding="10" style=" border-left-color: #B0C4DE; border-bottom-color: #B0C4DE; width: 100%;border-top-style: solid; border-top-color: #B0C4DE; border-right-style: solid; border-left-style: solid; height: 250px; border-right-color: #B0C4DE; border-bottom-style: solid">

                    <tr>
                        <th align="center" bgcolor="#F0FFFF" ><%="政策名称"%></th>
                        <th align="center" bgcolor="#F0FFFF" ><%="发文机构"%></th>
                        <th align="center" bgcolor="#F0FFFF" ><%="颁布日期"%></th>
                        <th align="center" bgcolor="#F0FFFF" ><%="政策分类"%></th>
                        <th align="center" bgcolor="#F0FFFF" ><%="操作"%></th>
                    </tr>
        <%
                for (int i = 11; i < 21; i++) {

                    Bean bean1 = new Bean();
                    bean1._name = arr.get(i)._name;
                    bean1._organ   = arr.get(i)._organ;
                    bean1._pubdata       = arr.get(i)._pubdata;
                    bean1._type          = arr.get(i)._type;

        %>

        <tr>
            <td align="center" bgcolor="#F5F5F5"><%=bean1._name%></td>

            <td align="center" bgcolor="#F5F5F5"><%=bean1._organ%></td>

            <td align="center" bgcolor="#F5F5F5"><%=bean1._pubdata%></td>

            <td align="center" bgcolor="#F5F5F5"><%=bean1._type%></td>

            <td align="center" bgcolor="#f5f5dc"><a href="news2.html">查看详情</a></td>

        </tr>

        <%

            }
        %>

                </table>
                </td>
            </tr>


        </table>
    </div>

    <div class="page-3">
        <h1>第三页</h1>
        <hr>
        <div  style="display: block">
            <form action="Query">

                查询<input type="text" style="height:20px;width:150px;" placeholder="按名称查询" name="name"/>
                <input type="submit"  style="height:20px;width:150px;" value="查询"/>

            </form>
        </div>
        <p>   查询到了<%=num%>条数据</p>
        <hr>
        <table style="border-width: 0; width: 100%; padding: 5px; " >
            <tr>

                <table border="0" cellpadding="10" style=" border-left-color: #B0C4DE; border-bottom-color: #B0C4DE; width: 100%;border-top-style: solid; border-top-color: #B0C4DE; border-right-style: solid; border-left-style: solid; height: 250px; border-right-color: #B0C4DE; border-bottom-style: solid">

                    <tr>
                        <th align="center" bgcolor="#F0FFFF" ><%="政策名称"%></th>
                        <th align="center" bgcolor="#F0FFFF" ><%="发文机构"%></th>
                        <th align="center" bgcolor="#F0FFFF" ><%="颁布日期"%></th>
                        <th align="center" bgcolor="#F0FFFF" ><%="政策分类"%></th>
                        <th align="center" bgcolor="#F0FFFF" ><%="操作"%></th>
                    </tr>
                    <%

                            for (int i = 21; i < 31; i++) {

                                Bean bean1 = new Bean();
                                bean1._name = arr.get(i)._name;
                                bean1._organ   = arr.get(i)._organ;
                                bean1._pubdata       = arr.get(i)._pubdata;
                                bean1._type          = arr.get(i)._type;

                    %>

                    <tr>
                        <td align="center" bgcolor="#F5F5F5"><%=bean1._name%></td>

                        <td align="center" bgcolor="#F5F5F5"><%=bean1._organ%></td>

                        <td align="center" bgcolor="#F5F5F5"><%=bean1._pubdata%></td>

                        <td align="center" bgcolor="#F5F5F5"><%=bean1._type%></td>

                        <td align="center" bgcolor="#f5f5dc"><a href="news2.html">查看详情</a></td>

                    </tr>

                    <%

                        }
                    %>

                </table>
                </td>
            </tr>


        </table>

    </div>


</div>
<!-- 分页按钮 -->
<div class="page-icon">
    <button class="firstPage" onclick="first_click()" ><img src="./imgs/page-icon/left-end.png"/></button>
    <button class="beforePage" onclick="prev_click()" ><img src="./imgs/page-icon/page-left.png"/></button>
    <button>第<input id="currentPage" onchange="choose_page()" type="text" value="1"/>页</button>
    <button>/&nbsp;&nbsp;&nbsp;共<input id="totalPage" type="button" value=<%=n2+1%> readonly="readonly">页</button>
    <button class="nextPage" onclick="next_click()"><img src="./imgs/page-icon/page-right.png"/></button>
    <button class="lastPage" onclick="last_click()"><img src="./imgs/page-icon/right-end.png"/></button>
</div>
<script src="./js/index.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>

index.js

// 定义一个数组，保存当前所有页面的class name
var page_index = ["page-1", "page-2", "page-3"];

// 输入pagename，打开指定的div，隐藏其他的div
function page_option(pagename){
    var tar_index = page_index.indexOf(pagename);
    page_index.slice(tar_index, 1);
    for (var j = 0; j < page_index.length ; j++){
        var close_div = document.getElementsByClassName(page_index[j]);
        for (var i = 0; i<close_div.length;i++) {
            close_div[i].style.display="none";
        };
    }

    var opendiv = document.getElementsByClassName(pagename);
    for (var i = 0; i<opendiv.length;i++) {
        opendiv[i].style.display="block";
    };
}

// 点击 返回第一页按钮 执行的操作
function first_click(){
    page_option("page-1");
    document.getElementById('currentPage').value=1;
}

// 点击 跳到最后一页按钮 执行的操作
function last_click(){
    var total_page = document.getElementById('totalPage').value;
    page_option(page_index[page_index.length - 1]);
    document.getElementById('currentPage').value=total_page;
}

// 点击 上一页按钮 执行的操作
function prev_click(){
    var cur_page = document.getElementById('currentPage').value;
    if (cur_page > 1){
        document.getElementById('currentPage').value=parseInt(cur_page)-1;
        var pagename = page_index[parseInt(cur_page)-2];
        page_option(pagename);
    }
}

// 点击 下一页按钮 执行的操作
function next_click(){
    var cur_page = document.getElementById('currentPage').value;
    var total_page = document.getElementById('totalPage').value;
    if (cur_page < total_page){
        document.getElementById('currentPage').value=parseInt(cur_page) + 1;
        var pagename = page_index[parseInt(cur_page)];
        page_option(pagename);
    }
}

// 手动改变当前页码时执行的操作
function choose_page(){
    var cur_page = document.getElementById('currentPage').value;
    var pagename = page_index[parseInt(cur_page)-1];
    page_option(pagename);
}

// 鼠标事件，经过每一条资讯时改变标题的颜色
function light(obj){
    obj.firstElementChild.style.color="#FF9900";
}

function normal(obj){
    obj.firstElementChild.style.color="#000000";
}

main1.css

body {
    background: #efefef;
}
.page-block {
    width: 1000px;
    background: #efefef;
    margin: auto auto;
}
.page-block h1 {
    text-align: center;
}
.article-hover{
    height: 50px;
    background: #ffffff;
}
.article-hover:hover{
    background: #f8f8f8;
}
.thumbnail {
    width: 150px;
    height: 150px;
    display: flex;
    align-items: center;
    float: left;
}
.thumbnail img {
    width: 100px;
    height: 130px;
    margin: 0 auto;
}
.info-content {
    width: 850px;
    height: 50px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}
.info-content a {
    color: #000000;
    text-decoration: none;
    display: inline-block;
    border: 1px solid #cdcdcd;
    padding:4px 10px 5px;
    border-radius: 10px;
}
.info-content a:hover {
    background: linear-gradient(to right,#FFCC00,#FF9900);
    color: #fff;
}
.li-title{
    width: 850px;
    font-size: 15px;
    font-weight: 700;
    text-align: left;
}
.li-content{
    width: 830px;
    font-size: 16px;
    font-weight: 400;
    text-align: left;
}
.page-icon{
    width: 1200px;
    margin: 35px auto 0;
    font-size:0;
    text-align:center;
}
.page-icon button {
    border: none;
    background-color: #efefef;
    padding:4px 10px 5px;
    font-size:20px;
}
.page-icon button:nth-child(3), .page-icon button:nth-child(4) {
    cursor: default;
}
.page-icon button img {
    width: 15px;
    height: 15px;
}
#totalPage, #currentPage {
    cursor: default;
    border: none;
    background-color: #efefef;
    padding:4px 10px 5px;
    font-size:20PX;
}
#currentPage {
    cursor: auto;
    text-align: center;
    width: 40px;
}
.page-1{
    display: block;
}
.page-2, .page-3 , .page-4{
    display: none;
}
hr {
    opacity: 50%;
}

 

标签：index,分页,text,bean,查询,课上,._,var,page
From： https://www.cnblogs.com/rsy-bxf150/p/17304267.html

相关文章

  • 分页查询的实现过程
    分页查询目前我看到的最简单的分页查询的实现就是直接在servlet查询得到list列表之后，在jsp页面或者html页面引用<%进行实现1、首先，获取到session保存的list数据List<docu>list=(List<docu>)request.getSession().getAttribute("list");//此处是取出所存储的数据2、设置......
  • Django笔记二十一之使用原生SQL查询数据库
    本文首发于公众号：Hunter后端原文链接：Django笔记二十一之使用原生SQL查询数据库Django提供了两种方式来执行原生SQL代码。一种是使用raw()函数，一种是使用connection.cursor()。但是官方还是推荐在使用原生SQL之前，尽量的先去探索一下QuerySet提供的各种API。目前......
  • sqlalchemy快速插入数据、scoped_session线程安全、基本增删查改、一对多、 多对多、
    目录1sqlalchemy快速插入数据2scoped_session线程安全2.1基本使用2.2加在类上的装饰器3基本增删查改3.1基本增删查改和高级查询3.2原生sql3.3django中执行原生sql4一对多4.1表模型4.2新增和基于对象的查询5多对多5.1表模型5.2增加和基于对象的跨表查询6连表查询1......
  • 剖析SQL Server 2005查询通知之基础篇(2)
    四.为使用查询通知作准备因为默认情况下SQLServer2005处于高度安全的状态，所以你需要“打开”一些功能才能使用查询通知。首先，你要使用的每一个数据库都需要启动ServiceBroker功能。为此，你可以在T-SQL中使用如下命令实现：USEmydatabaseALTERDATABASEmydbSETENABLE_B......
  • 剖析SQL Server 2005查询通知之基础篇(3)
    六.你的第一个通知下面，让我们开始使用SqlDependency来分析一下所有上面这些是如何协同工作的。首先，我们创建一个类NotificationTest来存取你的数据。在这个类中，还要创建一个典型的函数以便从Pubs数据库的Authors表中查询一些数据并返回一个SqlDataReader。ImportsSyste......
  • 天气预报查询 API + AI 等于王炸（一大波你未曾设想的天气预报查询 API 应用场景更新了）
    前言近年来，随着信息化进程的不断深入，人们对于信息的获取和处理需求越来越高。而其中，天气查询API是一个非常重要的服务，它能够帮助人们快速获取所在位置的天气情况，同时也为各类应用提供了必要的气象数据支持。本文将介绍天气查询API的技术原理、实际应用场景以及获取API的方法......
  • 快递单号查询入口，批量查询快递单号，对同一天签收的快递单号进行排序或筛选
    如何快速查询多家快递的物流，并筛选出同一天签收的单号呢？今天小编给大家分享一个新的查询技巧，下面一起来试试吧。所需工具安装一个快递批量查询高手快递单号若干操作步骤步骤1：运行【快递批量查询高手】，选择“添加单号”，弹出对话框，将单号复制粘贴进去，保存一下步骤2：保存后，所有快递单号......
  • C/C++模拟校园卡消费记录查询系统[2023-04-09]
    C/C++模拟校园卡消费记录查询系统[2023-04-09]模拟校园卡1问题描述同学们都在机房做实验或自由上机，请根据自己实际使用情况编写一份模拟校园卡消费记录查询系统，实现登录，计费，挂失，统计等相关功能。2功能要求主要功能模块：(1)登录模块：同学根据自己设定的密码登录。三次错误则......
  • 多条数据并成一条后合并查询（Power Query）
    问题：两表合并，其中一表有重复的数据需要事先求和或合并let源=Excel.CurrentWorkbook(){[Name="表1"]}[Content],合并查询=Table.NestedJoin(源,{"订单号"},表2,{"订单号"},"表2",JoinKind.LeftOuter),展开=Table.ExpandTableColumn(合并查询,"表2......
  • 多表查询和python操作mysql
    目录多表查询的两种方法方法1：连表操作方法2：子查询小知识点补充说明可视化软件NaviCat多表查询练习题1、查询所有的课程的名称以及对应的任课老师姓名2.查询平均成绩大于八十分的同学的姓名和平均成绩3.查询没有报李平老师课的学生姓名4.查询没有同时选修物理课程和体育课程的学生......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99