分页政策查询系统-优化后的界面

在上次的基础上，优化和改进：

1.使用bootstrap优化了界面样式，更加整洁美观

2.显示政策名称，字数超出一定限度以省略号结尾，鼠标放在上边可以完全显示

3.直接点击政策名称能够跳转到政策的具体页面

界面展示：

 点击进入具体页面：

 部分代码：

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/main0.css"/>
    <link rel="stylesheet" href="css/bootstrap-grid.min.css">
    <link rel="stylesheet" href="css/bootstrap-reboot.min.css">
    <link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body>
<nav class="navbar navbar-light bg-light justify-content-between">
    <img src="images/LOGO.png" height="50" width="50">
    <h3>科技政策查询系统</h3>
    <div class="form-inline">
        <form action="Query">
            <input class="form-control mr-sm-2" type="text" placeholder="按名称查询" aria-label="政策查询" name="name">
            <button class="btn btn-outline-success my-2 my-sm-0" type="submit">查询</button>
        </form>
    </div>
</nav>
<!-- 内容块 class="page-block"-->
<div class="container-fluid">
    <div class="page-1">
        <%
            int num = (int) request.getAttribute("queryNum");
            int n2 = num / 10;
        %>
        <table class="table table-striped table-bordered">
            <tr>
                <th><%="政策名称"%>
                </th>
                <th><%="发文机构"%>
                </th>
                <th><%="颁布日期"%>
                </th>
                <th><%="政策分类"%>
                </th>
            </tr>
            <%
                response.setContentType("text/html;charset=UTF-8");
                ArrayList<Bean> arr = (ArrayList<Bean>) request.getAttribute("queryResult");

                for (int i = 1; i < 11; i++) {
                    Bean bean1 = new Bean();
                    bean1._id = arr.get(i)._id;
                    bean1._name = arr.get(i)._name;
                    bean1._organ = arr.get(i)._organ;
                    bean1._pubdata = arr.get(i)._pubdata;
                    bean1._type = arr.get(i)._type;
                    bean1._text = arr.get(i)._text;
            %>
            <tr>
                <td><a href="Show?sid=<%=bean1._id%>" title="<%=bean1._name%>"><%=bean1._name%>
                </a></td>
                <td><%=bean1._organ%>
                </td>
                <td><%=bean1._pubdata%>
                </td>
                <td><%=bean1._type%>
                </td>
            </tr>
            <%
                }
            %>
        </table>
    </div>

    <div class="page-2">
        <table class="table table-striped table-bordered">
            <tr>
                <th><%="政策名称"%>
                </th>
                <th><%="发文机构"%>
                </th>
                <th><%="颁布日期"%>
                </th>
                <th><%="政策分类"%>
                </th>
            </tr>
            <%
                for (int i = 11; i < 21; i++) {
                    Bean bean1 = new Bean();
                    bean1._id = arr.get(i)._id;
                    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><a href="Show?sid=<%=bean1._id%>" title="<%=bean1._name%>"><%=bean1._name%>
                </a></td>
                <td><%=bean1._organ%>
                </td>
                <td><%=bean1._pubdata%>
                </td>
                <td><%=bean1._type%>
                </td>
            </tr>
            <%
                }
            %>
        </table>
    </div>

    <div class="page-3">
        <table class="table table-striped table-bordered">
            <tr>
                <th><%="政策名称"%>
                </th>
                <th><%="发文机构"%>
                </th>
                <th><%="颁布日期"%>
                </th>
                <th><%="政策分类"%>
                </th>
            </tr>
            <%
                for (int i = 21; i < 31; i++) {
                    Bean bean1 = new Bean();
                    bean1._id = arr.get(i)._id;
                    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><a href="Show?sid=<%=bean1._id%>" title="<%=bean1._name%>"><%=bean1._name%>
                </a></td>
                <td><%=bean1._organ%>
                </td>
                <td><%=bean1._pubdata%>
                </td>
                <td><%=bean1._type%>
                </td>
            </tr>
            <%
                }
            %>
        </table>
    </div>
</div>
<div class="container">
    <p>查询到了<%=num%>条数据</p>
</div>
<!-- 分页按钮 -->
<div class="page-icon">
    <button class="beforePage" onclick="prev_click()"><a>上一页</a></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()"><a>下一页</a></button>
</div>
<script src="./js/index.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>
复制代码

两个servlet

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._id = db.rs.getString("id");//名称
                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() {

    }
}
复制代码

Show.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("/Show")
public class Show extends HttpServlet {

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

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

        String sid =  req.getParameter("sid");

        DB db = new DB();
        String result = null;
        try {
            db.rs = db.stmt.executeQuery("SELECT * FROM policy WHERE id =" + "'"+ sid +"'");
            while (db.rs.next()) {
                result = db.rs.getString("text");//内容
            }
        }catch (Exception e){
            e.printStackTrace();
        }finally {
            db.close();
        }

        if (result!=null){
            req.setAttribute("textResult", result);
            req.getRequestDispatcher("/success.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() {

    }
}
复制代码

用到bootstrap的js和css

 

作者：冰稀饭Aurora

出处：https://www.cnblogs.com/rsy-bxf150/p/17334557.html

版权：本作品采用「署名-非商业性使用-相同方式共享 4.0 国际」许可协议进行许可。

posted @   冰稀饭Aurora  阅读(30)  评论(0)  编辑  收藏  举报
相关博文：
·  分页查询系统-简单的分页查询的系统
·  课上测试-实现分页显示和模糊查询（代码部分）
·  2024.4.30（结组第10天）
·  五一冲刺（政策查询系统）1
·  如何实现分页查询
阅读排行：
· 25岁的心里话
· 闲置电脑爆改个人服务器（超详细） #公网映射 #Vmware虚拟网络编辑器
· 零经验选手，Compose 一天开发一款小游戏！
· 因为Apifox不支持离线，我果断选择了Apipost！
· 通过 API 将Deepseek响应流式内容输出到前端
more_horiz
keyboard_arrow_up dark_mode palette
选择主题
点击右上角即可分享
微信分享提示
AI IDE Trae