小型的java WEB项目一个页面（第三段）jsp界面

技术2025-08-11 15

注：这是一个简单的展示数据在前端的功能；在后期，我会继续分享SSM框架和一些有趣的知识点，

这里所需的css样式和js样式就不列出来了

注意如果在jsp页面使用for循环一定要加如下的一行代码：

通过for循环遍历list集合，将从后端传入的集合展示在前端页面

jsp展示界面：

如果没加过滤器，启动后在浏览器应该是这样的页面；需要把上面的域名加上访问的资源：

然后跳转页面：

注意看搜索栏

最终展示效果：

想要通过前端页面CURD可在URL追加参数；

！！！参数很重要，数据的作用域也非常重要

以下为login登录页面的原码，style标签为样式内容，可不看

<%@ page contentType="text/html;charset=UTF-8" language="java" %> <% String path = request.getContextPath(); %> <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1">  <title>用户登录</title>  <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">    </head>  <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>  <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>  <style type="text/css"> @import url("../css/login.css"); </style> <style type="text/css"> body{background: #ebebeb;font-family: "Helvetica Neue","Hiragino Sans GB","Microsoft YaHei","\9ED1\4F53",Arial,sans-serif;color: #222;font-size: 12px;} *{padding: 0px;margin: 0px;} .logo{margin-top: 30px} .top_div{background: #008ead;width: 100%;height: 360px;} .login_div{background: rgb(255, 255, 255); margin: -100px auto auto; border: 1px solid rgb(231, 231, 231); border-image: none; width: 400px; height: 200px; text-align: center;} .ipt{border: 1px solid #d3d3d3;padding: 10px 10px; width: 290px;border-radius: 4px; padding-left: 35px; -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);box-shadow: inset 0 1px 1px rgba(0,0,0,.075);-webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;-o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s} .ipt:focus{border-color: #66afe9;outline: 0;-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6)} .u_logo{background: url("../images/login/username.png") no-repeat;padding: 10px 10px; position: absolute; top: 43px; left: 60px;} .p_logo{background: url("../images/login/password.png") no-repeat; padding: 10px 10px; position: absolute; top: 12px; left: 60px;} a{text-decoration: none;} .tou{background: url("../images/login/tou.png") no-repeat;width: 97px;height: 92px;position: absolute;top: -87px;left: 140px;} .left_hand{background: url("../images/login/left_hand.png") no-repeat;width: 32px;height: 37px;position: absolute;top: -38px;left: 150px;} .right_hand{background: url("../images/login/right_hand.png") no-repeat;width: 32px;height: 37px;position: absolute;top: -38px;right: -64px;} .initial_left_hand{background: url("../images/login/left-handing.png") no-repeat;width: 30px;height: 20px;position: absolute;top: -12px;left: 100px;} .initial_right_hand{background: url("../images/login/right_handing.png") no-repeat;width: 30px;height: 20px;position: absolute;top: -12px;right: -112px;} .left_handing{background: url("../images/login/left-handing.png") no-repeat;width: 30px;height: 20px;position: absolute;top: -24px;left: 139px;} .right_handinging{background: url("../images/login/right_handing.png") no-repeat;width: 30px;height: 20px;position: absolute;top: -21px;left: 210px;} .submit_div{height: 20px; line-height: 20px; margin-top: 10px; border-top-color: rgb(231, 231, 231); border-top-width: 1px; border-top-style: solid;} .submit{background: rgb(0, 142, 173); padding: 7px 10px; border-radius: 4px; border: 1px solid rgb(26, 117, 152); border-image: none; color: rgb(255, 255, 255); font-weight: bold; cursor:pointer;} .copy{text-align:center; position:absolute; z-index:1; bottom:10px; width:100%;line-height:25px; font-family:tahoma,'微软雅黑'} .copy a{color:#333} .copy a:hover{color:#000} </style> <body> <div class="top_div" style="padding-top:100px;text-align:center"> <span style="font-size:40px;color:white;" class="logo">锋迷网后台管理系统</span> </div> <div class="login_div"> <div style="width: 165px; height: 96px; position: absolute;"> <div class="tou"></div> <div class="initial_left_hand" id="left_hand"></div> <div class="initial_right_hand" id="right_hand"></div> </div> <form action="<%=path%>/LoginServlet"> <p style="padding: 30px 0px 10px; position: relative;"> <span class="u_logo"></span> <input class="ipt" id="name" type="text" name="username" placeholder="请输入用户名或邮箱" value="admin"> </p> <p style="position: relative;"> <span class="p_logo"></span> <input class="ipt" id="password" name="password" type="password" placeholder="请输入密码" value="admin"> </p> <div class="submit_div"> <p style="margin: 0px 55px 20px 45px;"> <span style="float: right;"> <input type="submit" class="submit" value=" 登录 "> </span> </p> </div> </form> </div> <div class="copy">Copyright ©2019 版权所有</a> 提供技术支持</div> </body> </html>

展示用户的jsp页面：

<%@ page contentType="text/html;charset=UTF-8" language="java"%> <%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c"%> <% String path = request.getContextPath(); %> <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1">  <title>用户登录</title>  <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">    </head>  <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>  <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script> <style> th { text-align: center; } </style> <script type="text/javascript"> function deleteConfirm(id, name) { confirm .show( '溫馨提示', '您确定要刪除[' + name + ']用户吗？', { '确定' : { 'primary' : true, 'callback' : function() { location.href = "${pageContext.request.contextPath}/UserDeleteServlet?id=" + id; } } }); } function test() { confirm("dfgvb"); } </script> </head> <body> <nav class="navbar navbar-inverse" style="margin-bottom: 0px;"> <div class="container">  <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">锋迷网管理系统</a> </div>  <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav"> <li><a href="<%=path%>/FuzzySelectGoodsServlet">商品管理 <span class="sr-only">(current)</span></a></li> <li><a href="<%=path%>/GoodsTypeSelectServlet">商品类型管理</a></li> <li class="active"><a href="<%=path%>/UserFuzzyServlet">用户管理</a></li> <li><a href="<%=path%>/OrderFuzzySelectServlet">订单管理</a></li> <li><a href="../before/index.html">直通锋迷网</a></li> </ul> <ul class="nav navbar-nav navbar-right"> <li><a href="<%=path%>/after/login.jsp">${username}</a></li> <li><a href="#"><span class="glyphicon glyphicon-log-in" style="padding-left: 0px"></span></a></li> <li><a href="<%=path%>/LogOutServlet" style="padding-left: 0px">退出</a></li> </ul> </div>  </div>  </nav> <div class="jumbotron" style="padding-top: 20px; padding-bottom: 25px"> <div class="container"> <h2>用户列表</h2> </div> </div> <div class="container"> <form class="form-inline" action="${pageContext.request.contextPath}/UserFuzzyServlet" method="post"> <div class="col-md-4"> <div class="form-group"> <label for="exampleInputName2">用户姓名</label> <input type="text" class="form-control" id="exampleInputName2" placeholder="输入姓名" name="username"> </div> </div> <div class="col-md-3" style="text-align: right; padding-right: 25px;"> <div class="form-group"> <label>性别</label> <input type="radio" name="sex" value="男">男 <input type="radio" name="sex" value="女">女 </div> <button type="submit" class="btn btn-info" style="margin-left: 20px;">查询</button> </div> </form> <div> <a href="${pageContext.request.contextPath}/after/newuser_register.jsp"><button type="submit" class="btn btn-info" style="margin-left: 20px;">添加</button></a> </div> </div>  <div class="container" style="margin-top: 20px;"> <form id="deleteFrom" action="${pageContext.request.contextPath}/UserSelectServlet" method="post"> <table style="text-align: center; margin-right: 10px; width: 99%" class="table table-striped table-hover table-bordered"> <thead style="text-align: center;"> <tr> <th>序号</th> <th>用户姓名</th> <th>手机号</th> <th>性别</th> <th>邮箱</th> <th>删除</th> <th>修改信息</th> </tr> </thead> <tbody> <c:forEach items="${list}" var="user"> <tr> <td>${user.id}</td> <td>${user.username}</td> <td>${user.phone}</td> <td>${user.sex}</td> <td>${user.mail}</td> <td><a class="glyphicon glyphicon-trash" color="#5BC0DE" style="text-decoration: none" name="id" href="<%=path%>/UserDeleteServlet?id=${user.id}" onclick="if(confirm('是否确定删除'+'${user.username}'+'？')==false)return false"></a></td> <td><a class="glyphicon glyphicon-edit" color="#5BC0DE" style="text-decoration: none" name="goodsid" href="<%=path%>/UserResetresetServlet?id=${user.id}" onclick="if(confirm('是否确定修改'+'${user.username}'+'的信息？')==false)return false"></a></td> </tr> </c:forEach> </tbody> </table> </form> </div> <% Object objNo = request.getAttribute("pageNo"); Object objCount = request.getAttribute("pageCount"); int pageNo = 0; int pageCount = 0; if (objNo != null) { pageNo = Integer.parseInt(objNo.toString()); } if (objCount != null) { pageCount = Integer.parseInt(objCount.toString()); } %> <div class="container"> <nav aria-label="..." class="navbar-right" style="margin-right: 15px"> <ul class="pagination"> <li><a class=" btn-info" href="<%=path%>/UserFuzzyServlet?pageNo=1" aria-label="Previous"> <span aria-hidden="true">首页 </span> </a></li> <% if (pageNo > 1) { %> <li><a class=" btn-info" href="<%=path %>/UserFuzzyServlet?pageNo=${pageNo-1}" aria-label="Previous"> <span aria-hidden="true"> « </span></a></li> <% } else { %> <li class="disabled"><a href="#" aria-label="Previous">« <span class="sr-only">(current) </span></a></li> <% } if (pageCount > pageNo) { %> <li><a class="btn" href="<%=path %>/UserFuzzyServlet?pageNo=${pageNo+1}&username=${username1}&sex=${sex}">${pageNo}</a></li> <li><a class="btn-info" href="<%=path %>/UserFuzzyServlet?pageNo=${pageNo+1}&username=${username1}&sex=${sex}" aria-label="Next"><span aria-hidden="true">»</span></a></li> <% } else { %> <li><a class=" btn-info" href="<%=path %>/UserFuzzyServlet?pageNo=${pageNo}&username=${username1}&sex=${sex}">${pageNo}</a></li> <li class="disabled"><a href="#" aria-label="Previous">»<span class="sr-only">(current) </span></a></li> <% } %> <li><a class=" btn-info" href="<%=path %>/UserFuzzyServlet?pageNo=${pageCount}&username=${username1}&sex=${sex}" aria-label="Previous"> <span aria-hidden="true">尾页 </span></a></li> </ul> </nav> </div> </body> </html>

最后给大家一个删除功能的Servlet原码，以Servlet获取前端通过name属性带回的值，创建一个Service层的对象调用底层Dao层的方法，完成功能

package com.mhj.servlet; import com.mhj.service.UserService; import com.mhj.service.impl.UserServiceImpl; import javax.servlet.ServletContext; 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; @WebServlet("/UserDeleteServlet") public class UserDeleteServlet extends HttpServlet { protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { doGet(request, response); } protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { request.setCharacterEncoding("utf-8"); response.setContentType("text/html;charset=utf-8"); String uid = request.getParameter("id"); ServletContext servletContext = request.getServletContext(); UserService us = new UserServiceImpl(); int i = Integer.parseInt(uid); int j = us.userDelete(i); System.out.println(j); System.out.println(uid); if (j > 0) { response.sendRedirect(servletContext.getContextPath() + "/UserFuzzyServlet"); } else { response.getWriter().append("未知错误，请联系管理员"); } } }

Dao层:

@Override public int userDelete(int id) { String sql = "delete from t_user where id = ?"; Object[] obj = {id}; return this.setUpdate(sql, obj); }

Processed: 0.015, SQL: 9