1.項目背景
我們來設(shè)計一個簡單的用戶管理系統(tǒng)，具有查看用戶，添加用戶，刪除用戶，更新用戶的所有功能，并能支持分頁顯示，以及通過關(guān)鍵詞模糊查詢的
本項目采用Druid數(shù)據(jù)庫連接池
注意：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('是否確認(rèn)刪除？')) {
window.location.href = 'del.do?id=' + uid;
}
}
/**
* 獲取某一頁的用戶數(shù)據(jù)
* @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">
查找關(guān)鍵字：<input type="text" name="keyword" th:value="${session.keyword}">
<button type="submit">提 交</button>
</form>
<table>
<tbody>
<tr align="center">
<td>用戶名</td>
<td>學(xué)校</td>
<td>刪除內(nèi)容</td>
<td>添加內(nèi)容</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);
// 得到用戶總數(shù)
long userCount = userDAO.getUserCount(keyword);
// 得到頁數(shù)
long totalPageNo = userCount / 5 + 1;
session.setAttribute("totalPageNo", totalPageNo);
// 注意：物理視圖名稱 = view-prefix + view-suffix
// 這里結(jié)合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;
}
/*表單標(biāo)題樣式*/
.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="">學(xué)校:</label>
<input type="text" placeholder="請輸入學(xué)校" 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表中添加數(shù)據(jù)
*/
@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：
/**
* 根據(jù)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;
}
/*表單標(biāo)題樣式*/
.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="">學(xué)校:</label>
<input type="text" placeholder="請輸入學(xué)校" 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表中的數(shù)據(jù)
*/
@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.界面展示
展示用戶列表：（此頁面支持分頁，模糊查詢，修改，刪除，添加）??
用戶信息修改：（用戶信息添加類似）??文章來源：http://www.zghlxwxcb.cn/news/detail-489144.html
文章來源地址http://www.zghlxwxcb.cn/news/detail-489144.html
到了這里，關(guān)于Javaweb項目案例：一個簡單的用戶管理系統(tǒng)實現(xiàn)的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
