Spring MVC 中 使用 RESTFul 实现用户管理系统

1. Spring MVC 中 使用 RESTFul 实现用户管理系统

文章目录

  • 1. Spring MVC 中 使用 RESTFul 实现用户管理系统
  • 2. 静态页面准备
    • 2.1 user.css
    • 2.2 user_index.html
    • 2.3 user_list.html
    • 2.4 user_add.html
    • 2.5 user_edit.html
  • 3. SpringMVC环境搭建
    • 3.1 创建module:usermgt
    • 3.2 添加web支持
    • 3.3 配置web.xml文件
    • 3.4 配置springmvc.xml文件
  • 4. 对应具体功能的实现
    • 4.1 显示首页
    • 4.2 实现用户列表
    • 4.3 实现新增功能
      • 4.3.1 跳转到新增页面
      • 4.3.2 实现新增功能
    • 4.4 跳转到修改页面
    • 4.5 实现修改功能
    • 4.6 实现删除功能
  • 5. 补充:
  • 最后:

2. 静态页面准备

2.1 user.css

文件包括:user.css、user_index.html、user_list.html、user_add.html、user_edit.html。代码如下:
在这里插入图片描述

.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.2 user_index.html

在这里插入图片描述


在这里插入图片描述

在这里插入图片描述

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title>用户管理系统</title>
  <link rel="stylesheet" th:href="@{static/css/user.css}" type="text/css"></link>
</head>
<body>
<div class="header">
  <h1>用户管理系统</h1>
</div>
<ul>
  <li><a class="active" th:href="@{/user}">用户列表</a></li>
</ul>
</body>
</html>

2.3 user_list.html

在这里插入图片描述


在这里插入图片描述

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>用户列表</title>
    <link rel="stylesheet" th:href="@{static/css/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="@{/toAdd}">新增用户</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.username}"></td>
        <td th:text="${user.sex == 1 ? '男' : '女'}"></td>
        <td th:text="${user.email}"></td>
        <td>
            <!--            将 id 传过去,进行修改-->
            <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">
        <!--        删除是 delte 请求-->
        <input type="hidden" name="_method" value="delete"/>
    </form>
</div>

<script>
    function del(event) {
        // 获取表单
        let delForm = document.getElementById("delForm");
        // 设置表单action ev
        delForm.action = event.target.href;
        if (window.confirm("您确定要删除吗?")) {
            // 提交表单
            delForm.submit();
        }
        // 阻止超链接默认行为
        event.preventDefault();
    }
</script>


<!--java.lang.IllegalArgumentException: Name for argument of type [java.lang.Long] not specified, and parameter name information not available via reflection. Ensure that the compiler uses the '-parameters' flag.-->

</body>
</html>

2.4 user_add.html

在这里插入图片描述


在这里插入图片描述

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8"  >
    <title>新增用户</title>
    <link rel="stylesheet" th:href="@{static/css/user.css}" type="text/css"></link>
</head>
<body>
<h1>新增用户</h1>
<form th:action="@{/user}" method="post">
    <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>

2.5 user_edit.html

在这里插入图片描述


在这里插入图片描述

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8"  >
    <title>修改用户</title>
    <link rel="stylesheet"th:href="@{static/css/user.css}"type="text/css"></link>
</head>
<body>
<h1>修改用户</h1>
<form th:action="@{/user}" method="post">

    <!--隐藏域的方式设置请求方式为put请求-->
<!--    修改是 put 请求-->
    <input type="hidden" name="_method" value="put">
    <!--隐藏域的方式提交id-->
    <input type="hidden" name="id" th:value="${user.id}">

    <label>用户名:</label>
    <input type="text" name="username" th:value="${user.username}" required>

    <label>性别:</label>
    <select name="sex" required>
        <option value="">-- 请选择 --</option>
        <option value="1" th:field="${user.sex}"></option>
        <option value="0" th:field="${user.sex}"></option>
    </select>

    <label>邮箱:</label>
    <input type="email" name="email" th:value="${user.email}" required>

    <button type="submit">修改</button>
</form>
</body>
</html>

3. SpringMVC环境搭建

3.1 创建module:usermgt

