注：这是一个简单的展示数据在前端的功能；在后期，我会继续分享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">
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<title>用户登录</title>
<!-- Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
<!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
<!--[if lt IE 9]>
<script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
<![endif]-->
</head>
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
<!-- 导入用户自定义css -->
<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">
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<title>用户登录</title>
<!-- Bootstrap -->
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"
rel="stylesheet">
<!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
<!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
<!--[if lt IE 9]>
<script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
<![endif]-->
</head>
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script
src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<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">
<!-- Brand and toggle get grouped for better mobile display -->
<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>
<!-- Collect the nav links, forms, and other content for toggling -->
<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>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</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);
}
7793
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
