一、静态页面准备
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)
:集群架构和集群搭建)
)