在这里插入图片描述

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>

    <groupId>com.powernode</groupId>
    <artifactId>usermgt</artifactId>
    <version>1.0-SNAPSHOT</version>
    <packaging>war</packaging>

    <dependencies>
        <!--springmvc-->
        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-webmvc</artifactId>
            <version>6.1.5</version>
        </dependency>
        <!--servlet api-->
        <dependency>
            <groupId>jakarta.servlet</groupId>
            <artifactId>jakarta.servlet-api</artifactId>
            <version>6.0.0</version>
        </dependency>
        <!--logback-->
        <dependency>
            <groupId>ch.qos.logback</groupId>
            <artifactId>logback-classic</artifactId>
            <version>1.5.3</version>
        </dependency>
        <!--thymeleaf+spring6整合依赖-->
        <dependency>
            <groupId>org.thymeleaf</groupId>
            <artifactId>thymeleaf-spring6</artifactId>
            <version>3.1.2.RELEASE</version>
        </dependency>
    </dependencies>
    
    <properties>
        <maven.compiler.source>21</maven.compiler.source>
        <maven.compiler.target>21</maven.compiler.target>
        <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
    </properties>

</project>

3.2 添加web支持

在这里插入图片描述

3.3 配置web.xml文件

<?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>

注意两个过滤器Filter的配置顺序:

  • 先配置 CharacterEncodingFilter

  • 再配置 HiddenHttpMethodFilter

不然,可能获取的的中文信息数据是乱码

3.4 配置springmvc.xml文件

在这里插入图片描述

<?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>

在WEB-INF目录下新建:thymeleaf目录
创建 package:

在这里插入图片描述

4. 对应具体功能的实现

4.1 显示首页

在应用的根下新建目录:static,将user.css文件拷贝进去。

在这里插入图片描述

将user_index.html拷贝到WEB-INF/thymeleaf目录下:

在这里插入图片描述

代码有两处需要修改:

在这里插入图片描述

重要:在springmvc.xml文件中配置视图控制器映射:

<!--视图控制器映射-->
<mvc:view-controller path="/" view-name="user_index"/>

部署,启动服务器,测试

在这里插入图片描述


4.2 实现用户列表

修改user_index.html中的超链接:

<!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>
  <ul>
    <li><a class="active" th:href="@{/user}">用户列表</a></li>
  </ul>
</body>
</html>

编写bean:User

在这里插入图片描述

package com.rainbowsea.usermgt.bean;

public class User {

    /**
     * 用户编号
     */
    private Long id;


    /**
     * 用户名
     */
    private String username;


    /**
     * 性别
     * 1 表示男
     * 2 表示女
     */
    private Integer sex;


    /**
     * 邮箱
     */
    private String email;

    public User() {
    }


    public User(Long id, String username, Integer sex, String email) {
        this.id = id;
        this.username = username;
        this.sex = sex;
        this.email = email;
    }


    @Override
    public String toString() {
        return "User{" +
                "id=" + id +
                ", username='" + username + '\'' +
                ", sex=" + sex +
                ", email='" + email + '\'' +
                '}';
    }


    public Long getId() {
        return id;
    }

    public void setId(Long id) {
        this.id = id;
    }

    public String getUsername() {
        return username;
    }

    public void setUsername(String username) {
        this.username = username;
    }

    public Integer getSex() {
        return sex;
    }

    public void setSex(Integer sex) {
        this.sex = sex;
    }

    public String getEmail() {
        return email;
    }

    public void setEmail(String email) {
        this.email = email;
    }
}

编写UserDao,提供selectAll方法:

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;
    }
}

编写控制器UserController:

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 {

    @Autowired
    private UserDao userDao;

    @GetMapping("/user")
    public String list(Model model){
        // 获取所有的用户
        List<User> users = userDao.selectAll();
        // 存储到request域
        model.addAttribute("users", users);
        // 跳转视图
        return "user_list";
    }
}

将user_list.html拷贝到thymeleaf目录下,并进行代码修改,显示用户列表:

<!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" href="user_add.html">新增用户</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 href="">修改</a>
          <a href="">删除</a>
        </td>
      </tr>

    </tbody>
  </table>
</body>
</html>

测试结果:

在这里插入图片描述

4.3 实现新增功能

4.3.1 跳转到新增页面

在用户列表页面,修改新增用户的超链接:

在这里插入图片描述

将user_add.html拷贝到thymeleaf目录下,并进行代码修改如下:

<!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>
  <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>

在springmvc.xml文件中配置视图控制器映射

