文章
文章用户商城文档资讯沸点导航
!
也想出现在这里？ 联系我们吧
广告区块

Spring Boot整合Thymeleaf

📃个人主页:
不断前进的皮卡丘

🌞博客描述:
梦想也许遥不可及，但重要的是追梦的过程，用博客记录自己的成长，记录自己一步一步向上攀登的印记


🔥网站推荐：千里之行，始于足下。每天坚持刷题，巩固所学知识，也为将来找工作，面试做好准备—–
刷题神器


各大互联网大厂面试真题。基础题库到进阶题库等各类面试题应有尽有！
牛客网面经合集,满足大厂面试技术深度，快速构建Java核心知识体系大厂面试官亲授，备战面试与技能提升，主要考点+主流场景+内功提升+真题解析

Thymeleaf

基本介绍

  • Spring Boot 官方推荐使用 Thymeleaf 作为其模板引擎。SpringBoot 为 Thymeleaf 提供了一系列默认配置，并且为Thymeleaf提供了视图解析器。
  • 项目中一但导入了 Thymeleaf 的依赖，相对应的自动配置 （ThymeleafAutoConfiguration） 就会自动生效，因此 Thymeleaf 可以与 Spring Boot 完美整合 。
  • Thymeleaf模板引擎可以和html标签完美结合，便于后端渲染数据。
  • Thymeleaf支持静态效果和动态效果，在没有动态数据的时候，会展示静态效果
  • 模板引擎是为了使用户界面与业务数据（内容）分离而产生的，它可以生成特定格式的文档，用于网站的模板引擎就会生成一个标准的HTML文档就是将模板文件和数据通过模板引擎生成一个HTML代码**
  • 常见的模板引擎有：jsp、freemarker、velocity、thymeleaf
  • Thymeleaf默认写的位置是在templates这个目录下面
  • Thymeleaf官网:https://www.thymeleaf.org/
dependency>
  groupId>org.springframework.bootgroupId>
  artifactId>spring-boot-starter-thymeleafartifactId>
dependency>

Thymeleaf默认的视图路径是：/ resources/templates,在这个目录下面创建html并引入thymeleaf

html lang="en" xmlns:th="http://www.thymleaf.org">

xmlns:th=“http://www.thymleaf.org”>

基本语法

${域属性名}:获得request域中的域属性值并显示
${session.域属性名}: 获得session域中的域属性值并显示

aaap>

如果取得到数据的话，就会渲染成动态画面，否则就渲染成静态画面(只显示学生管理系统只显示学生管理系统这几个字)

th:text文本替换

span th:text="${user.name}">Tomspan>

th:if和th:unless文本替换

使用th:if和th:unless属性进行条件判断，th:unlessth:unless刚好相反，只有表达式条件不成立才会显示内容

h2 th:if="${age>=18}">成年h2>
h2 th:unless="${age>=18}">未成年h2>

th:each foreach循环

DOCTYPE html>
html lang="en" xmlns:th="http://www.thymleaf.org">
head>
    meta charset="UTF-8">
    title>Titletitle>
    style>
        .tb-stus{
            width: 900px;
            margin: 0 auto;
            border: black 1px solid;
            border-collapse: collapse;
        }
        .tb-stus th,td{
            padding: 10px;
            text-align: center;
            border:1px solid black;
        }
    style>
head>
body>
    h2 align="center">学生管理系统h2>
    table class="tb-stus">
        thead>
            tr>
                th>序号th>
                th>姓名th>
                th>年龄th>
                th>性别th>
                th>班级th>
                th>生日th>
                th>操作th>
            tr>
        thead>
        tbody>
            tr th:each="stu:${stuList}">
                td>1td>
                td th:text="${stu.name}">aatd>
                td>22td>
                td>男td>
                td>计科1班td>
                td>2022-2-3td>
                td>
                    a href="#">删除a>
                td>
            tr>
        tbody>
    table>
body>
html>

IDEA使用Thymeleaf输入 th: 没有智能提示的全新解决办法

th:href和@{}链接表达式


