SpringBoot+Thymeleaf超好用的前后端数据交互模板引擎 |
您所在的位置：网站首页 › 后端模板引擎有什么用 › SpringBoot+Thymeleaf超好用的前后端数据交互模板引擎 |
SpringBoot+Thymeleaf超好用的前后端数据交互模板引擎
|
开发工具选用IDEA，尽量选择高版本的Thymeleaf避免版本不兼容问题，使用它可以完全替代JSP。 准备 1、pom文件 除了普通的SpringBoot项目，版本选择1.5.10，除了引入Web模块的场景启动器，数据库模块等等之外，还需要thymeleaf的场景启动器，为了兼容性，还需要指定thymeleaf较高的版本 ，pom文件主要的依赖如下（包含但不仅限于，看需求）： org.springframework.boot spring-boot-starter-parent 1.5.10.RELEASE UTF-8 UTF-8 1.8 3.0.0.RELEASE 2.0.0 org.springframework.boot spring-boot-starter-thymeleaf org.springframework.boot spring-boot-starter-web 2、application.properties文件指定视图解析器 当一个请求被SpringMVC的Controller解析了之后，就会根据这样的视图解析器去找寻对应的html文件，比如，controller返回的字符串结果是“hello”,解析之后的响应的html文件会是/templates/hello.html，这是SpringMVC最简单的使用。 #thymeleaf start #视图解析器的前缀放在这个文件夹 spring.thymeleaf.prefix=classpath:/templates/ #后缀 spring.thymeleaf.suffix=.html #模式 spring.thymeleaf.mode=LEGACYHTML5 spring.thymeleaf.servlet.content-type=text/html #编码格式 spring.thymeleaf.encoding=utf-8 #不用缓存 spring.thymeleaf.cache=false spring.resources.chain.strategy.content.enabled=true spring.resources.chain.strategy.content.paths=/** #thymeleaf end 3、附上项目结构
使用
1、所有html页面添加头 2、引入CSS和JS文件 对比上面给出的目录结构图，不难发现thyleleaf引入资源文件是直接写static目录下的绝对路径即可，语法如下： 3、传值给html页面动态显示 在Controller里面使用Model: @Controller public class TestController { /** * 测试视图解析器 */ @RequestMapping("/hello") public String hello(Model model) { String name = "xiaosha"; model.addAttribute("name", name); return "hello"; } }hello.html页面： hello3333 测试结果： 最常用的就是传值到表单，做数据回显，后端Controller在Model存储了一个对象： @RequestMapping("/getQuestion") public String getQuestionToForm(Model model) { Question question = new Question(); question = questionService.getQuestionByWord(word); model.addAttribute("que",question); return "questionlist"; }前端页面这样写：使用${que.word}取出值来 使用thymeleaf将后端的值在html页面上显示就是这么方便， 不管是字符串、数组、对象、集合大致都差不多，可以直接在页面上进行数据校验，逻辑判断等等。快速入门请参照官方文档： https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html#introducing-thymeleaf 在JS里面怎么拿取值呢？也是超级简单！ var levle = [[${level}]]; //thymeleaf在Js里面获取SpringMVCModel里面写的值 @RequestMapping(value="/socketQuestion") public String socketQuestion( Model model,@RequestParam String level){ model.addAttribute("level",level); return "questionsocket"; }通常情况下前端想要获取后端的数据是通过Ajax发送异步请求去获取，然后写JS代码去处理这些数据，最后拼接字符串形成html标签，最后被浏览器解析，实现无刷新而更改页面数据。使用了Thymeleaf之后，在JS里面通过[[${ }]]获取值也很方便。 抽取公共元素在一个网站中，经常是这样的情况，头部、底部、菜单栏等是每个页面都有的，并且功能大致都一样，所以thymeleaf提供了将这些一样的标签页面元素抽取到一个html文件中，当其它html页面有相同的部分需要用到时，直接使用一对标签引入即可。 大致实现步骤，使用一对nav标签，使用 th:fragment=" xxx" 对一部分代码块命名，抽取到一个html页面。 免费注册 马上登录[email protected];;xiaosha XXXX公司注册 客服电话:+86-xxxxxxx 在其他任何需要这部分页面的地方直接引入即可： ... 附：常用的语法语句1、获取请求域、Session域里面的数据： ${param.x} 返回名为x 的 request参数。（可能有多个值）${session.x} 返回名为x的Session参数。${application.x} 返回名为 servlet context 的参数。2、日期的输出 13 May 20113、循环 Onions 2.41 yes4、条件判断 if 和 unless view viewswitch User is an administrator User is a manager User is some other thing |
【本文地址】
今日新闻 |
推荐新闻 |