IntelliJ+SpringBoot项目实战(九)--整合Thymyleaf模版引擎

一、Thymeleaf 基本介绍       

        Thymeleaf是一款模板引擎产品,是一款优秀的面向JAVA的XML/XHTML/HTML5页面模板,具有丰富的标签语言和函数。因此,在使用SpringBoot开发前端网页,经常选择Thymeleaf。 在前后端分离框架流行的今天,我们需要根据业务需求来选择前端框架。对于内容管理类网站,前端框架需要将后端获取的内容直接生成到网页中,而不是通过jquery或其他页面脚本获取。这样适合搜索引擎进行关键词检索。而对于后端系统,不需要网页内容被网络爬虫抓取,可使用jquery,vue等框架。使用Thymeleaf模板引擎,非常适合开发新闻网站、知识库等需要搜索引擎收录的网站。用Thymeleaf开发的页面,打开html正文可看到后台查询到的正文。

        另外,因为后面的框架整合中,需要使用Thymeleaf做一个通用的错误信息提示页面,在页面中需要使用Thymeleaf标签引用错误的编码、错误消息,所以我们在开发异常框架处理前,先把Thymeleaf框架整合进来。

        Thymeleaf的官网是:www.thymeleaf.org

        本文主要目的是整合Thymeleaf框架,详细使用可百度一下,这里仅对Thymleaf的使用做个简单的介绍:

     (1)常用表达式:${...}  变量表达式 *{...}  选择表达式 #{...}  消息文字表达式 @{...} 链接表达式 #maps 工具对象表达式。 

     (2)常用标签:th:action  定义后台控制器路径;th:each 循环语句;th:field  表单字段绑定; 

              th:href 定义超链接 ; th:id DIV 标签中的id声明 ;  th:if 条件判断 ; th:include 布局标签,替换

              内容引入文件; th:fragment 布局标签,定义一个代码片段,方便其他地方引用 ;         

              th:object 替换对象 ;th:src 图片类地址引入 ;th:text 显示文本 ;th:value 属性赋值。

     (3)常用函数:#dates 日期函数 #lists 列表函数 #arrays数组函数 #strings 字符串函数                           #numbers数字函数 #calendars 日历函数 #objects对象函数 #bools逻辑函数。

       下面是一些简单示例:

        (1)文本: <p th:text=“ ‘hello world’”></p>

        (2)${} 变量引用 文本: <p th:text=“ ${name}”></p>

        (3)URL 及资源引用 <img th:src=”@{/image/a.jpg}”> th:ref=”@{/css/test.css}” th:src=”

                 @{/js/test.js}”

        (4)session获取:${session.valueXXX}

          (5)   ServletContext:${#sevletContext.getAttribute(‘value11’)}

          (6)   表单:<form action=“#” th:action=”@{/login}” th:object=”${loginUser}”>

        (7)业务逻辑组件及实体属性:

                  <span th:text=”${@myService.getUser(‘zhangsa’).userName}”>

二、在SpringBoot中整合Thymeleaf      

      1、引入Thymeleaf依赖:

      在openjweb-sys的pom.xml中增加thymeleaf依赖:

      <dependency>    

          <groupId>org.springframework.boot</groupId>    

          <artifactId>spring-boot-starter-thymeleaf</artifactId>

    </dependency>

    2、在application-dev.yml的spring标签中增加thymeleaf相关的参数设置(注意换行参数低2格):


   

3、在resources创建template目录,在此目录下创建一个userlist.html文件:

    

      这个userlist.html是本文的示例页面,在页面中引入了Thymleaf,并在页面中呈现后台控制层返回的变量。下面是userlist.html的内容:

       

<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head><title>hello</title><meta htp-equiv="Content-Type" content="text/html;charset=UTF-8"/>
</head><body>
<table><tr><td>用户名</td><td>登录账号</td></tr><tr th:each="user:${users}"><td th:text="${user.realName}"></td><td th:text="${user.loginId}"></td></tr>
</body>
</table>
</html>

        注意代码中${users}接收控制层理返回的users数组变量,并通过th:earch遍历users数组中的值,分别通过${user.realName}和${user.loginId}显示用户姓名和登录账号。

4、控制层代码:

      注意因为Thymeleaf对应的控制层是需要返回视图的,所以对应的控制层的类的注解是@Controller而不是@RestController。这两者有很大的差别。下面是控制层代码(org.openjweb.sys.controller.TemplateController.java):

    

package org.openjweb.sys.controller;import org.openjweb.sys.entity.CommUser;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.servlet.ModelAndView;import java.util.ArrayList;
import java.util.List;@Controller
@RequestMapping("/demo/tmpl/")
public class TemplateController {//http://localhost:8001/demo/tmpl/queryUser@RequestMapping(value = "queryUser")public String list(Model model) {List<CommUser> userList = new ArrayList<>();CommUser user = new CommUser();user.setLoginId("admin");user.setRealName("阿宝");userList.add(user);model.addAttribute("users", userList);return "userlist";}//http://localhost:8001/demo/tmpl/queryUser2@RequestMapping(value = "queryUser2")public ModelAndView list2() {List<CommUser> userList = new ArrayList<>();CommUser user = new CommUser();user.setLoginId("admin");user.setRealName("阿宝");userList.add(user);ModelAndView model = new ModelAndView();model.addObject("users",userList);model.setViewName("userlist");//指定视图return model;//这个前端没有解析出来}
}

        注意上面实现了2个方法,第一个方法是返回String类型的userlist,这个自动对应templates/userlist.html ;第二个方法是返回ModelAndView,并为此类的示例设置users数组以及通过setViewName指定视图userlist。两者实际运行效果一样。

      启动SpringBoot后,可分别运行http://localhost:8001/demo/tmpl/queryUser 和http://localhost:8001/demo/tmpl/queryUser2查看演示效果:

项目完整示例代码可从Github上下载整个工程:

https://github.com/openjweb/cloud/tree/mastericon-default.png?t=O83Ahttps://github.com/openjweb/cloud/tree/master

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/887027.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Python中常用的函数介绍

Python中常用的几种函数 1、input函数 input()函数&#xff1a;主要作用是让用户输入某个内容并接收它。 #输入你的年龄 >>> age input("my age is :") my age is :20 执行代码后输入年龄&#xff0c;年龄被存放到age变量中&#xff0c;执行print后终端会…

【动手学深度学习Pytorch】1. 线性回归代码

零实现 导入所需要的包&#xff1a; # %matplotlib inline import random import torch from d2l import torch as d2l import matplotlib.pyplot as plt import matplotlib import os构造人造数据集&#xff1a;假设w[2, -3.4]&#xff0c;b4.2&#xff0c;存在随机噪音&…

亿咖通科技应邀出席微软汽车行业智享会,分享ECARX AutoGPT全新实践

11月14日&#xff0c;全球出行科技企业亿咖通科技&#xff08;纳斯达克股票代码&#xff1a;ECX&#xff09;应邀于广州参加由微软举行的汽车行业智享会&#xff0c;揭晓了亿咖通科技对“AI定义汽车”时代的洞察与技术布局&#xff0c;分享了亿咖通科技汽车垂直领域大模型ECARX…

鸿蒙开发学习|Promise的介绍与在鸿蒙中的使用

Promise的介绍与在鸿蒙中的使用 异步编程 学习Promise的开始,我们要先了解异步编程 一般代码的执行是单线程的机制,就是按次序执行,执行完一个任务后,再执行下一个,如果我们在页面加载的同时时候执行一个请求,拿到数据后映射到界面上,这时我们就需要异步操作来执行这个请求 异…

第二课 Model模型资源导入设置检查与优化

上期我们学习了最简单的audio音效的优化&#xff0c;接下来我们继续model模型资源的优化&#xff0c;我将汇总各路大神关于模型优化的思路和方法供你和我学习。 首先我们还是要把我们优化的目标重申一遍&#xff1a; 优化的目标 1.文件体积尽可能小 2.内存占用尽可能小 3.…

小米路由器用外网域名访问管理界面

本文在Redmi AX3000 (RA81)设置&#xff0c;其他型号路由器的管理界面端口可能各不相同。 开始之前需要保证路由器SSH功能正常&#xff0c;如果没有SSH可以参考这里。 1. 给WAN口开放80端口 可以通过下载mixbox的firewall插件或者其他防火墙插件开放端口。 2. 把域名解析到路…

一次需升级系统的wxpython安装(macOS M1)

WARNING: The scripts libdoc, rebot and robot are installed in /Users/用户名/Library/Python/3.8/bin which is not on PATH. 背景&#xff1a;想在macos安装Robot Framework &#xff0c;显示pip3不是最新&#xff0c;更新pip3后显示不在PATH上 参看博主文章末尾 MAC系统…

Leetcode 求根节点到叶节点数字之和

使用深度优先搜索 DFS 来做 我提供的代码使用的是 深度优先搜索&#xff08;DFS&#xff0c;Depth-First Search&#xff09; 算法。以下是具体的算法思想和实现步骤的解释&#xff1a; 算法思想 树的路径代表数字&#xff1a; 树中每条从根节点到叶子节点的路径可以看作一个整…

IDEA:2023版远程服务器debug

很简单&#xff0c;但是很多文档没有写清楚&#xff0c;wocao 一、首先新建一个远程jvm 二、配置 三、把上面的参数复制出来 -agentlib:jdwptransportdt_socket,servery,suspendn,address5005 四、然后把这串代码放到服务器中&#xff08;这里的0.0.0.0意思是所有IP都能访问&a…

计算机毕业设计 | SpringBoot+vue汽车资讯网站 汽车购买咨询管理系统(附源码+论文)

1&#xff0c;绪论 1.1 研究背景 随着计算机技术的发展以及计算机网络的逐渐普及&#xff0c;互联网成为人们查找信息的重要场所&#xff0c;二十一世纪是信息的时代&#xff0c;所以信息的管理显得特别重要。因此&#xff0c;使用计算机来管理汽车资讯网站的相关信息成为必然…

RedHat系统配置静态IP

1、执行nmtui命令进入字符配置界面如下图所示 2、选择编辑连接进入 3、选择编辑进入后&#xff0c;将IPv4设置为手动模式后&#xff0c;选择显示后进行ip地址、网关、DNS的配置&#xff0c;配置完成后选择确定退出编辑 4、进入主界面后选择启用连接进入后&#xff0c;选择启用&…

Android开发教程案例源码分享-匹配动画多个头像飘动效果

Android开发教程案例源码分享-匹配动画多个头像飘动效果 匹配往往出现多个头像飘动&#xff0c;吸引人点击&#xff0c;有时出现的位置还不固定 一、思路&#xff1a; 用MotionLayout 二、效果图&#xff1a; 看视频更直观点&#xff1a; Android开发教程案例源码分享-匹配…

设计LRU缓存

LRU缓存 LRU缓存的实现思路LRU缓存的操作C11 STL实现LRU缓存自行设计双向链表 哈希表 LRU&#xff08;Least Recently Used&#xff0c;最近最少使用&#xff09;缓存是一种常见的缓存淘汰算法&#xff0c;其基本思想是&#xff1a;当缓存空间已满时&#xff0c;移除最近最少使…

SAM-Med2D 训练完成后boxes_prompt没有生成mask的问题

之前对着这这篇文章去微调SAM_Med2D(windows环境),发现boxes_prompt空空如也。查找了好长时间问题SAM-Med2D 大模型学习笔记&#xff08;续&#xff09;&#xff1a;训练自己数据集_sam训练自己数据集-CSDN博客 今天在看label2image_test.json文件的时候发现了一些端倪: 官方…

39页PDF | 毕马威_数据资产运营白皮书(限免下载)

一、前言 《毕马威数据资产运营白皮书》探讨了数据作为新型生产要素在企业数智化转型中的重要性&#xff0c;提出了数据资产运营的“三要素”&#xff08;组织与意识、流程与规范、平台与工具&#xff09;和“四重奏”&#xff08;数据资产盘点、评估、治理、共享&#xff09;…

在 macOS 和 Linux 中,波浪号 `~`的区别

文章目录 1、在 macOS 和 Linux 中&#xff0c;波浪号 ~macOS示例 Linux示例 区别总结其他注意事项示例macOSLinux 结论 2、root 用户的主目录通常是 /root解释示例切换用户使用 su 命令使用 sudo 命令 验证当前用户总结 1、在 macOS 和 Linux 中&#xff0c;波浪号 ~ 在 macO…

【LeetCode每日一题】——485.最大连续 1 的个数

文章目录 一【题目类别】二【题目难度】三【题目编号】四【题目描述】五【题目示例】六【题目提示】七【解题思路】八【时空频度】九【代码实现】十【提交结果】 一【题目类别】 数组 二【题目难度】 LeetCode 三【题目编号】 485.最大连续 1 的个数 四【题目描述】 给定…

windows 操作系统下载 Android源码教程

前言 开始我是装了hyber-v 虚拟机ubuntu 的&#xff0c;然而非常的卡顿且难用。因此我尝试在windows上使用repo&#xff0c;因此有了这篇文章 补充 第二天发现编译源码也需要linux命令因为源码中的很多脚本都是.sh的 因此最终通过安装WSL解决&#xff08;在window应用商店就…

单片机进阶硬件部分_day2_项目实践

设计要求 从绘制原理图到画PCB板&#xff0c;完成智能云衣柜项目 STM32 &#xff08;Modbus&#xff09;云IOT衣物云端管理 华为PCB布线规范 基于IoT的智享家主控系统 步骤分析 需求分析 器件选型绘制原理图&#xff08;器件连接&#xff09;PCB布局、布线泪滴、铺铜、添加丝印…

接口上传视频和oss直传视频到阿里云组件

接口视频上传 <template><div class"component-upload-video"><el-uploadclass"avatar-uploader":action"uploadImgUrl":on-progress"uploadVideoProcess":on-success"handleUploadSuccess":limit"lim…