SpringBoot整合thymeleaf实现显示所有用户（二）

这次想要前端通过thymeleaf动态实现显示用户信息的操作
结果演示：
数据库user表数据
在这里插入图片描述
页面展示所有数据

代码布局格式
这里需要一个service，dao，bean，controller，以及实现service的接口、实现dao的接口

UserController .java

@Controller
@RequestMapping("/user")
public class UserController {
@Autowired
    private UsersService userService;
     /**
     * 查询全部用户
     */
    @GetMapping("/findUserAll")
    public String findUserAll(Model model){
        List<Users> list = null;
        try {
            list = this.userService.findUsersAll();
            model.addAttribute("list",list);
        }
        catch (Exception e){
            e.printStackTrace();
            return "error";
        }
        return "showuser";
    }
}

PageController .java

@Controller
public class PageController {
    /**
     * 定义一个页面跳转的方法
     */
    @RequestMapping("/{page}")
    public String showPage(@PathVariable String page){
        System.out.println(page);
        return page;
    }
}

Users .java

public class Users {
    private String userid;
    private String username;
    private String usersex;

    public String getUserid() {
        return userid;
    }

    public void setUserid(String userid) {
        this.userid = userid;
    }

    public String getUsername() {
        return username;
    }

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

    public String getUsersex() {
        return usersex;
    }

    public void setUsersex(String usersex) {
        this.usersex = usersex;
    }
}

UsersService .java

public interface UsersService {
    List<Users> findUsersAll();
}

UserServiceImpl .java

@Service
public class UserServiceImpl implements UsersService {
 @Override
    public List<Users> findUsersAll() {
        return this.usersDao.selectUsersAll();
    }
 }

UsersDao .java

public interface UsersDao {
    List<Users> selectUsersAll();
}

@Repository
public class UsersDaoImpl implements UsersDao {
	@Override
	    public List<Users> selectUsersAll() {
	        String sql = "select * from users";
	        return this.jdbcTemplate.query(sql, new RowMapper<Users>() {
	            /**
	             * 结果集的映射
	             * @param resultSet
	             * @param i
	             * @return
	             * @throws SQLException
	             */
	            @Override
	            public Users mapRow(ResultSet resultSet, int i) throws SQLException {
	                Users users = new Users();
	                users.setUserid(resultSet.getString("userid"));
	                users.setUsername(resultSet.getString("username"));
	                users.setUsersex(resultSet.getString("usersex"));
	                return users;
	            }
	        });
	    }
	  }

后端就是这部分内容了，逻辑结构应该已经很清楚了。现在就是如何在前端显示这些数据
在这里插入图片描述
在resources里的templates中创建一个html，显示所有数据
showuser.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<link rel="shortcut icon" href="../resource/favicon.ico" th:href="@{/static/favicon.ico}">
<head>
    <title>Title</title>
    <style type="text/css">
        body{
            background-color: antiquewhite;
        }
        table{
            margin-top: 5%;
            width: 80%;
            text-align: center;
        }
        table tr th{
            background-color: aliceblue;
        }
        .find{
            height: 30px;
            width: 200px;
            position: absolute;
            left: 20%;
            }
        button{
            height: 30px;
            position: absolute;
            left: 34%;
            top:14.5%;
        }
    </style>
</head>
<body>
    <h1 style="text-align: center">所有用户</h1>
    <a th:href="@{/addUser}">添加用户</a><br>
    <form th:action="@{/user/findUserById}" method="post">
        <input placeholder="请输入你要查找的用户" class="find" name="userid"/>
        <button type="submit">查找</button>
    </form>
    <table border="1"align="center">
        <tr>
            <th>ID</th>
            <th>姓名</th>
            <th>性别</th>
            <th>操作</th>
        </tr>
        <tr th:each="u:${list}">
            <td th:text="${u.userid}"></td>
            <td th:text="${u.username}"></td>
            <td th:text="${u.usersex}"></td>
            <td>
                <a th:href="@{/user/preUpdateUser(id=${u.userid})}">修改</a>
                <a th:href="@{/user/deleteUser(id=${u.userid})}">删除</a>
            </td>
        </tr>
    </table>
</body>
</html>

然后访问http://localhost:8080/user/findUserAll就可以访问数据库中的数据了。
(前提是数据库有此表。我这里没有把pom.xml的配置写出来。以及要引入数据库依赖，thymeleaf依赖)
在这里插入图片描述
有啥不懂的或者代码部分可以交流的可以私聊我

原文链接：https://blog.csdn.net/qq_44807346/article/details/109862946