分页政策查询系统-优化后的界面
在上次的基础上，优化和改进：
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>/ 共<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