<mvc:view-controller path="/toSave" view-name="user_add"/>

启动服务器测试:

在这里插入图片描述

4.3.2 实现新增功能

前端页面发送POST请求,提交表单,user_add.html代码如下:

<!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>
  <h1>新增用户</h1>
  <form th:action="@{/user}" method="post">
    <label>用户名:</label>
    <input type="text" name="name" 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>

编写控制器UserController:

@PostMapping("/user")
public String save(User user){
    // 保存用户
    userDao.save(user);
    // 重定向到列表
    return "redirect:/user";
}

注意:保存成功后,采用重定向的方式跳转到用户列表。

编写UserDao:

public static Long generateId(){
    // Stream API
    Long maxId = users.stream().map(user -> user.getId()).reduce((id1, id2) -> id1 > id2 ? id1 : id2).get();
    return maxId + 1;
}

public void save(User user){
    // 设置id
    user.setId(generateId());
    // 保存
    users.add(user);
}

注意:单独写了一个方法生成id,内部使用了Stream API,不会这块内容的可以看老杜最新发布的2024版JavaSE。

启动服务器测试:

在这里插入图片描述

在这里插入图片描述


4.4 跳转到修改页面

修改user_list.html中修改超链接:

<a th:href="@{'/user/' + ${user.id}}">修改</a>

编写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";
}

编写UserDao:

public User selectById(Long id){
    return users.stream().filter(user -> user.getId().equals(id)).findFirst().get();
}

将user_edit.html拷贝thymeleaf目录下,并修改代码如下:

<!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>
  <h1>修改用户</h1>
  <form>
    <label>用户名:</label>
    <input type="text" name="username" th:value="${user.name}" required>

    <label>性别:</label>
    <select name="gender" required>
      <option value="">-- 请选择 --</option>
      <option value="1" th:field="${user.gender}"></option>
      <option value="0" th:field="${user.gender}"></option>
    </select>

    <label>邮箱:</label>
    <input type="email" name="email" th:value="${user.email}" required>

    <button type="submit">修改</button>
  </form>
</body>
</html>

启动服务器测试:

在这里插入图片描述


4.5 实现修改功能

将user_edit.html页面中的form表单修改一下,添加action,添加method,隐藏域的方式提交请求方式put,隐藏域的方式提交id:

<form th:action="@{/user}" method="post">
  <!--隐藏域的方式设置请求方式为put请求-->
  <input type="hidden" name="_method" value="put">
  <!--隐藏域的方式提交id-->
  <input type="hidden" name="id" th:value="${user.id}">

  <label>用户名:</label>
  <input type="text" name="name" th:value="${user.name}" required>

  <label>性别:</label>
  <select name="gender" required>
    <option value="">-- 请选择 --</option>
    <option value="1" th:field="${user.gender}"></option>
    <option value="0" th:field="${user.gender}"></option>
  </select>

  <label>邮箱:</label>
  <input type="email" name="email" th:value="${user.email}" required>

  <button type="submit">修改</button>
</form>

编写Controller:

@PutMapping("/user")
public String modify(User user){
    // 更新数据
    userDao.update(user);
    // 重定向
    return "redirect:/user";
}

编写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;
        }
    }
}

启动服务器测试:

在这里插入图片描述

在这里插入图片描述


4.6 实现删除功能

删除应该发送DELETE请求,要模拟DELETE请求,就需要使用表单方式提交。因此我们点击删除超链接时需要采用表单方式提交。 在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");
      // 设置表单action
      delForm.action = event.target.href;
      if(window.confirm("您确定要删除吗?")){
        // 提交表单
        delForm.submit();
      }
      // 阻止超链接默认行为
      event.preventDefault();
    }
  </script>
</body>
</html>

编写Controller:

@DeleteMapping("/user/{id}")
public String del(@PathVariable("id") Long id){
    // 删除
    userDao.deleteById(id);
    // 重定向
    return "redirect:/user";
}

编写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;
        }
    }
}

启动服务器测试:

在这里插入图片描述

在这里插入图片描述


5. 补充:

完整的 Controller类的内容:

package com.rainbowsea.usermgt.controller;


import com.rainbowsea.usermgt.bean.User;
import com.rainbowsea.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.PathVariable;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;

import java.util.List;

@Controller  // 交给 Spring IOC 容器管理
public class UserController {

