网站导航
> 文档中心 > Springboot整合thymeleaf登录案例，及thymeleaf常用语法使用示例（附源码下载）

Springboot整合thymeleaf登录案例，及thymeleaf常用语法使用示例（附源码下载）

网友: 文档中心 2022-05-13 21:19:38

Springboot-cli 开发脚手架系列

Springboot整合thymeleaf登录案例，及thymeleaf常用语法使用示例（附源码下载）

文章目录

  • Springboot-cli 开发脚手架系列
  • 简介
  • 前言
    • 1. 环境
    • 2. 页面编写
    • 3. 编写实体及业务
    • 4. 编写接口
    • 5. 效果演示
    • 6. 源码分享

简介

  • Thymeleaf 是新一代 Java 模板引擎
  1. 与 Velocity、FreeMarker 等传统 Java 模板引擎不同，Thymeleaf 支持 HTML 原型，其文件后缀为“.html”，因此它可以直接被浏览器打开，此时浏览器会忽略未定义的 Thymeleaf 标签属性，展示 thymeleaf 模板的静态页面效果。
  2. 通过 Web 应用程序访问时，Thymeleaf 会动态地替换掉静态内容，使页面动态显示。
  • Thymeleaf 模板引擎具有以下特点：
  1. 动静结合：Thymeleaf 既可以直接使用浏览器打开，查看页面的静态效果，也可以通过 Web 应用程序进行访问，查看动态页面效果。
  2. 开箱即用：Thymeleaf 提供了 Spring 标准方言以及一个与 SpringMVC 完美集成的可选模块，可以快速的实现表单绑定、属性编辑器、国际化等功能。
  3. 多方言支持：它提供了 Thymeleaf 标准和 Spring 标准两种方言，可以直接套用模板实现 JSTL、 OGNL 表达式；必要时，开发人员也可以扩展和创建自定义的方言。
  4. 与 SpringBoot 完美整合：SpringBoot 为 Thymeleaf 提供了的默认配置，并且还为 Thymeleaf 设置了视图解析器，因此 Thymeleaf 可以与 Spring Boot 完美整合。

前言

我们致力于让开发者快速搭建基础环境并让应用跑起来,提供使用示例供使用者参考，让初学者快速上手。
本博客项目源码地址：

  • 项目源码github地址
  • 项目源码国内gitee地址

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: COOKIEspring:  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><div th:if="${session.user != null}">        <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><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，模拟登录及用户数据
@Servicepublic 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@RequiredArgsConstructorpublic 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@Slf4jpublic 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. 效果演示

  • 整体项目结构
    Springboot整合thymeleaf登录案例，及thymeleaf常用语法使用示例（附源码下载）

  • 启动项目，浏览器输入http://127.0.0.1:9999
    Springboot整合thymeleaf登录案例，及thymeleaf常用语法使用示例（附源码下载）

  • 输入账号密码登录 默认admin，123456
    Springboot整合thymeleaf登录案例，及thymeleaf常用语法使用示例（附源码下载）

  • 查看全部用户信息
    Springboot整合thymeleaf登录案例，及thymeleaf常用语法使用示例（附源码下载）

6. 源码分享

本项目已收录

  • Springboot-cli开发脚手架，集合各种常用框架使用案例，完善的文档，致力于让开发者快速搭建基础环境并让应用跑起来，并提供丰富的使用示例供使用者参考，帮助初学者快速上手。
  • 项目源码github地址
  • 项目源码国内gitee地址

古诗弟

网络标签：

相关问题