thymeleaf 使用页面报错_SpringBoot系列(六)thymeleaf完整详细版

目录

  1. thymeleaf简介
  2. thymeleaf特点
  3. thymeleaf在SpringBoot的应用
  4. SpringBoot引入Thymeleaf
  5. controller配置
  6. thymeleaf页面测试编写
  7. 结果展示
  8. 其他thymeleaf语法

03278d9ad265430240f07f546d0268a6.png

1. thymeleaf简介

 1. Thymeleaf是适用于Web和独立环境的现代服务器端Java模板引擎。

 2. Thymeleaf的主要目标是为您的开发工作流程带来优雅的自然模板 -HTML可以在浏览器中正确显示,也可以作为静态原型工作,从而可以在开发团队中加强协作。

 3. Thymeleaf拥有适用于Spring Framework的模块,与您喜欢的工具的大量集成以及插入您自己的功能的能力,对于现代HTML5 JVM Web开发而言,Thymeleaf是理想的选择-尽管它还有很多工作要做。

2. thymeleaf特点

 1. thymeleaf在有网络无网络的环境下都可以运行,所以可以直接在浏览器打开查看静态页面效果。它支持HTML原型,可以在HTML标签里面添加其他属性来实现数据渲染。

 2. thymeleaf具有开箱即用的特性,Thymeleaf是Spring boot推荐使用的模版引擎,直接以html显示,前后端可以很好的分离。

3. thymeleaf在SpringBoot的应用

 1. 国际化,渲染不同国家的语言

 2. 共同页面显示,比如统一异常页面处理,共同的页面处理

4. SpringBoot引入Thymeleaf

 新建一个Springboot web项目,然后添加以下依赖。

org.springframework.boot    spring-boot-starter-thymeleaforg.springframework.boot    spring-boot-starter-web

 然后在配置文件里面添加如下依赖。

spring:  thymeleaf:    cache: false     prefix: classpath:/templates/    encoding: UTF-8 #编码    suffix: .html #模板后缀    mode: HTML #模板

配置说明:

cache这一行是将页面的缓存关闭,不然我们改变页面之后可能不能及时看到更改的内容,默认是true。

prefix是配置thymeleaf模板所在的位置。

encoding 是配置thymeleaf文档的编码,后面的就不说了

5. controller配置

 上面我们配置好了环境之后就可以创建一个controller文件夹,然后写一个controller,来测试我们的thymeleaf是否成功引入。顺便创建一个对象。 代码:

@Controllerpublic class ThymeleafController {    @GetMapping("/getStudents")    public ModelAndView getStudent(){        List students = new LinkedList<>();        Student student = new Student();        student.setId(1);        student.setName("全栈学习笔记");        student.setAge(21);        Student student1 = new Student();        student1.setId(2);        student1.setName("张三");        student1.setAge(22);        students.add(student);        students.add(student1);        ModelAndView modelAndView = new ModelAndView();        modelAndView.addObject("students",students);        modelAndView.setViewName("students");        return modelAndView;    }}

代码解释 :我们创建一个list,然后在list里面添加数据,一遍一次将数据传到页面使用。然后我们创建一个ModelAndView的对象,将list放入这个modeAndView对象中,第一个参数是需要放到model中的属性名称相当于是一个键,第二个是,是一个对象。然后利用setViewName方法,设置要跳转的页面或者说是将数据传到对应的页面

 最外层我们使用了一个 @Controller,这个注解是用来返回一个页面或者视图层的。

 当然,返回ModelAndView对象只是一种方法,还有其他的方法,比如说下面这样

@RequestMapping("/getString")public String getString(HttpServletRequest request){    String name = "全栈学习笔记";    request.setAttribute("name",name);    return "index.html";}

利用http的request传值。 然后还有这样

@RequestMapping("/getModel")public String getModel(Model model){    model.addAttribute("key","这是一个键");    return "index.html";}

 去掉末尾的.html也可以,因为我们在配置文件里面设置了文件的格式为HTML文件。return的字符串都是对应的HTML文件的名称。

实体类代码如下:

/** * (Student)实体类 * * @author 全栈学习笔记 * @since 2020-04-14 11:39:10 */public class Student  {    private static final long serialVersionUID = -91969758749726312L;    /**    * 唯一标识id    */    private Integer id;    /**    * 姓名    */    private String name;    /**    * 年龄    */    private Integer age;    //省略get,set方法,自己加上}

6. 页面编写

 写好代码就等页面了,在templates文件夹下面创建一个students.html文件,编写如下代码

    Title
ID 姓名 年龄

 这里有一个很重要的事情就是,我们使用thymeleaf模板之前必须先引入thymeleaf,如下。

 这个很关键,不然你就用不了这个thymeleaf语法规则。

代码说明:你可以看到th:each 这个语法,是用来遍历的,类似于for循环,然后我们通过th:text 这个语法来渲染文字。

7.测试结果显示

 运行项目,浏览器输入localhost:8089/getStudents

a0bcc406c621cae45095fb0d73d378d8.png

8.thymeleaf常用的语法

常用的语法:

th:ifth:elseth:switchth:caseth:eachth:valueth:href

本期讲解就到这里,如果你觉得本文对你有用,可以点个赞,点个关注哦!下一期更精彩!wx search 全栈学习笔记!点个关注不迷路。

38f56b5d4a320e09aaad15ee63f011b8.png
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值