    @Autowired  // 自动赋值
    private UserDao userDao;  // Could not autowire. No beans of 'UserDao' type found.

    @RequestMapping(value = "/user", method = RequestMethod.GET)
    public String list(Model model) {
        // 查询数据库,获取用户列表List集合
        List<User> users = userDao.selectAll();
        // 将用户列表存储到 request 域当中
        model.addAttribute("users", users);
        // 转发到视图
        return "user_list";
    }


    @RequestMapping(value = "/user", method = RequestMethod.POST)
    public String save(User user) {
        // 调用 userDao保存用户信息
        userDao.insert(user);
        // 重定向到用户列表页面(重新让浏览器发送一次全新的请求,去请求列表页面)
        return "redirect:/user";
    }


    @RequestMapping(value = "/user/{id}", method = RequestMethod.GET)
    public String detail(@PathVariable(value = "id") Long id, Model model) {
        // 通过 id 查找用户信息
        User user = userDao.selectById(id);
        // 将用户休息存储到 request 域当中
        model.addAttribute("user", user);

        // 转发到视图
        return "user_edit";
    }


    @RequestMapping(value = "/user", method = RequestMethod.PUT)
    public String modify(User user) {
        // 修改用户信息
        userDao.upate(user);
        // 重定向列表页面
        return "redirect:/user";
    }



    @RequestMapping(value = "/user/{id}",method = RequestMethod.DELETE)
    public String del(@PathVariable(value = "id") Long id) {
        // 调用 dao删除用户
        userDao.deleteByid(id);

        // 重定向到列表
        return "redirect:/user";
    }

}

完整的 UserDao 类内容:

package com.rainbowsea.usermgt.dao;

import com.rainbowsea.usermgt.bean.User;
import org.springframework.stereotype.Controller;
import org.springframework.stereotype.Repository;

import java.util.ArrayList;
import java.util.List;


@Repository  // 交给 Spring IOC 容器管理
public class UserDao {
    private static List<User> users = new ArrayList<>();


    static {
        // 类加载是初始化数据
        // 创建 User 对象
        User user1 = new User(1001L, "张三", 2, "zhangsan@rainbowsea.com");
        User user2 = new User(1002L, "李四", 2, "lisin@rainbowsea.com");
        User user3 = new User(1003L, "李华", 2, "lihua@rainbowsea.com");
        User user4 = new User(1004L, "小红", 1, "xiaohong@rainbowsea.com");
        User user5 = new User(1005L, "小智", 1, "xiaozhi@rainbowsea.com");
        users.add(user1);
        users.add(user2);
        users.add(user3);
        users.add(user4);
        users.add(user5);

        // 将 User 对象存储到 List 集合中

    }

    /**
     * 查询所有的用户信息
     *
     * @return
     */
    public List<User> selectAll() {
        return users;
    }

    /**
     * 专门生成 ID的
     * 找到其中的最大值  + 1
     *
     * @return
     */
    public Long generateld() {
        // 使用 Steam API
        Long maxId = users.stream().map(user -> user.getId()).reduce((id1, id2) -> id1 > id2 ? id1 : id2).get();

        return maxId + 1;
    }

    /**
     * 保存用户信息
     *
     * @param user
     */
    public void insert(User user) {
        // 生成 id
        Long id = generateld();
        // 给 user 对象 id 属性赋值
        user.setId(id);
        // 保存
        users.add(user);
    }


    /**
     * 根据 id 查询用户信息
     *
     * @param id
     * @return
     */
    public User selectById(Long id) {
        // Steam API
        User user2 = users.stream().filter(user -> user.getId().equals(id)).findFirst().get();
        return user2;
    }


    /**
     * 修改用户信息
     * @param user
     */
    public void upate(User user) {
        for (int i = 0; i < users.size(); i++) {
            if(users.get(i).getId().equals(user.getId())) {
                users.set(i,user);
                return;
            }
        }
    }


    /**
     * 删除用户信息
     * @param id
     */
    public void deleteByid(Long id) {
        for (int i = 0; i < users.size(); i++) {
            if(users.get(i).getId().equals(id)) {
                // 移除
                users.remove(i);
                return;
            }
        }
    }
}

最后:

“在这个最后的篇章中,我要表达我对每一位读者的感激之情。你们的关注和回复是我创作的动力源泉,我从你们身上吸取了无尽的灵感与勇气。我会将你们的鼓励留在心底,继续在其他的领域奋斗。感谢你们,我们总会在某个时刻再次相遇。”
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/772488.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

