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,读者可以通过切换分支来查看本文的示例代码