首頁> Java> java教程> 主體

Spring Boot怎麼整合Thymeleaf

王林
發布: 2023-05-16 09:22:11
轉載
1245 人瀏覽過

Thymeleaf

基本介紹

Spring Boot 官方推薦使用 Thymeleaf 作為其模板引擎。 SpringBoot 為 Thymeleaf 提供了一系列預設配置,並且為Thymeleaf提供了視圖解析器。專案中一但導入了 Thymeleaf 的依賴,相對應的自動配置 (ThymeleafAutoConfiguration) 就會自動生效,因此 Thymeleaf 可以與 Spring Boot 完美整合 。 Thymeleaf模板引擎可以和html標籤完美結合,方便後端渲染資料。 Thymeleaf支援靜態效果和動態效果,在沒有動態資料的時候,會展示靜態效果模板引擎是為了使用戶介面與業務資料(內容)分離而產生的,它可以產生特定格式的文檔,用於網站的模板引擎就會產生一個標準的HTML文檔就是將模板文件和數據通過模板引擎生成一個HTML代碼**常見的模板引擎有:jsp、freemarker、velocity、thymeleafThymeleaf默認寫的位置是在templates這個目錄下面Thymeleaf官網:https://www.thymeleaf.org/

 org.springframework.boot spring-boot-starter-thymeleaf 
登入後複製
Thymeleaf預設的視圖路徑是:/ resources/templates,在這個目錄下面建立html並引入thymeleaf

        
登入後複製

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

基本語法

##${域屬性名稱}:取得request域中的域屬性值並顯示

${session.域屬性名}: 取得session域中的域屬性值並顯示

< p th:text="${name}">aaa

登入後複製
如果取得到數據的話,就會渲染成動態畫面,否則就渲染成靜態畫面(只顯示學生管理系統只顯示學生管理系統這幾個字)

Spring Boot怎麼整合Thymeleaf

th:text文本替換

Tom
登入後複製

th:if和th:unless文字替換

使用th:if和th:unless屬性進行條件判斷,th:unlessth:unless剛好相反,只有表達式條件不成立才會顯示內容

成年

未成年

登入後複製
th:each foreach循環


          Title
          

学生管理系统

序号 姓名 年龄 性别 班级 生日 操作
1 aa 22 计科1班 2022-2-3 删除
登入後複製

Spring Boot怎麼整合Thymeleaf

th:href和@{}連結表達式

th:switch和th:case

班长

团支书

学委

其他

登入後複製

thymeleaf預設給變數名稱Stat的狀態

#如果沒有顯示設定狀態變量,thymeleaf會預設給一個變數名稱Stat的狀態

#
    
登入後複製
th:id、th:value、th:checked等(和form表單相關)

th:object可以定義物件屬性*
{}可以和th:object配合使用,可以取出物件中的屬性#dates.format()可以用來格式化日期格式

编号:
姓名:
年龄:
性别:
性别:
生日:
登入後複製
整合Thymeleaf

基本配置

建立專案的時候,記得在模板引擎中勾選Thymeleaf

Spring Boot怎麼整合Thymeleaf

在pom.xml中刪除MySQL驅動程式的作用域

然後我們這裡使用druid連線池,所以需要在pom檔案匯入相關依賴

 com.alibaba druid-spring-boot-starter 1.2.11 
登入後複製

然後我們需要在全域設定檔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
登入後複製
資料庫準備好資料庫中表所對應的實體類別,以及三層結構

Spring Boot怎麼整合Thymeleaf

Spring Boot怎麼整合Thymeleaf

@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") List queryAllStu() throws Exception; }
登入後複製

Service

public interface StuService { /** * 查询所有学生信息 * @return */ List queryAllStu() throws Exception; }
登入後複製

Service的實作類別

@Service public class StuServiceImpl implements StuService { @Autowired private StuMapper stuMapper; @Override public List queryAllStu() throws Exception { return stuMapper.queryAllStu(); } }
登入後複製

thymeleaf


         Title
         

学生管理系统

aaaa

登入後複製

Controller

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

Spring Boot怎麼整合Thymeleaf

Spring Boot怎麼整合Thymeleaf

Spring Boot怎麼整合Thymeleaf

#然後我們先準備好頁面

    Title  
  

学生管理系统

序号 姓名 年龄 性别 班级 生日 操作
1 aa 22 计科1班 2022-2-3 删除
登入後複製

Spring Boot怎麼整合Thymeleaf

當我們點擊刪除的時候,後端要根據前端傳過來的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 */ List queryAllStu() throws Exception; void deleteByid(Integer id); }
登入後複製

Service實作類別

@Service public class StuServiceImpl implements StuService { @Autowired private StuMapper stuMapper; @Override public List 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") List queryAllStu() throws Exception; @Delete("delete from stu where id=#{id}") void deleteById( Integer id); }
登入後複製

把編號為8的資料刪除

Spring Boot怎麼整合Thymeleaf

编辑操作

页面stus.html

    Title  
  

学生管理系统

序号 姓名 年龄 性别 班级 生日 操作
1 aa 22 计科1班 2022-2-3 删除 编辑
登入後複製

页面 stu-edit.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 */ List 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 List 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") List 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; }
登入後複製

Spring Boot怎麼整合Thymeleaf

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

Spring Boot怎麼整合Thymeleaf

用户登录

登录页面:

    Title 
  

用户登录

账号:

密码:

登入後複製

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

# 创建管理员表 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); }
登入後複製

Spring Boot怎麼整合Thymeleaf

Spring Boot怎麼整合Thymeleaf

    Title  
  

学生管理系统

用户名

登录 注销用户
序号 姓名 年龄 性别 班级 生日 操作
1 aa 22 计科1班 2022-2-3 删除 编辑
登入後複製

Spring Boot怎麼整合Thymeleaf

Spring Boot怎麼整合Thymeleaf

Spring Boot怎麼整合Thymeleaf

用户注销

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

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

Spring Boot怎麼整合Thymeleaf

点击注销用户

Spring Boot怎麼整合Thymeleaf

以上是Spring Boot怎麼整合Thymeleaf的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:yisu.com
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!