Springboot-cli 开发脚手架系列
Springboot整合thymeleaf登录案例，及thymeleaf常用语法使用示例（附源码下载）
简介
- Thymeleaf 是新一代 Java 模板引擎
- 与 Velocity、FreeMarker 等传统 Java 模板引擎不同，Thymeleaf 支持 HTML 原型，其文件后缀为“.html”，因此它可以直接被浏览器打开，此时浏览器会忽略未定义的 Thymeleaf 标签属性，展示 thymeleaf 模板的静态页面效果。
- 通过 Web 应用程序访问时，Thymeleaf 会动态地替换掉静态内容，使页面动态显示。
- Thymeleaf 模板引擎具有以下特点：
- 动静结合：Thymeleaf 既可以直接使用浏览器打开，查看页面的静态效果，也可以通过 Web 应用程序进行访问，查看动态页面效果。
- 开箱即用：Thymeleaf 提供了 Spring 标准方言以及一个与 SpringMVC 完美集成的可选模块，可以快速的实现表单绑定、属性编辑器、国际化等功能。
- 多方言支持：它提供了 Thymeleaf 标准和 Spring 标准两种方言，可以直接套用模板实现 JSTL、 OGNL 表达式；必要时，开发人员也可以扩展和创建自定义的方言。
- 与 SpringBoot 完美整合：SpringBoot 为 Thymeleaf 提供了的默认配置，并且还为 Thymeleaf 设置了视图解析器，因此 Thymeleaf 可以与 Spring Boot 完美整合。
前言
我们致力于让开发者快速搭建基础环境并让应用跑起来,提供使用示例供使用者参考，让初学者快速上手。
本博客项目源码地址：
1. 环境
pom.xml
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<dependency>
<groupId>org.projectlombok</groupId>
<artifactId>lombok</artifactId>
<optional>true</optional>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-test</artifactId>
<scope>test</scope>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
application.yml
server:
port: 9999
servlet:
session:
# 让Tomcat只能从COOKIE中获取会话信息，这样，当没有Cookie时，URL也就不会被自动添加上 ;jsessionid=… 了。
tracking-modes: COOKIE
spring:
thymeleaf:
# 关闭页面缓存，便于开发环境测试
cache: false
# 静态资源路径
prefix: classpath:/templates/
# 网页资源默认.html结尾
mode: HTML
2. 页面编写
- 在
resources中创建templates文件夹存放页面资源 - 这里通过3个简单的页面演示几种thymeleaf常用的用法，如
if和unless、switch、Iteration userInfo.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<html lang="en">
<head>
<meta charset="UTF-8">
<title>table1</title>
</head>
<body>
<h1>用户信息</h1>
<!-- if/unless 案例 -->
<div th:if="${session.user != null}">
<!-- switch 案例 -->
<div th:switch="${session.user.role}">
<p th:case="'admin'">管理员</p>
<p th:case="'normal'">普通用户</p>
</div>
</div>
<div th:unless="${session.user != null}">
<a th:href="@{/login}">请先登录</a>
</div>
<!-- Iteration 案例 -->
<table>
<tr>
<th>用户id</th>
<th>名称</th>
<th>是否启用</th>
<th>创建日期</th>
</tr>
<tr th:each="user : ${users}">
<td th:text="${user.userId}">/</td>
<td th:text="${user.name}">/</td>
<td th:text="${user.enable}? '启用' : '禁止'">/</td>
<td th:text="${#dates.format(user.createdDate, 'yyyy-MM-dd HH:mm:ss')}">/</td>
</tr>
</table>
</body>
</html>
index.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>首页</h1>
<a th:href="@{/logout}">退出登录</a>
<br/>
<br/>
<br/>
<a th:href="@{/userInfo}">用户信息</a>
</body>
</html>
login.html
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>登陆页</title>
</head>
<body>
<div>
<p th:text="${errorMsg}"></p>
<form action="/doLogin" method="post">
<h2>登陆页</h2>
<h6>账号：admin,密码：123456</h6>
<label for="username"></label><input type="text" id="username" name="username" placeholder="admin">
<label for="password"></label><input type="password" id="password" name="password" placeholder="123456">
<button type="submit">登陆</button>
</form>
</div>
</body>
</html>
3. 编写实体及业务
User.java
/**
* 用户表
*
* @author ding
*/
@Data
@Accessors(chain = true)
public class User {
/**
* 用户id
*/
private Long userId;
/**
* 用户名
*/
private String username;
/**
* 密码
*/
private String password;
/**
* 用户别称
*/
private String name;
/**
* 角色
*/
private String role;
/**
* 是否启用
*/
private Boolean enable;
/**
* 创建日期
*/
private Date createdDate;
}
IUserService.java接口类
public interface IUserService {
/**
* 模拟登录
*
* @param username 用户名
* @param password 密码
* @param session 会话
* @return true
*/
boolean login(String username, String password, HttpSession session);
/**
* 模拟用户信息获取
*
* @return 用户信息
*/
User getUser();
/**
* 模拟10个用户信息
*
* @return 用户信息数组
*/
List<User> listUser();
}
- 实现类
UserServiceImpl.java，模拟登录及用户数据
@Service
public class UserServiceImpl implements IUserService {
@Override
public boolean login(String username, String password, HttpSession session) {
User user = this.getUser();
if (username.equals(user.getUsername()) && password.equals(user.getPassword())) {
session.setAttribute("user", user);
return true;
}
return false;
}
@Override
public User getUser() {
return new User()
.setName("admin")
.setUserId(1L)
.setRole("admin")
.setUsername("admin")
.setPassword("123456");
}
@Override
public List<User> listUser() {
List<User> users = new ArrayList<>();
for (int i = 1; i <= 10; i++) {
users.add(new User()
.setName("admin" + i)
.setUserId((long) i)
.setUsername("admin" + i)
.setRole("normal")
.setPassword("1000" + i)
.setEnable(i % 2 == 0)
.setCreatedDate(new Date())
);
}
return users;
}
}
4. 编写接口
IndexController.java首页
/**
* 登录web控制器
*
* @author ding
*/
@Controller
@Slf4j
@RequiredArgsConstructor
public class IndexController {
private final IUserService iUserService;
@RequestMapping({"/", "/index"})
public String index(Model model, HttpSession session) {
Object user = session.getAttribute("user");
if (Objects.isNull(user)) {
log.error("用户未登录");
return "login";
}
return "index";
}
@RequestMapping("/userInfo")
public String table1(Model model) {
model.addAttribute("users", iUserService.listUser());
return "userInfo";
}
}
LoginController .java登录
@Controller
@RequiredArgsConstructor
@Slf4j
public class LoginController {
private final IUserService iUserService;
@GetMapping("/login")
public String login() {
return "login";
}
@PostMapping("/doLogin")
public String doLogin(@RequestParam("username") String username, @RequestParam("password") String password, Model model, HttpSession session) {
if (!iUserService.login(username, password, session)) {
model.addAttribute("errorMsg", "账号密码错误");
log.error("登录失败");
return "login";
}
log.info("登录成功");
return "index";
}
@GetMapping("/logout")
public String logout(HttpSession session) {
session.removeAttribute("user");
return "login";
}
}
5. 效果演示
-
整体项目结构
-
启动项目，浏览器输入
http://127.0.0.1:9999
-
输入账号密码登录 默认admin，123456
-
查看全部用户信息
6. 源码分享
本项目已收录
- Springboot-cli开发脚手架，集合各种常用框架使用案例，完善的文档，致力于让开发者快速搭建基础环境并让应用跑起来，并提供丰富的使用示例供使用者参考，帮助初学者快速上手。
- 项目源码github地址
- 项目源码国内gitee地址
708
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
