web 实验-后台管理系统
# 330.web 实验-后台管理系统
接下来我们整合 Thymeleaf 来整合一个新的项目
# 新建项目
为了方便，我们使用 Spring Initializr
为了方便，先新建项目，然后再修改 SpringBoot 的版本；这里先选择 2.7.14，并添加 Web 开发相关的依赖，以及 Thymeleaf 的：
然后我们的项目就创建好了
# 新增配置文件 application.yml
默认情况下是会生成 properties 的配置文件，我习惯用 yml 了，因此新建了一个，并将端口改为 9999
server:
port: 9999
2
# 静态资源准备
由于本系列教程的重点是 SpringBoot，因此这里不从头开始编写静态资源文件，而是直接提供。读者可以去 Gitee (opens new window) 或 GitHub (opens new window) 上下载目录：前端资源文件 demo
下载完后，将里面的 css、fonts、images 和 js 目录，copy 到自己项目中的 src/main/resources/static 目录中：
# 新增 controller
我们先将前端资源文件 demo 文件夹中的 login.html，copy 到 src/main/resources/templates 中。
然后新增一个 controller，用来跳转到登录页：
package com.peterjxl.learnspringbootwebadmin.controller;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
@Controller
public class IndexController {
/**
* 登录页面
* @return
*/
@GetMapping(value = {"/", "/login"})
public String loginPage(){
return "login";
}
}
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
访问测试：
# 新增登录请求
先将前端资源文件 demo 文件夹中的 index.html，copy 到 src/main/resources/templates 中，并改名为 main.html。
接下来新增一个方法，用来校验 login 页面提交的数据，成功后跳转到首页
@PostMapping("/login")
public String main(String username, String password){
return "main";
}
2
3
4
打开 login.html 中，添加 th 的命名空间
<html lang="en" xmlns:th="http://www.thymeleaf.org">
登录的请求原先是发送到 index.html（第 26 行）：
<form class="form-signin" action="index.html">
我们用 @{} 的语法，改为发送到 login 路径：@{} 会自动拼接我们的项目路径（如有）
<form class="form-signin" action="index.html" method="post" th:action="@{/login}">
然后重启，我们随便输入用户名和密码，点击登录，可以正常登录：
# 表单重复提交的问题
登录后，如果我们刷新，浏览器会让我们确认重新提交表单：
原因分析：我们之前是转发，也就是接受 login 请求，然后提交表单，并返回 main.html。我们点击刷新，也是
解决方法：重定向到 main 页面。
@PostMapping("/login")
public String main(String username, String password){
return "redirect:/main.html";
}
2
3
4
然后新增一个 main 页面的请求：
@GetMapping("/main.html")
public String mainPage(){
return "main";
}
2
3
4
重启，然后测试，可以看到能正常登录，并且登录后刷新，也没问题
注意：我们是不能直接访问 templates 里的文件的，必须经过模板引擎渲染，才能访问；能直接访问的是 static 目录下的文件
# 校验是否登录
此时有一个新的问题：一般来说，是登录成功后才跳转到 main 页面，但现在没有登录，也能直接访问 http://localhost: 9999/main.html，因此我们得先判断是否登录。为了方便模拟，我们新增一个 Bean：
package com.peterjxl.learnspringbootwebadmin.bean;
import lombok.Data;
@Data
public class User {
private String userName;
private String password;
}
2
3
4
5
6
7
8
在 login.html 中，给表单添加 name 属性，并且添加一个 label 标签，用来显示错误信息：
<label style="color:red" th:text="${msg}" ></label>
<input type="text" name="userName" class="form-control" placeholder="User ID" autofocus>
<input type="password" name="password" class="form-control" placeholder="Password">
2
3
登录的方法中，存储用户信息：
@PostMapping("/login")
public String main(User user, HttpSession session, Model model){
if(StringUtils.hasLength(user.getUserName()) && StringUtils.hasLength(user.getPassword())){
session.setAttribute("msg", "用户名或密码不能为空");
return "redirect:/main.html";
}else {
model.addAttribute("msg", "用户名或密码错误");
return "login";
}
}
2
3
4
5
6
7
8
9
10
在首页的方法中，则加上判断是否登录的逻辑：
@GetMapping("/main.html")
public String mainPage(HttpSession session, Model model){
Object loginUser = session.getAttribute("loginUser");
if(loginUser != null) {
return "main";
}else {
model.addAttribute("msg", "请重新登录");
return "/login";
}
}
2
3
4
5
6
7
8
9
10
不可能为每个方法都写校验，一般是用拦截器、过滤器等，这里只是简单处理
测试：现在我们来测试，首先不输入账户密码，不能登录：
如果直接访问 http://localhost: 9999/main.html，则会跳转回 login 页面：
# 修改首页的登录名
登录后，默认右上角会显示登录名：
我们修改其为 User 用户的登录名；这里修改 main 页面的 370 行，改为 Thymeleaf 语法：
<a href="#" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
<img src="images/photos/user-avatar.png" alt="" />
[[${session.loginUser.userName}]]
<span class="caret"></span>
</a>
2
3
4
5
ps：[[]] 是 Thymeleaf 的行内写法
重新登录，能正常显示：
# 源码
已将本文源码上传到 Gitee (opens new window) 或 GitHub (opens new window) 的分支 demo1，读者可以通过切换分支来查看本文的示例代码