a th:href="${'/stus/'+ stu.id}">编辑学生1a>


a th:href="@{/stus(id=${stu.id})}">编辑学生2a>


a th:href="@{/stus(id=${stu.id},name=${stu.name})}">编辑学生3a>

th:switch和th:case

div th:switch="${stu.role}">
  h2 th:case="banzhang">班长h2>
  h2 th:case="tuanzhishu">团支书h2>
  h2 th:case="${data}">学委h2>
  h2 th:case="*">其他h2>
  
div>

thymeleaf默认给变量名+Stat的状态

如果没有显示设置状态变量，thymeleaf会默认给一个变量名+Stat的状态

tr th:each="stu: ${stus}">
  td th:text="${stuStat.index}">td>
  td th:text="${ stu.name}">td>
  td th:text="${ stu.age}">td>    
tr>

th:id、th:value、th:checked等(和form表单相关)

th:object可以定义对象属性
*{}可以和th:object配合使用，可以取出对象中的属性

#dates.format()可以用来格式化日期格式

 form th:object="${stu}">
        编号:input type="text" name="id" th:value="*{id}">br>
        姓名:input type="text" name="name" th:value="*{name}">br>
        年龄:input type="text" name="age" th:value="*{age}">br>
        性别:input type="radio" name="gender" value="true" th:checked="*{gender}">男br>
        性别:input type="radio" name="gender" value="true" th:checked="*{not gender}">女br>
        生日:input type="text" name="birth" th:value="*{#dates.format(birth,'yyyy-MM-dd')}">br>
        input type="submit" value="编辑">
    form>

整合Thymeleaf

基本配置

创建项目的时候，记得在模板引擎中勾选Thymeleaf

在pom.xml中把MySQL驱动的作用域删除
然后我们这里使用druid连接池，所以需要在pom文件导入相关依赖

 dependency>
            groupId>com.alibabagroupId>
            artifactId>druid-spring-boot-starterartifactId>
            version>1.2.11version>
        dependency>

然后我们需要在全局配置文件application.properties中进行相关配置

# 指定Mybatis的Mapper接口的xml映射文件的路径
mybatis.mapper-locations=classpath:mapper/*xml
# MySQL数据库驱动
#这个驱动也可以省略，可以根据使用的MySQL自动加载相应的驱动
spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver
# 数据源名称
spring.datasource.name=com.alibaba.druid.pool.DruidDataSource
# 数据库连接地址
spring.datasource.url=jdbc:mysql://localhost:3306/school?serverTimezone=UTC&zeroDateTimeBehavior=convertToNull
# 数据库用户名和密码
spring.datasource.username=root
spring.datasource.password=a87684009.
# 设置日志级别
logging.level.com.zyh.springboot=debug
# 开启mybatis驼峰命名规则自动转换功能
mybatis.configuration.map-underscore-to-camel-case=true

数据库准备

准备好数据库中表所对应的实体类,以及三层结构


@Data
public class Stu {
    private Integer id;
    private String name;
    private Integer age;
    private Boolean gender;
    private Integer cid;
    @DateTimeFormat(pattern = "yyyy-MM-dd")
    private Date birth;
}

三层架构

Mapper

@Mapper
public interface StuMapper {
    /**
     * 查询所有学生信息
     * @return
     * @throws Exception
     */
    @Select("select * from stu")
     ListStu> queryAllStu() throws Exception;
}

Service

public interface StuService  {
    /**
     * 查询所有学生信息
     * @return
     */
    ListStu> queryAllStu() throws Exception;
}

Service的实现类

@Service
public class StuServiceImpl implements StuService {
    @Autowired
    private StuMapper stuMapper;
    @Override
    public ListStu> queryAllStu() throws Exception {
         return stuMapper.queryAllStu();
    }
}

thymeleaf

DOCTYPE html>
html lang="en" xmlns:th="http://www.thymleaf.org">
  head>
    meta charset="UTF-8">
    title>Titletitle>
  head>
  body>
    h2>学生管理系统h2>
    h2 th:text="${name}">aaaah2>
  body>
