许昌网站开发,网络安全公司有哪些,企业级问答网站开发,网站与与云的关系模板引擎 所有的html元素都可以被thymeleaf替换接管 th:元素名
templates下的只能通过Controller来跳转#xff0c;templates前后端分离#xff0c;需要模板引擎thymeleaf支持 模板引擎的作用就是我们来写一个页面模板#xff0c;比如有些值呢#xff0c;是动态的#x…模板引擎 所有的html元素都可以被thymeleaf替换接管 th:元素名
templates下的只能通过Controller来跳转templates前后端分离需要模板引擎thymeleaf支持 模板引擎的作用就是我们来写一个页面模板比如有些值呢是动态的我们写一些表达式。而这些值从哪来呢就是我们在后台封装一些数据。然后把这个模板和这个数据交给我们模板引擎模板引擎按照我们这个数据帮你把这表达式解析、填充到我们指定的位置然后把这个数据最终生成一个我们想要的内容给我们写出去这就是我们这个模板引擎不管是jsp还是其他模板引擎都是这个思想。只不过呢就是说不同模板引擎之间他们可能这个语法有点不一样。其他的我就不介绍了我主要来介绍一下SpringBoot给我们推荐的Thymeleaf模板引擎这模板引擎呢是一个高级语言的模板引擎他的这个语法更简单。而且呢功能更强大。 补充什么是前后端分离 其实简单来说就是前端和后端分开开发分开部署。 我们以Javaweb开发为例子在学习web开发的时候会接触到SpringMVCSpring MVC开发的时候一般都用jsp作为页面展示后端servlet处理请求。再到SpringBoot框架前端使用thymeleaf或者freemarker作为模版引擎展示后端用controller处理请求。 其中jsp和thymeleaffreemarker都有一个共同点页面都是可以内嵌java代码的。页面里面嵌入了java后端程序设计语言代码就导致页面和后端服务的耦合度特别高——前后端开发的时候粘在一起了。而如果我们要部署spring mvc/springboot的项目的话前后端代码也都是打包在一个war包/jar包里的部署的时候也是一起部署的就导致前端要修改/后端要修改的话项目都要重新打包部署——前后端部署也粘在一起了。 怎样才算分开开发呢那当然就是前端页面只用写html js css后端不用写jsp不用使用thymeleaf等模板引擎来做html的渲染了。 引入Thymeleaf
怎么引入呢对于springboot来说什么事情不都是一个start的事情嘛我们去在项目中引入一下。给大家三个网址
Thymeleaf 官网https://www.thymeleaf.org/
Thymeleaf 在Github 的主页https://github.com/thymeleaf/thymeleaf
Spring官方文档找到我们对应的版本
https://docs.spring.io/spring-boot/docs/2.2.5.RELEASE/reference/htmlsingle/#using-boot-starter
找到对应的pom依赖可以适当点进源码看下本来的包
!--thymeleaf--
dependencygroupIdorg.springframework.boot/groupIdartifactIdspring-boot-starter-thymeleaf/artifactId
/dependency Thymeleaf分析
我们可以在其中看到默认的前缀和后缀
我们只需要把我们的html页面放在类路径下的templates下thymeleaf就可以帮我们自动渲染了。
使用thymeleaf什么都不需要配置只需要将他放在指定的文件夹下即可 Thymeleaf 语法学习
Thymeleaf 官网https://www.thymeleaf.org/
我们做个最简单的练习 我们需要查出一些数据在页面中展示
1、修改测试请求增加数据传输
RequestMapping(/t1)
public String test1(Model model){//存入数据model.addAttribute(msg,Hello,Thymeleaf);//classpath:/templates/test.htmlreturn test;
}
2、我们要使用thymeleaf需要在html文件中导入命名空间的约束方便提示。
我们可以去官方文档的#3中看一下命名空间拿来过来 xmlns:thhttp://www.thymeleaf.org
3、我们去编写下前端页面
!DOCTYPE html
html langen xmlns:thhttp://www.thymeleaf.org
headmeta charsetUTF-8title狂神说/title
/head
body
h1测试页面/h1!--th:text就是将div中的内容设置为它指定的值和之前学习的Vue一样--
div th:text${msg}/div
/body
/html