解决mysql数据库连接报错:Authentication plugin ‘caching_sha2_password‘ cannot be loaded

解决mysql数据库连接报错&#xff1a;Authentication plugin ‘caching_sha2_password’ cannot be loaded OperationalError: (2059, “Authentication plugin ‘caching_sha2_password’ cannot be loaded: /usr/lib/mysql/plugin/caching_sha2_password.so: cannot open sha…

人脸重建迁移攻击FRTA:绕过各种未见过的面部识别系统

随着人脸识别系统在安全关键环境中的部署日益增多&#xff0c;威胁行为者正在开发针对各种攻击点的复杂攻击策略。在这些攻击策略中&#xff0c;面部重建攻击是一个主要的威胁。面部重建攻击的主要目的是创建伪造的生物特征图像&#xff0c;这些图像类似于存储的生物特征模板中…

vue中数组出现__ob__: Observer属性,导致不能正确使用问题解决

直接上图&#xff0c;如下图&#xff0c;数组中出现__ob__: Observer属性&#xff0c;导致无法取值。 解决方案为&#xff1a;JSON.parse(JSON.stringify(数组变量名))深拷贝数组&#xff0c;重新生成一个可枚举数组。 // 处理代码如let tempIds JSON.parse(JSON.stringify(i…

实现统计n个数以下质数的个数

#define _CRT_SECURE_NO_WARNINGS #include <stdio.h>int main() {int n 0;scanf("%d", &n);int sum 0;for (int i 1; i < n; i){for (int j 2; j < i; j) {if (i % j 0){sum;break;}}}printf("%d", n - sum-1);return 0; } n为输…

yum命令提示 错误:rpmdb: BDB0113 Thread/process 4153/139708200269632

一、报错信息 [rootDawn yum.repos.d]# yum clean all 错误&#xff1a;rpmdb: BDB0113 Thread/process 4153/139708200269632 failed: BDB1507 Thread died in Berkeley DB library 错误&#xff1a;db5 错误(-30973) 来自 dbenv->failchk&#xff1a;BDB0087 DB_RUNRECOVE…

记录通过Cloudflare部署属于自己的docker镜像源

引言 由于最近国内无法正常拉取docker镜像&#xff0c;然而找了几个能用的docker镜像源发现拉取回来的docker镜像不是最新的版本&#xff0c;部署到Cloudflare里Workers 和 Pages&#xff0c;拉取docker 镜像成功&#xff0c;故记录部署过程。 部署服务 登录Cloudflare后&…

鸿蒙开发HarmonyOS NEXT (三) 熟悉ArkTs

一、自定义组件 1、自定义组件 自定义组件&#xff0c;最基础的结构如下&#xff1a; Component struct Header {build() {} } 提取头部标题部分的代码&#xff0c;写成自定义组件。 1、新建ArkTs文件&#xff0c;把Header内容写好。 2、在需要用到的地方&#xff0c;导入…

如视“VR+AI”实力闪耀2024世界人工智能大会

7月4日&#xff0c;2024世界人工智能大会暨人工智能全球治理高级别会议&#xff08;以下简称为“WAIC 2024”&#xff09;在上海盛大开幕&#xff0c;本届大会由外交部、国家发展和改革委员会、教育部等部门共同主办&#xff0c;围绕“以共商促共享 以善治促善智”主题&#xf…

算法力扣刷题 三十一【150. 逆波兰表达式求值】

前言 栈和队列篇。 记录 三十一【150. 逆波兰表达式求值】 一、题目阅读 给你一个字符串数组 tokens &#xff0c;表示一个根据 逆波兰表示法 表示的算术表达式。 请你计算该表达式。返回一个表示表达式值的整数。 注意&#xff1a; 有效的算符为 、-、* 和 / 。 每个操作…

初尝PaddleOCR识别图片中的文字

引言 PaddleOCR是一个基于飞桨深度学习框架的OCR工具包&#xff0c;它集成了丰富的文字检测、识别和后处理算法&#xff0c;能够高效、准确地识别出图片中的文字。 说明 OpenVINO.NET是一个由开源开发者sdcb发布的&#xff0c;一个个强大的工具集&#xff0c;通过优化神经网…

科普文:Linux服务器性能调优概叙

