Loading

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

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

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

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

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%;
}

 

posted @ 2023-04-10 20:49  冰稀饭Aurora  阅读(58)  评论(0编辑  收藏  举报