1.项目背景
我们来设计一个简单的用户管理系统，具有查看用户，添加用户，删除用户，更新用户的所有功能，并能支持分页显示，以及通过关键词模糊查询的
本项目采用Druid数据库连接池
注意：JDBC和DAO部分本文不予演示，请自行完成此部分代码的编写🐿️
2.展示用户列表
模板页面，showuser.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>用户列表</title>
</head>
<style>
table {
width: 80%;
border-color: white;
}
table tr {
line-height: 30px;
border-color: white;
}
table tr:FIRST-CHILD {
background: #f2f2f2;
}
table tr:nth-child(even) {
background: #d5eeeb;
}
</style>
<script type="text/javascript">
/**
* 删除用户
* @param uid 用户ID信息
*/
function delUser(uid) {
if (confirm('是否确认删除？')) {
window.location.href = 'del.do?id=' + uid;
}
}
/**
* 获取某一页的用户数据
* @param pageNo 页码
*/
function page(pageNo) {
if (pageNo > 0) {
window.location.href = 'showuser?pageNo=' + pageNo;
}
}
</script>
<body>
<form action="showuser" method="post">
<input type="hidden" name="oper" value="search">
查找关键字：<input type="text" name="keyword" th:value="${session.keyword}">
<button type="submit">提 交</button>
</form>
<table>
<tbody>
<tr align="center">
<td>用户名</td>
<td>学校</td>
<td>删除内容</td>
<td>添加内容</td>
</tr>
<tr align="center" th:if="${#lists.isEmpty(session.userList)}">
<td>没有啦</td>
<td>没有啦</td>
<td>没有啦</td>
<td>没有啦</td>
</tr>
<tr align="center" th:unless="${#lists.isEmpty(session.userList)}" th:each="user : ${session.userList}">
<td><a th:text="${user.username}" th:href="@{/edit.do(uid=${user.id})}"></a></td>
<td><a th:text="${user.school}" th:href="@{/edit.do(uid=${user.id})}"></a></td>
<td><a th:onclick="|delUser(${user.id})|">删除</a></td>
<td><a th:href="@{/add.html}">添加</a></td>
</tr>
</tbody>
</table>
<!--分页-->
<div>
<input type="button" value="首 页" th:onclick="|page(1)|">
<input type="button" value="上一页" th:onclick="|page(${session.pageNo - 1})|">
<input type="button" value="下一页" th:onclick="|page(${session.pageNo + 1})|">
<input type="button" value="尾 页" th:onclick="|page(${session.totalPageNo})|">
</div>
</body>
</html>
ShowUserServlet：
/**
* 使用Thymeleaf渲染页面展示user列表
*/
@WebServlet("/showuser")
public class ShowUserServlet extends ViewBaseServlet {
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
doGet(req, resp);
}
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
req.setCharacterEncoding("UTF-8");
HttpSession session = req.getSession();
int pageNo = 1;
// 如果oper为null，说明是通过表单查询按钮点击过来的
// 如果oper是null，说明不是通过表单查询按钮点击过来的
String oper = req.getParameter("oper");
String keyword = null;
if ("search".equals(oper)) {
pageNo = 1;
keyword = req.getParameter("keyword");
if (keyword == null) {
keyword = "";
}
session.setAttribute("keyword", keyword);
} else {
String pageNoStr = req.getParameter("pageNo");
if (pageNoStr != null) {
pageNo = Integer.parseInt(pageNoStr);
}
Object keywordObj = session.getAttribute("keyword");
if (keywordObj != null) {
keyword = (String) keywordObj;
} else {
keyword = "";
}
}
// 将页码保存到session作用域
session.setAttribute("pageNo", pageNo);
UserDAO userDAO = new UserDAO();
List<User> userList = userDAO.getUserListByPageAndKeyword(pageNo, keyword);
// 将userList放到session 作用域
session.setAttribute("userList", userList);
// 得到用户总数
long userCount = userDAO.getUserCount(keyword);
// 得到页数
long totalPageNo = userCount / 5 + 1;
session.setAttribute("totalPageNo", totalPageNo);
// 注意：物理视图名称 = view-prefix + view-suffix
// 这里结合xml文件拼接也就是/showuser.html
super.processTemplate("showuser", req, resp);
}
}
3.添加用户
add.html
<!-- user表添加页面 -->
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>用户添加页面</title>
</head>
<style>
* {
margin: 0;
padding: 0;
}
/*渐变背景样式*/
body {
height: 100vh;
width: 100%;
overflow: hidden;
background-image: linear-gradient(125deg, #F44336, #E91E63, #9C27B0, #3F51B5, #2196F3);
background-size: 400%;
font-family: "montserrat";
animation: bganimation 15s infinite;
}
@keyframes bganimation {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
/*表单样式*/
.form {
width: 85%;
max-width: 600px;
/* max-height:700px;
*/
background-color: rgba(255, 255, 255, .05);
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding: 40px;
border-radius: 10px;
box-shadow: 0 0 5px #000;
text-align: center;
font-family: "微软雅黑";
color: #fff;
}
/*表单标题样式*/
.form h1 {
margin-top: 0;
font-weight: 200;
}
.form .txtb {
border: 1px solid #aaa;
margin: 8px 0;
padding: 12px 18px;
border-radius: 10px;
}
.txtb label {
display: block;
text-align: left;
color: #fff;
font-size: 14px;
}
/*输入框样式*/
.txtb input, .txtb textarea {
width: 100%;
background: none;
border: none;
outline: none;
margin-top: 6px;
font-size: 18px;
color: #fff;
}
/*备注框样式*/
.txtb textarea {
max-height: 300px;
}
/*提交按钮样式*/
.btn {
display: block;
/* background-color:rgba(156,39,176,.5);
*/
padding: 14px 0;
color: #fff;
cursor: pointer;
margin-top: 8px;
width: 100%;
border: 1px solid #aaa;
border-radius: 10px;
}
</style>
<body>
<div class="form">
<form action="add.do" method="post">
<h1>用户信息添加</h1>
<div class="txtb">
<label for="">用户名:</label>
<input type="text" placeholder="请输入用户名" name="username"
th:value="${userInfo.username}"></div>
<div class="txtb">
<label for="">密码:</label>
<input type="text" placeholder="请输入密码" name="password"
th:value="${userInfo.password}"></div>
<div class="txtb">
<label for="">学校:</label>
<input type="text" placeholder="请输入学校" name="school"
th:value="${userInfo.school}">
</div>
<div class="txtb">
<label for="">备注:</label>
<textarea name="shit" id=""></textarea>
</div>
<input type="submit" value="提 交" class="btn" style="color: #E91E63">
</form>
</div>
</body>
</html>
AddUserServlet：
/**
* 向User表中添加数据
*/
@WebServlet("/add.do")
public class AddUserServlet extends ViewBaseServlet {
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
req.setCharacterEncoding("UTF-8");
String username = req.getParameter("username");
String password = req.getParameter("password");
String school = req.getParameter("school");
UserDAO userDAO = new UserDAO();
userDAO.addUserNoId(username, password, school);
resp.sendRedirect("showuser");
}
}
4.删除用户
DelServlet：
/**
* 根据ID删除用户
*/
@WebServlet("/del.do")
public class DelServlet extends ViewBaseServlet {
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
int id = Integer.parseInt(req.getParameter("id"));
UserDAO userDAO = new UserDAO();
userDAO.delUser(id);
resp.sendRedirect("showuser");
}
}
5.修改用户
edit.html：
<!-- user表编辑页面 -->
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>用户编辑页面</title>
</head>
<style>
* {
margin: 0;
padding: 0;
}
/*渐变背景样式*/
body {
height: 100vh;
width: 100%;
overflow: hidden;
background-image: linear-gradient(125deg, #F44336, #E91E63, #9C27B0, #3F51B5, #2196F3);
background-size: 400%;
font-family: "montserrat";
animation: bganimation 15s infinite;
}
@keyframes bganimation {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
/*表单样式*/
.form {
width: 85%;
max-width: 600px;
/* max-height:700px;
*/
background-color: rgba(255, 255, 255, .05);
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding: 40px;
border-radius: 10px;
box-shadow: 0 0 5px #000;
text-align: center;
font-family: "微软雅黑";
color: #fff;
}
/*表单标题样式*/
.form h1 {
margin-top: 0;
font-weight: 200;
}
.form .txtb {
border: 1px solid #aaa;
margin: 8px 0;
padding: 12px 18px;
border-radius: 10px;
}
.txtb label {
display: block;
text-align: left;
color: #fff;
font-size: 14px;
}
/*输入框样式*/
.txtb input, .txtb textarea {
width: 100%;
background: none;
border: none;
outline: none;
margin-top: 6px;
font-size: 18px;
color: #fff;
}
/*备注框样式*/
.txtb textarea {
max-height: 300px;
}
/*提交按钮样式*/
.btn {
display: block;
/* background-color:rgba(156,39,176,.5);
*/
padding: 14px 0;
color: #fff;
cursor: pointer;
margin-top: 8px;
width: 100%;
border: 1px solid #aaa;
border-radius: 10px;
}
</style>
<body>
<div class="form">
<form th:action="@{/update.do}" method="post">
<h1>用户信息修改</h1>
<!--隐藏传递用户ID信息，使用隐藏域-->
<input type="hidden" name="id" th:value="${userInfo.id}">
<div class="txtb">
<label for="">用户名:</label>
<input type="text" placeholder="请输入用户名" name="username"
th:value="${userInfo.username}"></div>
<div class="txtb">
<label for="">密码:</label>
<input type="text" placeholder="请输入密码" name="password"
th:value="${userInfo.password}"></div>
<div class="txtb">
<label for="">学校:</label>
<input type="text" placeholder="请输入学校" name="school"
th:value="${userInfo.school}">
</div>
<div class="txtb">
<label for="">备注:</label>
<textarea name="shit" id=""></textarea>
</div>
<input type="submit" value="提 交" class="btn" style="color: #E91E63">
</form>
</div>
</body>
</html>
EditServlet：
/**
* 编辑user表中的数据
*/
@WebServlet("/edit.do")
public class EditServlet extends ViewBaseServlet {
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
String uidStr = req.getParameter("uid");
if (uidStr != null && !"".equals(uidStr)) {
int uid = Integer.parseInt(uidStr);
UserDAO userDAO = new UserDAO();
User user = userDAO.getUserById(uid);
// 保存到request作用域
req.setAttribute("userInfo", user);
super.processTemplate("edit", req, resp);
}
}
}
6.界面展示
展示用户列表：（此页面支持分页，模糊查询，修改，删除，添加）🦫
用户信息修改：（用户信息添加类似）🦎文章来源：https://www.toymoban.com/news/detail-489144.html
文章来源地址https://www.toymoban.com/news/detail-489144.html
到了这里，关于Javaweb项目案例：一个简单的用户管理系统实现的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
