课上测试-实现分页显示和模糊查询
今天的软工课上，老师给我们布置了课堂小测试，要求我们做一个简单的科技政策查询系统，
具体要能实现模糊查询和分页显示。这里展示我实现的代码。
目前实现了基本功能，还有点小不完善，之后再改一改吧。
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>/ 共<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%;
}
浙公网安备 33010602011771号