综合练习：热点事件排行榜(页面使用的是thymeleaf)

VIP文章 Qinꦿ.๓

于 2022-09-09 10:00:45 发布

阅读量631

点赞数 2

文章标签： java 开发语言

本文链接：https://blog.csdn.net/weixin_47541976/article/details/126776350

版权

Thymeleaf是用来开发Web和独立环境项目的服务器端的Java模版引擎

Spring官方支持的服务的渲染模板中，并不包含jsp。而是Thymeleaf和Freemarker等，而Thymeleaf与SpringMVC的视图技术，及SpringBoot的自动化配置集成非常完美，几乎没有任何成本，你只用关注Thymeleaf的语法即可。

Thymeleaf的特点

1.动静结合：Thymeleaf 在有网络和无网络的环境下皆可运行，即它可以让美工在浏览器查看页面的静态效果，也可以让程序员在服务器查看带数据的动态页面效果。这是由于它支持 html 原型，然后在 html 标签里增加额外的属性来达到模板+数据的展示方式。浏览器解释 html 时会忽略未定义的标签属性，所以 thymeleaf 的模板可以静态地运行；当有数据返回到页面时，Thymeleaf 标签会动态地替换掉静态内容，使页面动态显示。

2.开箱即用：它提供标准和spring标准两种方言，可以直接套用模板实现JSTL、 OGNL表达式效果，避免每天套模板、改jstl、改标签的困扰。同时开发人员也可以扩展和创建自定义的方言。

3.多方言支持：Thymeleaf 提供spring标准方言和一个与 SpringMVC 完美集成的可选模块，可以快速的实现表单绑定、属性编辑器、国际化等功能。

4.与SpringBoot完美整合：SpringBoot提供了Thymeleaf的默认配置，并且为Thymeleaf设置了视图解析器，我们可以像以前操作jsp一样来操作Thymeleaf。代码几乎没有任何区别，就是在模板语法上有区别。

SpringBoot与Thymeleaf整合

1.在pom中引入Thymeleaf


 <!--引入thymeleaf-->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </dependency>

2.自动配置了Thymeleaf

SpringBoot中已经自动给我们默认分配了模版的前缀和后缀，我们只需要按部就班的将模版丢进去即可

只要我们把HTML页面放在classpath:/templates/，thymeleaf就能自动渲染；

3.编写Controller

import com.msds.bean.Student;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import java.util.ArrayList;
import java.util.List;
import java.util.Map;
@Controller
public class HelloController {
    //查出一些数据，在页面显示
    @RequestMapping(value = "/cg")
    public String success(Map<String,Object> map, Model model){
        map.put("hello","你好SpringBoot");
        map.put("html","<h1>html</h1>");
        String[] str={"张三","李四","王五"};
        map.put("arr",str);
        List<Student> list=new ArrayList<Student>();
        Student stu1=new Student("欢欢",7,'女');
        Student stu2=new Student("贝贝",8,'女');
        Student stu3=new Student("小黑",10,'男');
        list.add(stu1);
        list.add(stu2);
        list.add(stu3);
        map.put("stu",list);
        model.addAttribute("msg","向model中存了些数据");
        //classpath:/templates/success.html
        return "success";
    }
}

4.将返回的对应模板添加到默认的位置下：在resources/templates下创建success.html

在html页面导入thymeleaf的名称空间——(导入是为了可以有快捷提示，也可以选择不导入)

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

使用thymeleaf语法；


<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>success</title>
</head>
<body>
    <h1>成功</h1>
    <!--th:text 将div里面的文本内容设置为${hello} 要显示的值-->
    <h3 th:text="${hello}"></h3>
    <!--这句话在后台请求运行的时候并不会显示，会直接替换为后台的数据，后台中没有key为hello对应的value值，那就会把${}中的数据给显示出来-->
    <h3 th:text="${hello}">这是显示欢迎信息</h3>
    <!--会将原本id的值替换为th:id中取出的值-->
    <a id="aid" th:id="${hello}">超链接</a>
    <hr/>
    <!--th:each 每次遍历都会生成当前这个标签 3个h4-->
    <h4 th:text="${us}" th:each="us:${arr}"></h4>
    <hr/>
    <!--行内写法-->
    <h4>
        <span th:each="us:${arr}">[[${us}]] </span>
    </h4>
    <hr/>
    <h4 th:text="${xs.name+'、'+xs.age+'、'+xs.sex}" th:each="xs:${stu}"></h4>
    <hr/>
    <h4>
        <span th:each="xs:${stu}">[[${xs.name}]]、[[${xs.age}]]、[[${xs.sex}]] <br/></span>
    </h4>
    <hr/>
    <p th:text="${msg}"></p>
</body>
</html>

5.启动项目，进行访问

配置热部署

1.在项目的pom文件中添加如下依赖

    <!--配置热部署-->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-devtools</artifactId>
        </dependency>

2.再次修改了java代码或html页面，只需要按Ctrl+F9键，就可有重新访问（指的是在IDEA软件中）

thymeleaf常用语法

thymeleaf主要作用是把后台数据渲染到html中

变量

先新建一个实体类User
public class User {
    private Stri

最低0.47元/天解锁文章

Qinꦿ.๓

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
2
评论
综合练习：热点事件排行榜(页面使用的是thymeleaf)

热点事件排行榜
复制链接

扫一扫