一、靜態頁面準備
1. user.css
.header {background-color: #f2f2f2;padding: 20px;text-align: center;
}ul {list-style-type: none;margin: 0;padding: 0;overflow: hidden;background-color: #333;
}li {float: left;
}li a {display: block;color: white;text-align: center;padding: 14px 16px;text-decoration: none;
}li a:hover:not(.active) {background-color: #111;
}.active {background-color: #4CAF50;
}form {width: 50%;margin: 0 auto;padding: 20px;border: 1px solid #ddd;border-radius: 4px;
}label {display: block;margin-bottom: 8px;
}input[type="text"], input[type="email"], select {width: 100%;padding: 6px 10px;margin: 8px 0;box-sizing: border-box;border: 1px solid #555;border-radius: 4px;font-size: 16px;
}button[type="submit"] {padding: 10px;background-color: #4CAF50;color: #fff;border: none;border-radius: 4px;cursor: pointer;
}button[type="submit"]:hover {background-color: #3e8e41;
}table {border-collapse: collapse;width: 100%;
}th, td {border: 1px solid #ddd;padding: 8px;text-align: left;
}th {background-color: #f2f2f2;
}tr:nth-child(even) {background-color: #f2f2f2;
}.header {background-color: #f2f2f2;padding: 20px;text-align: center;
}a {text-decoration: none;color: #333;
}.add-button {margin-bottom: 20px;padding: 10px;background-color: #4CAF50;color: #fff;border: none;border-radius: 4px;cursor: pointer;
}.add-button:hover {background-color: #3e8e41;
}(2) user_index.html
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>用戶管理系統</title><link rel="stylesheet" href="user.css" type="text/css"></link>
</head>
<body><div class="header"><h1>用戶管理系統</h1></div><ul><li><a class="active" href="user_list.html">用戶列表</a></li></ul>
</body>
</html>預期效果：
?
?(3) user_list.html
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>用戶列表</title><link rel="stylesheet" href="user.css" type="text/css"></link>
</head>
<body><div class="header"><h1>用戶列表</h1></div><div class="add-button-wrapper"><a class="add-button" href="user_add.html">新增用戶</a></div><table><thead><tr><th>編號</th><th>用戶名</th><th>性別</th><th>郵箱</th><th>操作</th></tr></thead><tbody><tr><td>1</td><td>張三</td><td>男</td><td>zhangsan@powernode.com</td><td>修改刪除</td></tr><tr><td>2</td><td>李四</td><td>女</td><td>lisi@powernode.com</td><td>修改刪除</td></tr></tbody></table>
</body>
</html>?預期效果：
?(4) user_add.html
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>新增用戶</title><link rel="stylesheet" href="user.css" type="text/css"></link>
</head>
<body><h1>新增用戶</h1><form><label>用戶名:</label><input type="text" name="username" required><label>性別:</label><select name="gender" required><option value="">-- 請選擇 --</option><option value="1">男</option><option value="0">女</option></select><label>郵箱:</label><input type="email" name="email" required><button type="submit">保存</button></form>
</body>
</html>預期效果：
(5) user_edit.html
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>修改用戶</title><link rel="stylesheet" href="user.css" type="text/css"></link>
</head>
<body><h1>修改用戶</h1><form><label>用戶名:</label><input type="text" name="username" value="張三" required><label>性別:</label><select name="gender" required><option value="">-- 請選擇 --</option><option value="1" selected>男</option><option value="0">女</option></select><label>郵箱:</label><input type="email" name="email" value="zhangsan@powernode.com" required><button type="submit">修改</button></form>
</body>
</html>?預期效果：
二、SpringMVC環境搭建
1. 創建module：usermgt
2. 添加pom.xml的依賴(打包方式不要忘記改)：spring-webmvc、jakarta.servlet-api、logback-classic、thymeleaf-spring6
3. 創建webapp目錄，添加web支持。
4. 配置web.xml文件：字符編碼過濾器、HTTP請求方式過濾器、前端控制器
注意：先配置字符編碼過濾器，再配置HTTP請求方式過濾器，不然解決不了亂碼問題。
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="https://jakarta.ee/xml/ns/jakartaee"xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation="https://jakarta.ee/xml/ns/jakartaee https://jakarta.ee/xml/ns/jakartaee/web-app_6_0.xsd"version="6.0"><!--字符編碼過濾器--><filter><filter-name>characterEncodingFilter</filter-name><filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class><init-param><param-name>encoding</param-name><param-value>UTF-8</param-value></init-param><init-param><param-name>forceRequestEncoding</param-name><param-value>true</param-value></init-param><init-param><param-name>forceResponseEncoding</param-name><param-value>true</param-value></init-param></filter><filter-mapping><filter-name>characterEncodingFilter</filter-name><url-pattern>/*</url-pattern></filter-mapping><!--HTTP請求方式過濾器--><filter><filter-name>hiddenHttpMethodFilter</filter-name><filter-class>org.springframework.web.filter.HiddenHttpMethodFilter</filter-class></filter><filter-mapping><filter-name>hiddenHttpMethodFilter</filter-name><url-pattern>/*</url-pattern></filter-mapping><!--前端控制器--><servlet><servlet-name>springmvc</servlet-name><servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class><init-param><param-name>contextConfigLocation</param-name><param-value>classpath:springmvc.xml</param-value></init-param><load-on-startup>1</load-on-startup></servlet><servlet-mapping><servlet-name>springmvc</servlet-name><url-pattern>/</url-pattern></servlet-mapping></web-app>?5. 配置springmvc.xml文件：組件掃描、視圖解析器、開啟注解、開啟默認Servlet
<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:mvc="http://www.springframework.org/schema/mvc"xmlns:context="http://www.springframework.org/schema/context"xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans.xsd http://www.springframework.org/schema/mvc https://www.springframework.org/schema/mvc/spring-mvc.xsd http://www.springframework.org/schema/context https://www.springframework.org/schema/context/spring-context.xsd"><!--組件掃描--><context:component-scan base-package="com.powernode.usermgt.controller,com.powernode.usermgt.dao"/><!--視圖解析器--><bean id="thymeleafViewResolver" class="org.thymeleaf.spring6.view.ThymeleafViewResolver"><property name="characterEncoding" value="UTF-8"/><property name="order" value="1"/><property name="templateEngine"><bean class="org.thymeleaf.spring6.SpringTemplateEngine"><property name="templateResolver"><bean class="org.thymeleaf.spring6.templateresolver.SpringResourceTemplateResolver"><property name="prefix" value="/WEB-INF/thymeleaf/"/><property name="suffix" value=".html"/><property name="templateMode" value="HTML"/><property name="characterEncoding" value="UTF-8"/></bean></property></bean></property></bean><!--開啟注解--><mvc:annotation-driven/><!--開啟默認Servlet--><mvc:default-servlet-handler/></beans>三、顯示首頁
在應用的根下新建目錄：static，將user.css文件拷貝進去。將user_index.html拷貝到WEB-INF/thymeleaf目錄下。
需要給user_index.html中的代碼加一下：xmlns:th="http://www.thymeleaf.org"
在spring.xml文件中配置視圖控制器映射：
<!--視圖控制器映射-->
<mvc:view-controller path="/" view-name="user_index"/>測試效果圖
四、實現用戶列表
將user_list.html拷貝到WEB-INF/thymeleaf目錄下。
1. 修改user_index.html中的相關代碼
2. 寫Controller程序
package com.powernode.usermgt.controller;import com.powernode.usermgt.bean.User;
import com.powernode.usermgt.dao.UserDao;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;import java.util.List;@Controller
public class UserController {@Autowiredprivate UserDao userDao;@GetMapping("/user")public String list(Model model){// 獲取所有的用戶List<User> users = userDao.selectAll();// 存儲到request域model.addAttribute("users", users);// 跳轉視圖return "user_list";}
}
?3. 編寫User類和UserDao類
User類
package com.powernode.usermgt.bean;public class User {private Long id;private String name;private String email;private Integer gender;public User() {}public User(Long id, String name, String email, Integer gender) {this.id = id;this.name = name;this.email = email;this.gender = gender;}public Long getId() {return id;}public void setId(Long id) {this.id = id;}public String getName() {return name;}public void setName(String name) {this.name = name;}public String getEmail() {return email;}public void setEmail(String email) {this.email = email;}public Integer getGender() {return gender;}public void setGender(Integer gender) {this.gender = gender;}@Overridepublic String toString() {return "User{" +"id=" + id +", name='" + name + '\'' +", email='" + email + '\'' +", gender=" + gender +'}';}
}
UserDao類
package com.powernode.usermgt.dao;import com.powernode.usermgt.bean.User;
import org.springframework.stereotype.Repository;import java.util.ArrayList;
import java.util.List;@Repository
public class UserDao {private static List<User> users = new ArrayList<>();static {User user1 = new User(10001L, "張三", "zhangsan@powernode.com", 1);User user2 = new User(10002L, "李四", "lisi@powernode.com", 1);User user3 = new User(10003L, "王五", "wangwu@powernode.com", 1);User user4 = new User(10004L, "趙六", "zhaoliu@powernode.com", 0);User user5 = new User(10005L, "錢七", "qianqi@powernode.com", 0);users.add(user1);users.add(user2);users.add(user3);users.add(user4);users.add(user5);}public List<User> selectAll(){return users;}
}
4. 修改user_list.html文件
?
?預期效果：
五、實現新增功能
1. 跳轉新增頁面
（1）在user_list.html中改關于新增用戶有關的代碼
（2）將user_add.html拷貝到thymeleaf目錄下，并進行代碼修改：
?
（3）在springmvc.xml文件中配置視圖控制器映射：（由于沒有數據的交互，因此不需要單獨在控制器寫一個方法，直接依賴<mvc:annotation-driven/>注解的配置代碼）
<mvc:view-controller path="/toSave" view-name="user_add"/>預期效果：
此時，只是跳轉了新增頁面，點擊“保存”會出現404錯誤。當點擊保存時，就產生了數據的交互，此時需要寫一個控制器函數實現。?
2. 點擊“保存”之后，實現新增功能
（1）前端頁面發送POST請求，提交表單，修改user_add.html代碼如下：
（2）編寫控制器UserController
@PostMapping("/user")
public String save(User user){// 保存用戶userDao.save(user);// 重定向到列表return "redirect:/user";
}?注意：保存后，采用重定向的方式跳轉到用戶列表。
（3）將UserDao中的save方法補全
public static Long generateId(){// Stream APILong maxId = users.stream().map(user -> user.getId()).reduce((id1, id2) -> id1 > id2 ? id1 : id2).get();return maxId + 1;
}public void save(User user){// 設置iduser.setId(generateId());// 保存users.add(user);
}StreamAPI 是java8的新特性。
預期效果：
六、實現修改功能
1. 跳轉修改頁面
（1）修改user_list.html
<a th:href="@{'/user/' + ${user.id}}">修改</a>(2) 編寫Controller
@GetMapping("/user/{id}")
public String toUpdate(@PathVariable("id") Long id, Model model){// 根據id查詢用戶信息User user = userDao.selectById(id);// 將對象存儲到request域model.addAttribute("user", user);// 跳轉視圖return "user_edit";
}（3）在UserDao中補全selectById這個方法
public User selectById(Long id){return users.stream().filter(user -> user.getId().equals(id)).findFirst().get();
}（4）將user_edit.html拷貝thymeleaf目錄下，并修改代碼：
?預期效果：
2. 點擊“修改”，實現修改功能
（1）將user_edit.html頁面中的form表單修改一下，添加action，添加method，隱藏于的方式提交請求方式put，隱藏域的方式提交id：
?（2）編寫Controller
@PutMapping("/user")
public String modify(User user){// 更新數據userDao.update(user);// 重定向return "redirect:/user";
}（3）編寫UserDao
public void update(User user){for (int i = 0; i < users.size(); i++) {if(user.getId().equals(users.get(i).getId())){users.set(i, user);break;}}
}預期效果：
?
七、實現刪除功能
1. 在user_list.html頁面添加form表單，并且點擊超鏈接時，應該提交表單，代碼如下：
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head><meta charset="UTF-8"><title>用戶列表</title><link rel="stylesheet" th:href="@{/static/user.css}" type="text/css"></link>
</head>
<body><div class="header"><h1>用戶列表</h1></div><div class="add-button-wrapper"><a class="add-button" th:href="@{/toSave}">新增用戶</a></div><table><thead><tr><th>編號</th><th>用戶名</th><th>性別</th><th>郵箱</th><th>操作</th></tr></thead><tbody><tr th:each="user : ${users}"><td th:text="${user.id}"></td><td th:text="${user.name}"></td><td th:text="${user.gender == 1 ? '男' : '女'}"></td><td th:text="${user.email}"></td><td><a th:href="@{'/user/' + ${user.id}}">修改</a><!--為刪除提供一個鼠標單擊事件--><a th:href="@{'/user/' + ${user.id}}" onclick="del(event)">刪除</a></td></tr></tbody></table><!--為刪除操作準備一個form表單，點擊刪除時提交form表單--><div style="display: none"><form method="post" id="delForm"><input type="hidden" name="_method" value="delete"/></form></div><script>function del(event){// 獲取表單let delForm = document.getElementById("delForm");// 設置表單actiondelForm.action = event.target.href;if(window.confirm("您確定要刪除嗎？")){// 提交表單delForm.submit();}// 阻止超鏈接默認行為event.preventDefault();}</script>
</body>
</html>2. 編寫Controller
@DeleteMapping("/user/{id}")
public String del(@PathVariable("id") Long id){// 刪除userDao.deleteById(id);// 重定向return "redirect:/user";
}3. 編寫UserDao
public void deleteById(Long id){for (int i = 0; i < users.size(); i++) {if(id.equals(users.get(i).getId())){users.remove(i);break;}}
}預期效果：
 淺談多線程和RPC)
:集群架構和集群搭建)
)