html>

Controller

@Controller
@RequestMapping("/stu")
public class StuController {
    @Autowired
    private StuService stuService;
    /**
    * 显示学生管理系统的画面
    * @return
    */
    @RequestMapping("/stusUi")
    public String stusUi(){
        return "stus";
    }
}

然后我们先准备好页面

DOCTYPE html>
html lang="en"  xmlns:th="http://www.thymeleaf.org">
head>
    meta charset="UTF-8">
    title>Titletitle>
    style>
        .tb-stus{
            width: 900px;
            margin: 0 auto;
            border: black 1px solid;
            border-collapse: collapse;
        }
        .tb-stus th,td{
            padding: 10px;
            text-align: center;
            border:1px solid black;
        }
    style>
head>
body>
h2 align="center">学生管理系统h2>
table class="tb-stus">
    thead>
    tr>
        th>序号th>
        th>姓名th>
        th>年龄th>
        th>性别th>
        th>班级th>
        th>生日th>
        th>操作th>
    tr>
    thead>
    tbody>
    tr th:each="stu,status: ${stuList}">
        td th:text="${status.index+1}">1td>
        td th:text="${stu.name}">aatd>
        td th:text="${stu.age}">22td>

        td th:if="${stu.gender}">男td>
        td th:unless="${stu.gender}">女td>
        td th:text="${stu.cid}">计科1班td>
       td th:text="${#dates.format(stu.birth,'yyyy-MM-dd')}">2022-2-3td>
        td>
            
            a th:href="@{/stu/delete(id=${stu.id})}">删除a>
        td>
    tr>
    tbody>
table>
body>
html>

当我们点击删除的时候，后端要根据前端传过来的id来从数据库中删除对应的数据。这里我们先按照我们之前学的时候，熟悉的方法来完成，到后面的时候，会详细讲前后端分离开发

删除操作

Controller(之前的方法这里没有粘贴出来，不然代码太多了)

@Controller
@RequestMapping("/stu")
public class StuController {
    @Autowired
    private StuService stuService;
   
    /**根据id删除数据
     * http://localhost:8080/stu/delete?id=10
     * @return
     */
    @RequestMapping("/delete")
    public String deleteById(@RequestParam("id") Integer id){
        try {
            stuService.deleteByid(id);
        } catch (Exception e) {
            e.printStackTrace();
        }
        System.out.println(id);
        return "redirect:/stu/stusUi";
    }


  }

Service

public interface StuService  {
    /**
     * 查询所有学生信息
     * @return
     */
    ListStu> queryAllStu() throws Exception;

    void deleteByid(Integer id);
}

Service实现类

@Service
public class StuServiceImpl implements StuService {
    @Autowired
    private StuMapper stuMapper;
    @Override
    public ListStu> queryAllStu() throws Exception {
         return stuMapper.queryAllStu();
    }

    /**
     * 根据id删除数据
     * @param id
     */
    @Override
    public void deleteByid(Integer id) throws Exception {
        stuMapper.deleteById(id);
    }
}

Mapper

@Mapper
public interface StuMapper {
    /**
     * 查询所有学生信息
     * @return
     * @throws Exception
     */
    @Select("select * from stu")
     ListStu> queryAllStu() throws Exception;
    @Delete("delete from stu where id=#{id}")
    void deleteById( Integer id);
}

把编号为8的数据删除

编辑操作

页面stus.html

DOCTYPE html>
html lang="en"  xmlns:th="http://www.thymeleaf.org">
head>
    meta charset="UTF-8">
    title>Titletitle>
    style>
        .tb-stus{
            width: 900px;
            margin: 0 auto;
            border: black 1px solid;
            border-collapse: collapse;
        }
        .tb-stus th,td{
            padding: 10px;
            text-align: center;
            border:1px solid black;
        }
    style>
