每日小结（20）第六周总结
今天对地铁查询系统做了一丢丢，的美观优化，学习ajax，b站上的黑马web最新有更新，随着那个有学习了一会
findinfoservlet:
package cn.itcase.web.servlet;
import cn.itcase.domain.PageBean;
import cn.itcase.domain.subwayinfo;
import cn.itcase.service.UserService;
import cn.itcase.service.impl.UserServiceImpl;
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.util.Map;
@WebServlet(name = "FindInfoByPageServlet", value = "/findInfoByPageServlet")
public class FindInfoByPageServlet extends HttpServlet {
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
req.setCharacterEncoding("utf-8");
//1.获取参数
String currentPage = req.getParameter("currentPage");//当前页码
String rows = req.getParameter("rows");//每页显示的条数
//进行一个判断
if (currentPage ==null||"".equals(currentPage)){
currentPage="1";
}
if (rows == null || "".equals(rows)){
rows="10";
}
//获取条件查询的参数
Map<String, String[]> condition = req.getParameterMap();
//2.调用service查询
UserService service= new UserServiceImpl();
PageBean<subwayinfo> pb = service.findUserByPage(currentPage,rows,condition);
//System.out.println(pb);
//3.将PageBean存入request;
req.setAttribute("pb",pb);
req.setAttribute("condition",condition);//将查询条件存入request域中
//4.转发到list.jsp
req.getRequestDispatcher("/list.jsp").forward(req,resp);
}
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
this.doPost(req, resp);
}
}
userlistservlet:
package cn.itcase.web.servlet;
import cn.itcase.domain.subwayinfo;
import cn.itcase.service.UserService;
import cn.itcase.service.impl.UserServiceImpl;
import jdk.nashorn.internal.ir.RuntimeNode;
import sun.plugin.dom.core.Element;
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.util.List;
@WebServlet(name = "UserListServlet", value = "/userListServlet")
public class UserListServlet extends HttpServlet {
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
this.doGet(req,resp);
}
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
//调用userservice完成查询
UserService service=new UserServiceImpl();
List<subwayinfo> subwayinfos = service.findAll();
req.setAttribute("subwayinfos",subwayinfos);
req.getRequestDispatcher("/list.jsp").forward(req,resp);
}
}
list.jsp:
<%--
Created by IntelliJ IDEA.
User: 3470387368
Date: 2023/3/20
Time: 10:16
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
<!-- 指定字符集 -->
<meta charset="utf-8">
<!-- 使用Edge最新的浏览器的渲染方式 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- viewport视口：网页可以根据设置的宽度自动进行适配，在浏览器的内部虚拟一个容器，容器的宽度与设备的宽度相同。
width: 默认宽度与设备的宽度相同
initial-scale: 初始的缩放比，为1:1 -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<title>地铁站点信息</title>
<!-- 1. 导入CSS的全局样式 -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- 2. jQuery导入，建议使用1.9以上的版本 -->
<script src="js/jquery-2.1.0.min.js"></script>
<!-- 3. 导入bootstrap的js文件 -->
<script src="js/bootstrap.min.js"></script>
<style type="text/css">
td, th {
text-align: center;
}
</style>
<title>地铁信息列表</title>
</head>
<body background="image/Lbackground2.jpg" style=" background-repeat:no-repeat ;
background-size:100% 100%;
background-attachment: fixed;">
<div class="container">
<table border="1" class="table table-bordered table-hover">
<tr class="success">
<%--多选框--%>
<%-- <th><input type="checkbox" id="firstCb"></th>--%>
<th>编号</th>
<th>站点名</th>
<th>线路名</th>
<th>起始站</th>
<th>终点站</th>
</tr>
<c:forEach items="${pb.list}" var="subwayinfo" varStatus="s">
<tr>
<%-- <th><input type="checkbox" name="uid" value="${subwayinfo.id}"></th>--%>
<td>${s.count}</td>
<td>${subwayinfo.name}</td>
<td>${subwayinfo.information}</td>
<td>${subwayinfo.start}</td>
<td>${subwayinfo.end}</td>
</tr>
</c:forEach>
<%-- <tr>--%>
<%-- <td colspan="8" align="center"></td>--%>
<%-- </tr>--%>
</table>
<div>
<nav aria-label="Page navigation">
<ul class="pagination">
<c:if test="${pb.currentPage== 1}">
<li class="disabled">
<a href="${pageContext.request.contextPath}/findInfoByPageServlet?currentPage=${pb.currentPage-1}&rows=10&name=${condition.name[0]}&information=${condition.information[0]}&start=${condition.start[0]}" aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</li>
</c:if>
<c:if test="${pb.currentPage!= 1}">
<li>
<a href="${pageContext.request.contextPath}/findInfoByPageServlet?currentPage=${pb.currentPage-1}&rows=10&name=${condition.name[0]}&information=${condition.information[0]}&start=${condition.start[0]}" aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</li>
</c:if>
<%-- <li>--%>
<%-- <a href="${pageContext.request.contextPath}/findUserByPageServlet?currentPage=${pb.currentPage-1}&rows=5" aria-label="Previous">--%>
<%-- <span aria-hidden="true">«</span>--%>
<%-- </a>--%>
<%-- </li>--%>
<c:forEach begin="1" end="${pb.totalPage}" var="i">
<%-- <li><a href="${pageContext.request.contextPath}/findUserByPageServlet?currentPage=${i}&rows=5">${i}</a></li>--%>
<c:if test="${pb.currentPage == i}">
<li class="active"><a href="${pageContext.request.contextPath}/findInfoByPageServlet?currentPage=${i}&rows=10&name=${condition.name[0]}&information=${condition.information[0]}&start=${condition.start[0]}">${i}</a></li>
</c:if>
<c:if test="${pb.currentPage != i}">
<li ><a href="${pageContext.request.contextPath}/findInfoByPageServlet?currentPage=${i}&rows=10&name=${condition.name[0]}&information=${condition.information[0]}&start=${condition.start[0]}">${i}</a></li>
</c:if>
</c:forEach>
<%-- 最后一个下一页框设置不可点击--%>
<%-- <c:if test="${pb.currentPage== totalPage}">--%>
<%-- <li class="disabled">--%>
<%-- <a href="${pageContext.request.contextPath}/findUserByPageServlet?currentPage=${pb.currentPage+1}&rows=5" aria-label="Previous">--%>
<%-- <span aria-hidden="true">«</span>--%>
<%-- </a>--%>
<%-- </li>--%>
<%-- </c:if>--%>
<%-- <c:if test="${pb.currentPage!= totalPage}">--%>
<%-- <li>--%>
<%-- <a href="${pageContext.request.contextPath}/findUserByPageServlet?currentPage=${pb.currentPage+1}&rows=5" aria-label="Previous">--%>
<%-- <span aria-hidden="true">«</span>--%>
<%-- </a>--%>
<%-- </li>--%>
<%-- </c:if>--%>
<li>
<a href="${pageContext.request.contextPath}/findInfoByPageServlet?currentPage=${pb.currentPage+1}&rows=10&name=${condition.name[0]}&information=${condition.address[0]}&start=${condition.email[0]}" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
<span style="font-size: 25px;margin-left: 5px;">
共经过${pb.totalCount}站
<%-- 共${pb.totalPage}页--%>
</span>
</ul>
</nav>
</div>
</div>
</body>
</html>
search.jsp:
<!DOCTYPE html>
<html>
<head>
<title>地铁信息查询</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type="text/css">
/*设置超链接样式*/
table {
border-collapse: collapse;
border-spacing: 0;
}
a {
color: #5086a5;
text-decoration: none;
font-size: 12px;
}
a:hover {
color: #5086a5;
text-decoration: underline;
font-size: 12px;
}
a:visited {
/*color: #5086a5;*/
font-size: 12px;
}
/*整个tab层居中，宽度为600px*/
#tabDiv {
width: 600px;
margin: 1em auto;
padding-bottom: 10px;
border-right: #b2c9d3 1px solid;
border-top: #b2c9d3 1px solid;
border-left: #b2c9d3 1px solid;
border-bottom: #b2c9d3 1px solid;
*background: #ffffff;
}
/*tab头的样式*/
#tabsHead {
padding-left: 5px;
height: 26px;
*background-color: #e8f7fc;
font-size: 1em;
margin: 1px 0px 0px;
*color: #5086a5;
line-height: 26px;
}
/*已选tab头（超链接）的样式*/
.curtab {
padding-top: 0px;
padding-right: 10px;
padding-bottom: 0px;
padding-left: 10px;
border-right: #b2c9d3 1px solid;
font-weight: bold;
float: left;
cursor: pointer;
background: #ffffff;
}
/*未选tab头（超链接）的样式*/
.tabs {
border-right: #c1d8e0 1px solid;
padding-top: 0px;
padding-right: 10px;
padding-bottom: 0px;
padding-left: 10px;
font-weight: normal;
float: left;
cursor: pointer;
}
p {
font-size: 12pt;
text-indent: 2em;
}
li {
border-bottom-style: solid;
*border-bottom-color: #EEE;
border-bottom-width: thin;
height: 25px;
font-family: "宋体";
font-size: 12pt;
}
</style>
<script type="text/jscript">
//显示tab（tabHeadId：tab头中当前的超链接；tabContentId要显示的层ID）
function showTab(tabHeadId,tabContentId)
{
//tab层
var tabDiv = document.getElementById("tabDiv");
//将tab层中所有的内容层设为不可见
//遍历tab层下的所有子节点
var taContents = tabDiv.childNodes;
for(i=0; i<taContents.length; i++)
{
//将所有内容层都设为不可见
if(taContents[i].id!=null && taContents[i].id != 'tabsHead')
{
taContents[i].style.display = 'none';
}
}
//将要显示的层设为可见
document.getElementById(tabContentId).style.display = 'block';
//遍历tab头中所有的超链接
var tabHeads = document.getElementById('tabsHead').getElementsByTagName('a');
for(i=0; i<tabHeads.length; i++)
{
//将超链接的样式设为未选的tab头样式
tabHeads[i].className='tabs';
}
//将当前超链接的样式设为已选tab头样式
document.getElementById(tabHeadId).className='curtab';
document.getElementById(tabHeadId).blur();
}
</script>
<div id="time" align="lift"></div>
<script>
function showTime() {
var date = new Date();
// 年月日
var year = date.getFullYear();
var month = date.getMonth() + 1;
var day = date.getDate();
// 时分秒
var hour = date.getHours();
var minute = date.getMinutes();
var second = date.getSeconds();
// 实时显示
var element = document.getElementById('time');
element.innerHTML = '<h5>' + year + '-' + month + '-' + day + ' ' + hour + ':' + minute + ':' + second;
}
setInterval('showTime()', 1000);
</script>
</head>
<body background="image/Dbackground.jpg" style=" background-repeat:no-repeat ;
background-size:100% 100%;
background-attachment: fixed;">
<div style="width: 100%; font-family: 微软雅黑; text-align: center; font-size: 20pt;">地铁信息查询</div>
<div id="tabDiv" style="width: 1000px" align="center">
<div id="tabsHead" >
<a id="tabs1" class="curtab" href="javascript:showTab('tabs1','tabContent1')">起点终点查询</a> <a id="tabs2" class="tabs" href="javascript:showTab('tabs2','tabContent2')">线路查询</a> <a id="tabs3" class="tabs" href="javascript:showTab('tabs3','tabContent3')">站点查询</a>
</div>
<div id="tabContent1" style="display: block" >
<table style="border-width: 0; width: 100%" >
<tr>
<td colspan="3" rowspan="3">
<form class="form-inline" action="${pageContext.request.contextPath}/findInfoByPageServlet" method="post">
<div align="center">
起点终点查询
</div>
<div class="form-group" align="center">
<label for="start">出发地</label>
<input type="text" name="start" class="form-control" id="start" >
</div>
<div class="form-group" align="center">
<label for="end">目的地</label>
<input type="text" name="end" class="form-control" id="end" >
</div><br>
<div align="center"><button type="submit" class="btn btn-default" >查询</button></div>
</form>
</td>
</tr>
<tr>
</tr>
<tr>
</tr>
</table>
</div>
<!--以下为获奖记录部分内容-->
<div id="tabContent2" style="display: none">
<form class="form-inline" action="${pageContext.request.contextPath}/findInfoByPageServlet" method="post">
<div>
线路查询
</div>
<div class="form-group">
<label for="information">线路名称</label>
<input type="text" name="information" class="form-control" id="information" >
</div><br>
<%-- <div class="form-group">--%>
<%-- <label for="information">线路名称：</label>--%>
<%-- <select name="information" class="form-control" id="information2">--%>
<%-- <option value="1号线">1号线</option>--%>
<%-- <option value="2号线">2号线</option>--%>
<%-- <option value="3号线">3号线</option>--%>
<%-- </select><br>--%>
<%-- </div>--%>
<button type="submit" class="btn btn-default">查询</button>
</form>
</div>
<div id="tabContent3" style="display: none">
<form class="form-inline" action="${pageContext.request.contextPath}/findInfoByPageServlet" method="post">
<div>
站点查询
</div>
<div class="form-group">
<label for="name">站点名称</label>
<input type="text" name="name" class="form-control" id="name" >
</div><br>
<%-- <div class="form-group">--%>
<%-- <label for="zhandianfenlei">站点分类：</label>--%>
<%-- <select name="zhandianmingcheng" class="form-control" id="zhandianfenlei">--%>
<%-- <option value="0">0</option>--%>
<%-- <option value="A">A</option>--%>
<%-- <option value="B">B</option>--%>
<%-- <option value="C">C</option>--%>
<%-- <option value="D">D</option>--%>
<%-- </select>--%>
<%-- </div>--%>
<%-- <div class="form-group">--%>
<%-- <label for="zhandianmingcheng1">站点名称：</label>--%>
<%-- <select name="zhandianmingcheng1" class="form-control" id="zhandianmingcheng1">--%>
<%-- <option value="1号线">1号线</option>--%>
<%-- <option value="2号线">2号线</option>--%>
<%-- <option value="3号线">3号线</option>--%>
<%-- </select><br>--%>
<%-- </div>--%>
<button type="submit" class="btn btn-default">查询</button>
</form>
</div>
</div>
<hr />
<table style="border-width: 0; width: 100%">
<tr>
<td rowspan="3" style="width: 300px; text-align: center"><img alt="sun" src="image/subway.jpg" style="width: 300px" /></td>
</tr>
</table>
</body>
</html>
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· Ollama——大语言模型本地部署的极速利器
· 使用C#创建一个MCP客户端
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型，支持深度思考和联网搜索！
· Windows编程----内核对象竟然如此简单？
· ollama系列1：轻松3步本地部署deepseek，普通电脑可用