概叙 Java web应用性能分析之服务端慢和优化概叙_cpu飙高java-CSDN博客 Java web应用性能分析之【CPU飙升分析概述】_web页面性能分析cpu占满是因为死循环,还是循环过多-CSDN博客 在我们的软件服务中&#xff0c;软件部署的服务器&#xff0c;一般都是linux服务器&#xff0c…

【每天学会一个渗透测试工具】SQLmap安装教程及使用

&#x1f31d;博客主页&#xff1a;泥菩萨 &#x1f496;专栏&#xff1a;Linux探索之旅 | 网络安全的神秘世界 | 专接本 | 每天学会一个渗透测试工具 ✨SQLmap简介 Sqlmap是一款开源的渗透测试工具 &#x1f680;下载及安装 下载地址&#xff1a;http://sqlmap.org/ windo…

两个Activity之间切换时UI部分重叠

书籍 《第一行代码 Android》第三版 开发 环境 Android Studio Jellyfish | 2023.3.1 setContentView android studio自动生成的SecondActivity.kt中自动生成的代码中已经绑定了second_layout.xml的布局资源&#xff0c;通过代码&#xff1a;setContentView(R.layout.secon…

windows@资源管理器中的地址栏@访问共享文件夹的各种方法@管理共享文件夹

文章目录 资源管理器中的地址栏可以访问什么访问共享文件夹&#x1f47a;UNC路径资源管理器打开共享文件夹纯命令行方式访问共享文件夹 共享文件夹相关操作查看所有已经共享的文件夹&#x1f47a;停止某个文件的共享 共享文件夹的访问控制补充匿名访问问题&#x1f60a;强制启用…

【Linux】高级IO——五种IO模型和基本概念 ,非阻塞IO,fcntl,实现非阻塞IO,同步通信和异步通信

文章目录 Linux高级IO1. 五种IO模型1.1 阻塞IO1.2 非阻塞IO1.3 信号驱动IO1.4 IO多路转接1.5 异步IO 2. 同步通信和异步通信3. 阻塞和非阻塞 Linux高级IO 1. 五种IO模型 IO是什么&#xff1f; IO是计算机领域中的缩写&#xff0c;指的是输入/输出&#xff08;Input/Output&…

【vue3|第15期】Vue3模板语法入门指南

日期:2024年7月2日 作者:Commas 签名:(ง •_•)ง 积跬步以致千里,积小流以成江海…… 注释:如果您觉得有所帮助,帮忙点个赞,也可以关注我,我们一起成长;如果有不对的地方,还望各位大佬不吝赐教,谢谢^ - ^ 1.01365 = 37.7834;0.99365 = 0.0255 1.02365 = 1377.4083…

上海网站建设如何做

上海是中国最繁华的城市之一&#xff0c;作为全国的经济、文化和科技中心&#xff0c;网站建设在上海变得越来越重要。如何做好上海网站建设&#xff0c;让网站更加吸引人&#xff0c;成为企业和个人宣传自身的重要平台呢&#xff1f; 首先&#xff0c;要有清晰的定位和目标。在…

IT之旅启航:高考后IT专业预习全攻略

✨作者主页&#xff1a; Mr.Zwq✔️个人简介&#xff1a;一个正在努力学技术的Python领域创作者&#xff0c;擅长爬虫&#xff0c;逆向&#xff0c;全栈方向&#xff0c;专注基础和实战分享&#xff0c;欢迎咨询&#xff01; 您的点赞、关注、收藏、评论&#xff0c;是对我最大…

鸿蒙开发:Universal Keystore Kit(密钥管理服务)【密钥生成介绍及算法规格】

密钥生成介绍及算法规格 当业务需要使用HUKS生成随机密钥&#xff0c;并由HUKS进行安全保存时&#xff0c;可以调用HUKS的接口生成密钥。 注意&#xff1a; 密钥别名中禁止包含个人数据等敏感信息。 开发前请熟悉鸿蒙开发指导文档&#xff1a;gitee.com/li-shizhen-skin/harm…

Java实现电子围栏的小例子

主要需求是实现一个电子围栏判断的小例子其中包括前端和后端的demo代码 引入对应的依赖库 <!--jts库通常用于几何计算和表示地理空间数据--> <dependency><groupId>org.locationtech.jts</groupId><artifactId>jts-core</artifactId><…