head>
body>
h2 align="center">学生管理系统h2>
table class="tb-stus">
    thead>
    tr>
        th>序号th>
        th>姓名th>
        th>年龄th>
        th>性别th>
        th>班级th>
        th>生日th>
        th>操作th>
    tr>
    thead>
    tbody>
    tr th:each="stu,status: ${stuList}">
        td th:text="${stu.id}">1td>
        td th:text="${stu.name}">aatd>
        td th:text="${stu.age}">22td>

        td th:if="${stu.gender}">男td>
        td th:unless="${stu.gender}">女td>
        td th:text="${stu.cid}">计科1班td>
         td th:text="${#dates.format(stu.birth,'yyyy-MM-dd')}">2022-2-3td>
        td>


            
            a th:href="@{/stu/delete(id=${stu.id})}">删除a>
            a th:href="@{/stu/edit(id=${stu.id})}">编辑a>
        td>
    tr>
    tbody>
table>

body>
html>

页面 stu-edit.html

DOCTYPE html>
html lang="en" xmlns:th="http://www.thymeleaf.org">
  head>
    meta charset="UTF-8">
    title>编辑画面title>
  head>
  body>
    h2 >编辑学生信息h2>
    form action="" method="post" th:object="${stu}">
      学号:input type="text" name="id" th:value="*{id}"  >br>br>
      姓名:input type="text" name="name"  th:value="*{name}">br>br>
      年龄:input type="text" name="age"  th:value="*{age}">br>br>
      性别:input type="radio" name="gender"    th:checked="*{gender}"  >男
      input type="radio" name="gender"   th:checked="*{!gender}" >女br>br>
      班级:input type="text" name="cid" th:value="*{cid}">br>br>
      生日:input type="text" name="birth" th:value="*{#dates.format(birth,'yyyy-MM-dd')}">br>br>
      input type="submit" value="编辑">
    form>
  body>
html>

Controller

/**
     * 根据id来修改数据
     * 我们首先得先根据id把数据查询出来，然后把数据展示出来
     * 用户再进行编辑，用户编辑完并且提交以后，跳转到学生管理系统画面，展示所有数据
     * @return
     */
    @RequestMapping("/edit")
    public String edit(@RequestParam("id") Integer id,Model model){
        System.out.println("id"+id);
        try {
            Stu stu=stuService.queryById(id);
            model.addAttribute("stu",stu);
        } catch (Exception e) {
            e.printStackTrace();
        }

        return "stu-edit";
    }

Service

public interface StuService  {
    /**
     * 查询所有学生信息
     * @return
     */
    ListStu> queryAllStu() throws Exception;

    /**
     * 根据id来删除学生信息
     * @param id
     * @throws Exception
     */
    void deleteByid(Integer id) throws Exception;

    /**
     * 根据id来查询对应学生信息
     * @param id
     * @return
     * @throws Exception
     */
    Stu queryById(Integer id) throws Exception;
}

Service实现类

@Service
public class StuServiceImpl implements StuService {
    @Autowired
    private StuMapper stuMapper;
    @Override
    public ListStu> queryAllStu() throws Exception {
         return stuMapper.queryAllStu();
    }

    /**
     * 根据id删除数据
     * @param id
     */
    @Override
    public void deleteByid(Integer id) throws Exception {
        stuMapper.deleteById(id);
    }

    @Override
    public Stu queryById(Integer id) throws Exception {
        return stuMapper.queryById(id);
    }
}

Mapper

@Mapper
public interface StuMapper {
    /**
    * 查询所有学生信息
    * @return
    * @throws Exception
    */
    @Select("select * from stu")
    ListStu> queryAllStu() throws Exception;
    @Delete("delete from stu where id=#{id}")
    void deleteById( Integer id);
    @Select("select * from stu where id=#{id}")
    Stu queryById(Integer id) throws Exception;
}

比如在序号为4中，点击编辑

用户登录

登录页面

DOCTYPE html>
html lang="en">
head>
    meta charset="UTF-8">
    title>Titletitle>
head>
body>
    h2>用户登录h2>
    form action="/login" method="post">
        账号:input type="text" name="username">br>br>
        密码:input type="password" name="password">br>br>
        input type="submit" value="登录">
    form>


body>
html>

