【学习笔记】 Thymeleaf的前端渲染(价值50)

【学习笔记】 Thymeleaf的前端渲染(价值50)

博客首页:*铁甲小宝同学*

文章目的:Thymeleaf前端页面的渲染

博主也在学习阶段,如若发现问题,请告知,非常感谢

同时也非常感谢各位小伙伴们的支持

每日一语:不要在夕阳下时幻想,要在旭日东升时努力!

吾之所学,献给诸君,愿诸君得有所获!

文章目录

  • 【学习笔记】 Thymeleaf的前端渲染(价值50)
    • 前言
    • Thymeleaf的介绍
    • 配置工具
    • Thymeleaf环境的配置
      • 1、导入jar包,放在同级目录下。
      • 2、应用Thymeleaf
      • 3、Thymeleaf插件的下载和使用
      • 4、web.xml的配置
    • Thymeleaf的基础语法
      • 1、th:text
      • 2、th:each
      • 3、th:if
      • 4、th:unless
      • 5、引用web静态资源
    • 后端数据的保存和取出

前言

本期博客是JavaWeb的一个后端向前端数据传输的一个渲染过程,所用到的技术也是就我们今天的猪脚-Thymeleaf。上篇我们讲过前端给发送请求到后端,这次我们讲后端把数据放到前端渲染!本篇篇博客可货真价实的值50!!!!!,具体什么原因可以看我的Bink,说多了就是泪五五五…

笔者也希望笔者本篇博客能够帮助大家。吾之所学,献给诸君,愿诸君得有所获!


Thymeleaf的介绍

首先我们通过前言我们大概的知道了Thymeleaf的作用是什么了。那我在具体的问一下,Thymeleaf的具体作用是什么呢?

官方介绍:Thymeleaf is a modern server-side Java template engine for both web and standalone environments.

翻译:Thymeleaf是适用于Web和独立环境的现代服务器端Java模板引擎

Thymeleaf的主要目标是为您的开发工作流程带来优雅的自然模板——HTML可以在浏览器中正确显示,也可以作为静态原型工作,允许开发团队进行更强的协作。

有了Spring框架的模块、大量与您最喜欢的工具集成的功能,以及插入自己功能的能力,Thymeleaf是现代HTML5 JVM web开发的理想选择——尽管它可以做的事情更多。

从官方的介绍来看,Thymeleaf的目标很明确:

  • Thymeleaf的主要目标是为您的开发工作流程带来优雅自然的模板-HTML可以在浏览器中正确显示,也可以作为静态原型工作,从而可以在开发团队中加强协作。
  • Thymeleaf拥有适用于Spring Framework的模块,与您喜欢的工具的大量集成以及插入您自己的功能的能力,对于现代HTML5 JVM Web开发而言,Thymeleaf是理想的选择——尽管它还有很多工作要做。

配置工具

本次配置的工具有:

1:IDEA社区版

2:Thymeleaf的jar包

3:使用稳定版本的1.8jdk

注:一定要使用1.8的jdk!!!不要问为什么,问就是50!!!


Thymeleaf环境的配置

1、导入jar包,放在同级目录下。

因为我们没有借助SpringBoot框架,所以我们需要手动导入jar包。我们创建一个thymeleaf_lib的文件夹,并把jar包都放在该文件夹下面,然后右键—》Add to Library....

【学习笔记】 Thymeleaf的前端渲染(价值50)_第1张图片

【学习笔记】 Thymeleaf的前端渲染(价值50)_第2张图片

jar的下载地址:

链接:https://pan.baidu.com/s/1aAu3JD2WqAwGhWZCmoDjLA
提取码:kptf(失效了找我)


2、应用Thymeleaf

按照步骤慢慢的打开。Project Structure —》 Modules —》如果已经有了Thymeleaf的话直接点击apply和ok,如果没有的话则需要点加号进行添加,然后再重复apply和OK。

【学习笔记】 Thymeleaf的前端渲染(价值50)_第3张图片

3、Thymeleaf插件的下载和使用

打开下载插件的地方,然后直接搜索Thymeleaf即可,然后下载安装。

【学习笔记】 Thymeleaf的前端渲染(价值50)_第4张图片

确定安装完毕后,我们打开一个HTML文件,然后点击鼠标右键。目录中就有我们已经下载完毕的插件JBLHtmlToThmeleaf,我们只需点击即可。

【学习笔记】 Thymeleaf的前端渲染(价值50)_第5张图片

点击后我们的HTML文件就会出现一行引入Thmeleaf的代码,然后即可使用Thymeleaf对前端页面进行渲染。

<html lang="en"  xmlns:th="http://www.thymeleaf.org">//出来的引入代码。

4、web.xml的配置

当上述都配置完毕后,即还剩最后一步—web.xml文件的配置。

    <context-param>
        <param-name>view-prefixparam-name>
        <param-value>/WEB-INF/template/param-value>
    context-param>
    <context-param>
        <param-name>view-suffixparam-name>
        <param-value>.htmlparam-value>
    context-param>

view-prefix:配置前缀。并需要配置访问的路径即/WEB-INF/template/

view-suffix:配置访问文件后缀,我们访问的是HTML文件,则需要配置.html文件即可。

**例如:**一个文件为apple.html,已经设置过后缀为html访问时我们只需要再后端程序中访问apple即可。


Thymeleaf的基础语法

上述我们已经讲过了Thymeleaf的环境配置,接下来就是我们需要使用其对前端页面进行渲染。

在使用前,我们先来了解一下Thymeleaf的基础语法。

1、th:text

其可以改变当前元素里面的文本内容。

<h1 th:text="${session.name}">333h1>

能够把后端传过来的数据name把333进行覆盖。

2、th:each

循环:

渲染列表数据是一种非常常见的场景,例如现在有 n 条记录需要渲染成一个表格

,该数据集合必须是可以遍历的,使用th:each标签。

<tr th:each="user : ${session.name1}">
    <td th:text="${user}">tyronetd>
tr>

3、th:if

判断:

例如判断数据是否为空:

<tr th:if="${messages.empty}">
    <td >td>
tr>

4、th:unless

否者:

和python中的else是相同的。

<tr th:if="${messages.empty}">
    <td >td>
tr>
<tr th:unless="${session.name}">
    <td>333<td>
tr>

5、引用web静态资源

一般我们在引入Web的静态资源时是直接添加地址,但是如果我们使用Thymeleaf开发网页则不能直接引入路径。而是通过@{}来引用web静态资源,例如:

 <link rel="stylesheet" type="text/css" th:href="@{/static/css/demo6.css}">

后端数据的保存和取出

当我们配置上述环境后,为了测试配置是否成功,则需要写一个后端程序来进行数据传送到前端页面。

即可以使用session.setAttribute("sessionName",Object)。用来设置session值的,sessionName是名称,object是你要保存的对象。

例如:

       String name = "xiaobao";
       HttpSession session = req.getSession();
        session.setAttribute("sessionName", name);

上述代码则能把Java中的name数据放在session中并命名为"sessionName",当我们再使用Thymeleaf则能进行数据的取出即可。

例如:

【学习笔记】 Thymeleaf的前端渲染(价值50)_第6张图片

未完待续

你可能感兴趣的:(Java,前端,学习,java)