因为需要判断用户是否存在，这是从数据库进行查询的，所以要准备对应的管理员表

# 创建管理员表
CREATE TABLE admin(
	id INT PRIMARY KEY AUTO_INCREMENT,
	username VARCHAR(20),
	`password` VARCHAR(20)
); 

INSERT INTO admin VALUES
	(DEFAULT,'aaa',111),
	(DEFAULT,'bbb',222),
	(DEFAULT,'ccc',333);
# 查询测试
SELECT * FROM admin;

准备对应的实体类

@Data
public class Admin {
    private String username;
    private String password;
}

Controller

@Controller
@SessionAttributes(names = {"admin"})
public class AdminController {
    @Autowired
    private AdminService adminService;

    /**
     * 显示登录页面
     * @return
     */
    @RequestMapping(value = "/loginUi")
    public String loginUi(){
        return "login";
    }
    @RequestMapping(value = "/login",method = RequestMethod.POST)
    public String login(String username, String password, Model model){
        try {
            Admin admin = adminService.login(username, password);
            //用户名存在说明登录成功
            if (admin!=null){
                //存放到session域中
                model.addAttribute("admin",admin);
                return "redirect:/stu/stusUi";
            }
        } catch (Exception e) {
            e.printStackTrace();
        }
        return "redirect:/loginUi";
    }

}

Service

public interface AdminService {
    Admin login(String username,String password) throws Exception;
}

Service对应的实现类

@Service
public class AdminServiceImpl implements AdminService {
    @Autowired
    private AdminMapper adminMapper;
    @Override
    public Admin login(String username, String password) throws Exception {
        return adminMapper.queryByUsernameAndPassword(username,password);
    }
}

Mapper

@Mapper
public interface AdminMapper {
    @Select("select * from admin where username=#{username} and password=#{password}")
    Admin queryByUsernameAndPassword(@Param("username") String username, @Param("password") String password);
}


 

DOCTYPE html>
html lang="en"  xmlns:th="http://www.thymeleaf.org">
head>
    meta charset="UTF-8">
    title>Titletitle>
    style>
        .tb-stus{
            width: 900px;
            margin: 0 auto;
            border: black 1px solid;
            border-collapse: collapse;
        }
        .tb-stus th,td{
            padding: 10px;
            text-align: center;
            border:1px solid black;
        }
    style>
head>
body>
    h2 align="center">学生管理系统h2>
    h2 th:if="${session.admin!=null}" th:text="${session.admin.username}">用户名h2>
    a th:unless="${session.admin!=null}" href="/loginUi">登录a>
    a th:if="${session.admin!=null}" href="/logout">注销用户a>
table class="tb-stus">
    thead>
    tr>
        th>序号th>
        th>姓名th>
        th>年龄th>
        th>性别th>
        th>班级th>
        th>生日th>
        th>操作th>
    tr>
    thead>
    tbody>
    tr th:each="stu,status: ${stuList}">
        td th:text="${stu.id}">1td>
        td th:text="${stu.name}">aatd>
        td th:text="${stu.age}">22td>

        td th:if="${stu.gender}">男td>
        td th:unless="${stu.gender}">女td>
        td th:text="${stu.cid}">计科1班td>
        td th:text="${#dates.format(stu.birth,'yyyy-MM-dd')}">2022-2-3td>
        td>


            
            a th:href="@{/stu/delete(id=${stu.id})}">删除a>
            a th:href="@{/stu/edit(id=${stu.id})}">编辑a>
        td>
    tr>
    tbody>
table>

body>
html>


用户注销

注销的话，我们把session域中的用户对象取消，然后这个时候就得重新登录，应该要跳转到登录画面

@RequestMapping("/logout")
    public String logout(HttpSession session){
        session.removeAttribute("admin");
        return "redirect:/loginUi";
    }

点击注销用户

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_52797170/article/details/126220313
声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。
0 条回复 A文章作者 M管理员
    暂无讨论，说说你的看法吧
❯
个人中心
购物车
优惠劵
有新私信 私信列表
搜索

  • 扫码打开当前页

返回顶部