spring boot,thymleaf 代码模型

最新推荐文章于 2023-11-09 19:53:04 发布
最新推荐文章于 2023-11-09 19:53:04 发布
阅读量94 收藏
点赞数
分类专栏： java spring boot thymleaf 文章标签： springboot thymleaf ajax
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/snetlogon20/article/details/101383440
版权
spring boot 同时被 3 个专栏收录
13 篇文章 0 订阅
订阅专栏
java
12 篇文章 0 订阅
订阅专栏
thymleaf
2 篇文章 0 订阅
订阅专栏 
<!DOCTYPE HTML>
<link rel="stylesheet" type="text/css" media="all" href="../../css/gtvg.css" th:href="@{/css/gtvg.css}"
      xmlns:th="http://www.w3.org/1999/xhtml"/>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>hello</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<!--    <script th:src="@{/jquery/jquery-3.3.1.min.js}"></script>-->
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script type="text/javascript" th:inline="javaScript">
        function show() {
            alert('[[${switchCase}]]')
        }

        function show1() {
            var str=/*[[${str}]]*/ null;
            var arr1=/*[[${arr1}]]*/ null;
            var list=/*[[${list}]]*/ null;
            var map=/*[[${map[__'dept'__]}]]*/ null;
            alert(str);
            alert(arr1[0]);
            alert(list.length);
            alert(map.deptName);
        }

        function ajax_get() {
            //alert("ajax_get");
            //var var_url = "[[@{/test/selectById}]]";
            var var_url = "http://localhost:8080/test/selectById";
            var data = {userId:1};

            $.ajax({
                type : 'GET',
                dataType: "json",
                contentType: "application/json; charset=utf-8",
                url : var_url,
                data: data,
                success : function(data) {
                    alert(data.userId + " " + data.userName + " " + data.phone);
                }
            });
        }

        function ajax_post() {
            alert("ajax_post");

            var var_url = "http://localhost:8080/test/add";
            var data = {userId:1, userName:'a', password:'a', phone:'小疯子'};

            $.ajax({
                type : 'POST',
                dataType: "json",
                contentType: "application/json; charset=utf-8",
                url : var_url,
                data: {userName:'a', password:'a', phone:'小疯子'},
                success : function(data) {
                    alert(data);
                }
            });
        }
    </script>
</head>

<div th:insert="~{/footer.html}"></div>

<body>
数据库
<table border="1" width="200px;" style="test-align: center;">
    <thead>
    <tr>
        <th width="30%">数据ID</th>
        <th>部门名称</th>
    </tr>
    </thead>
    <tbody>
        <tr th:each="deptDomain : ${deptDomainList}">
            <td th:text="${deptDomain.deptId}">0</td>
            <td th:text="${deptDomain.deptName}">0</td>
        </tr>
    </tbody>
</table>
<p></p>
参数及格式化
<table border="1" width="1000px;" style="test-align: center;">
    <tr>
        <td width="30%">
            #{page.myText}
        </td>
        <td width="70%">
            <span th:text="#{page.myText}">This is prototype text.</span>
        </td>
    </tr>
    <tr>
        <td width="30%">
            #{data.key}
        </td>
        <td width="70%">
            <span th:text="#{data.key}">This is prototype text.</span>
        </td>
    </tr>
    <tr>
        <td width="30%">
            List中第一个元素
        </td>
        <td width="70%">
            <span th:text="${deptDomainList[0].deptId}"></span>,
            <span th:text="${deptDomainList[0].deptName}"></span>,

            <span th:text="${deptDomainList[1].deptId}"></span>,
            <span th:text="${deptDomainList[1].deptName}"></span>,

            <span th:text="${dept.deptId}"></span>,
            <span th:text="${dept.deptName}"></span>
        </td>
    </tr>
    <tr>
        <td width="30%">
            ref linkage
        </td>
        <td width="70%">
            <a href="view.html" th:href="@{/test/selectById(userId=${deptDomainList[1].deptId})}" th:text="${deptDomainList[1].deptName}">
        </td>
    </tr>
    <tr>
        <td width="30%">
            ref linkage1
        </td>
        <td width="70%">
            formatInteger:<div th:text="${#numbers.formatInteger(10.99,5)}">
            <div th:each="num : ${#numbers.arrayFormatInteger(arr1,5)}">
                <div th:text="${num}"><div>
            </div>
        </td>
    </tr>
    <tr>
        <td width="30%">
            date format1
        </td>
        <td width="70%">
            <div th:each="num : ${#numbers.arrayFormatInteger(arr1,5)}">
                <div th:text="${num}"><div>
            </div>
            <div th:each="num : ${#numbers.arrayFormatDecimal(arr1,5,2)}">
                 <div th:text="${num}"><div>
            </div>
            <div th:each="num : ${#numbers.arrayFormatDecimal(arr1,5,2,'COMMA')}">
                 <div th:text="${num}"><div>
            </div>
        </td>
    </tr>
    <tr>
        <td width="30%">
            date format2
        </td>
        <td width="70%">
            <div th:each="num : ${#numbers.arrayFormatDecimal(arr1,5,2)}">
                <div th:text="${num}"><div>
             </div>
        </td>
    </tr>
    <tr>
        <td width="30%">
            date format
        </td>
        <td width="70%">
            <div th:text="${#dates.day(today)}"></div>
            <div th:text="${#dates.month(today)}"></div>
            <div th:text="${#dates.year(today)}"></div>
            <div th:text="${#dates.format(today,'yyyy年MM月dd日 HH:mm:ss')}"></div>
        </td>
    </tr>
</table>
<p></p>

<table border="1" width="1000px;" style="test-align: center;">
    <thead>
    <tr>
        <th>test case</th>
        <th>result</th>
    </tr>
    </thead>
    <tr>
        <td width="30%">
            表达式
        </td>
        <td width="70%">
            <span th:utext="'Hello World'"></span>
        </td>
    </tr>
    <tr>
        <td width="30%">
            布尔值
        </td>
        <td width="70%">
            <div th:if="${isTrue} == true">
                show text
            </div>
            <div th:if="${isTrue} != true">
                show text
            </div>
        </td>
    </tr>
    <tr>
        <td width="30%">
            if 表达式
        </td>
        <td width="70%">
            <span th:text="男" th:if="${switchCase == 'aaa'}"></span>
            <span th:text="女" th:if="${switchCase == 'bbb'}"></span>
        </td>
    </tr>
    <tr>
        <td width="30%">
            case 判断1
        </td>
        <td width="70%">
            <div class="top" th:switch="${switchCase}">
                <div class="logo" th:case="'aaa'">
                    <input type="text" name="userName" value="aaa">
                </div>
                <div class="logo" th:case="'bbb'">
                    <input type="text" name="userName" value="bbb">
                </div>
                <div class="logo" th:case="*">
                    <input type="text" name="userName" value="***">
                </div>
            </div>
        </td>
    </tr>
    <tr>
        <td width="30%">
            case 判断2
        </td>
        <td width="70%">
            <select th:switch="${switchCase}">
                <option th:case="aaa">男</option>
                <option th:case="bbb">女</option>
                <option th:case="*">不明确</option>
            </select>
        </td>
    </tr>
    <tr>
        <td width="30%">
            th:attr 带有按钮的提交
        </td>
        <td width="70%">
            <form>
                <input type="text" name="userName" value="小明">
                <input type="submit" value="提交">
            </form>
            <form>
                <input type="text" name="userName" value="小明">
                <input type="submit" th:attr="value=#{submitKeyName}">
            </form>
            调用本机的服务
            <form th:attr="method='post', name=#{formName}, action=@{http://localhost:8080/test/add}">
                <input type="text" name="userName" value="小鸭子">
                <input type="text" name="password" value="小明子">
                <input type="text" name="phone" value="小疯子">
                <input type="submit" th:attr="value=#{submitKeyName}">
                <input type="submit" th:value="#{submitKeyName}">
            </form>
            调用指定服务器上的的服务
            <form th:attr="method='post', name=#{formName}, action=@{/test/add}">
                <input type="text" name="userName" value="小鸭子">
                <input type="text" name="password" value="小明子">
                <input type="text" name="phone" value="小疯子">
                <input type="submit" th:attr="value=#{submitKeyName}">
                <input type="submit" th:value="#{submitKeyName}">
            </form>
        </td>
    </tr>
    <tr>
        <td width="30%">
            内联语法+JS调用
        </td>
        <td width="70%">
            hello, [[${switchCase}]]
            <p></p>
            <input type="button" th:value="#{submitKeyName}" onClick="show()"/>
        </td>
    </tr>
    <tr>
        <td width="30%">
            内联语法序列化，读取arrray,list,map对象
        </td>
        <td width="70%">
            hello, [[${switchCase}]]
            <p></p>
            <input type="button" th:value="#{submitKeyName}" onClick="show()"/>
            <input type="button" value="show1" onClick="show1()"/>
        </td>
    </tr>
    <tr>
        <td width="30%">
            颜色显示
        </td>
        <td width="70%">
            <span style="color: red;">内联语法+JS调用</span>
            <span style="color: green;">内联语法+JS调用</span>
            <span style="color: yellowgreen;">内联语法+JS调用</span>
        </td>
    </tr>
    <tr>
        <td width="30%">Radio and Option check box</td>
        <td>
<!--            <form method="post" th:action=@{/test/add}" th:object="${dept}">-->
            <form method="post" th:action="@{/test/add}" th:object="${dept}">
            <table>
                    <tr>
                        <td><input type="text" th:field="*{deptName}"/></td>
                    </tr>
                    <tr>
                        <td><textarea th:field="*{deptName}"/></td>
                    </tr>
                </table>
                <select  class="form-control select2" id="catId" name="catId">
                    <option value=""> -- 请选择 -- </option>
                    <option  th:each="dept:${deptDomainList}"  th:value="${dept.deptId}" th:text="${dept.deptName}" value="1">14Dept</option>
                </select>
            </form>
        </td>
    </tr>
    <tr>
        <td width="30%">
            颜色显示
        </td>
        <td width="70%">
            <div class="form-group">
                <label for="isBoy" class="col-sm-2 control-label">是否过期</label>
                <div id="isBoy" class="col-sm-8">
                    <div class="radio-inline">
                        <label><input name="expire" type="radio" value="1"  th:field="*{isTrue}"/>未过期</label>
                    </div>
                    <div class="radio-inline">
                        <label><input name="expire" type="radio" value="0"  th:field="*{isTrue}"/>过期</label>
                    </div>
                </div>
            </div>
        </td>
    </tr>
    <tr>
        <td width="30%">
            按照类提交
        </td>
        <td width="70%">
            调用本机的服务
            <form th:attr="method='post', name=#{formName}, action=@{/test/addDept}">
                <input type="text" name="deptName" value="生产小队">
                <input type="text" name="desp" value="糊纸盒子">
                <input type="text" name="phone" value="13033589010">
                <input type="submit" th:value="#{submitKeyName}">
            </form>
        </td>
    </tr>
    <tr>
        <td width="30%">
            ajax调用
        </td>
        <td width="70%">
            <input type="button" th:value="ajax_get" onClick="ajax_get()"/>
            <input type="button" th:value="ajax_post" onClick="ajax_post()"/>
        </td>
    </tr>
</table>
<div th:insert="~{/footer.html}"></div>
</body>
</html>
snetlogon20
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Spring Boot 中Thymeleaf的用法
weixin_47371330的博客
10-13 460
Spring Boot 中Thymeleaf 一、快速入门 官网：https://www.thymeleaf.org/ 可下载文档学习。 二、为什么选择Thymeleaf 我们知道Spring MVC本身是支持多种视图技术。视图技术不推荐使用 JSP，官方推荐使用一些第三方的模板引擎：Thymeleaf 是一个跟 Velocity、FreeMarker 类似的模板引擎，它可以完全替代 JSP 。相较于其他的模板引擎，特点： 动静结合： Thymeleaf 在有网络和无网络的环境下皆可运行，即它可以让美
detection:spring boot部署深度学习模型
05-11
## Introduction对象检测管理系统，它实际上是一个带有Spring Boot，Thymeleaf和bootstrap的简单Web应用程序。 中文博客： : ##如何使用将其克隆到本地设备上，运行DetectionApplication.class，通过浏览器访问此...
Spring Boot 整合Thymeleaf
vili_sky的博客
03-15 809
我们使用Spring Boot的时候我们都是通过@RestController来处理请求，所以返回的内容为json对象。那么如果需要渲染html页面的时候，我们可能会需要一些模板引擎，Thymeleaf是一个不错的选择。 Thymeleaf是一个XML/XHTML/HTML5模板引擎，可用于Web与非Web环境中的应用开发。它是一个开源的Java库，基于Apache License 2.0许可，...
Spring Boot – Thymeleaf 示例
allway2的博客
05-08 741
Thymeleaf是一个基于 Java 的服务器端模板引擎，适用于 Web 和独立环境，能够处理 HTML、XML、JavaScript、CSS 甚至纯文本。它比 JPS 更强大，负责 UI 上的动态内容渲染。该引擎允许后端和前端开发人员在同一视图上并行工作。它可以直接访问 java 对象和 spring bean 并将它们与 UI 绑定。当我们创建任何 Web 应用程序时，它主要与 Spring MVC 一起使用。因此，让我们从一个示例开始，了解 Thymeleaf 如何与 Spring 框架一起工作。.
第5章 Spring Boot模板Thymeleaf入门详解
陈小房的自我修炼
09-09 2441
Spring Boot模板Thymeleaf 语法详解
Spring boot整合 Thymeleaf 模板
Java是世界上最好的语言
12-07 448
1. Thymeleaf模板引擎 Thymeleaf 是一种模板语言，它包含数据模型（Data）、模板（Template）、模板引擎（TemplateEngine）和结果文档（ Result Documents ）。 数据模型 数据是信息的表现形式和载体，可以是符号、文字、数字、语音、图像、视频等。数据和信息是不可分离的，数据是信息的表达，信息是数据的内涵。数据本身没有意义，数据只有对实体行为产生影响时才成为信息。 模板 模板，是一个蓝图，即一个与类型无关的类。编译器在使用模板时，会根据模板实参对模
集成Spring Boot Thymeleaf模板引擎使用教程
我的博客
07-24 53
总的来说,集成Thymeleaf很简单,相较于JSP更加简洁、且与HTML更加天然地融合,非常适合Spring Boot中使用。使用Thymeleaf非常方便,不需要像JSP那样写Java代码,编写起来更像HTML,前端开发者也更易上手。Thymeleaf是一款很方便的模板引擎,可以与Spring Boot天然配合,省去了JSP等复杂的配置。如果还有任何疑问,欢迎随时和我交流。接下来给大家讲讲在Spring Boot项目中如何使用Thymeleaf模板引擎。Thymeleaf模板中常用的语法为。
Spring Boot前端模板引擎Thymeleaf的整合和使用
weixin_73331644的博客
11-09 119
随着Web技术的不断发展，前端模板引擎在Web应用程序中扮演着越来越重要的角色。Thymeleaf是一种流行的Java模板引擎，可用于在Web应用程序中生成动态页面。本博客将介绍Thymeleaf的整合和使用，并与Spring Boot相关联。
如何使用Spring Boot Thymeleaf设置Flash 消息
allway2的博客
12-07 365
Flash 消息（一次性通知）通常用于向用户显示操作的结果： Spring Boot 在 RedirectAttributes 界面中提供了这个确切的功能。它使用数据结构将闪存消息存储为键值对。Thymeleaf 自动支持读取模板文件中的这些属性，就像它处理普通模型属性一样。闪存消息的一个方便功能是它们在重定向后幸存下来（与普通模型属性相反）。请看以下示例： 端点设置（通知用户一切正常）或​​​​​​​ flash 属性（发生了特定错误）。请注意，在任一情况下，都会重定向到终结点。由于闪存消息
Spring Boot整合Thymeleaf详细笔记
m0_61752188的博客
06-05 570
在上述配置中，`spring.thymeleaf.prefix`指定了模板文件的路径前缀，`spring.thymeleaf.suffix`指定了模板文件的后缀名，`spring.thymeleaf.cache`配置为`false`表示关闭Thymeleaf的模板缓存，以便在开发过程中能够实时看到模板的变化。综上所述，这段代码的作用是将`/static/`路径下的静态资源映射到`classpath:/static/`目录，使得我们可以通过`/static/`路径来访问静态资源。
spring boot与thymeleaf使用
weixin_45388641的博客
08-29 189
spring boot与thymeleaf使用 1. spring boot工作原理 1.1 spring框架优缺点分析 优点 Spring是Java企业版（Java Enterprise Edition，JEE，也称J2EE）的轻量级代替品。无需开发重量级的Enterprise JavaBean（EJB），Spring为企业级Java开发提供了一种相对简单的方法，通过依赖注入和面向切面编程，...
Spring Boot 实践之七 Spring Boot视图技术(Thymeleaf 基本语法/基本使用/使用Thymeleaf完成数据的页面展示/使用Thymeleaf配置国际化页面)
12-20
在一个Web应用中，通常会采用MVC设计模式来分别实现对应的模型、...本章将对Spring Boot支持的视图技术进行介绍，并使用Spring Boot整合其中常用的Thymeleaf模板引擎进行视图页面的实现。 1 spring Boot支持的视图技术
基于SpringBoot + Thymeleaf + Layui + Apache Shiro 的后台管理系统.zip
最新发布
05-05
尽管Spring框架自身对编程模型没有限制，但其在Java应用中的频繁使用让它备受青睐，以至于后来让它作为EJB（EnterpriseJavaBeans）模型的补充，甚至是替补。Spring框架为开发提供了一系列的解决方案，比如利用控制...
基于spring boot-jpa-thmleaf的旅游网站系统项目（免费赠送源码）
04-28
性能优化： 采用Spring Boot框架，通过自动化配置和简化的开发流程，提升了系统的开发效率和性能表现。 用户体验： 使用Thymeleaf模板引擎实现前端页面，简洁美观，提升了用户的浏览体验。 可扩展性： 基于Spring ...
Information-Keeper-SB:使用 Spring Boot、Spring Data JPA、Thymeleaf 模板引擎和 Spring Security 的信息保持 Web 应用程序
08-05
我的信息使用 Spring Boot、Data JPA、Thymeleaf 和 Spring Security 的信息保持 Web 应用程序。使用MVC模式使用的依赖： Spring Web, Hibernate, Data JPA, Thymeleaf, Security, PostgresSQL项目文件结构java -> ...
springboot2.0 通过Redis共享Session避坑指南
snetlogon20的博客
09-29 1494
一、科学导入POM：必须导入以下的包，否则报错。其实整体很简单，就是不要少导包。 <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-data-redis</artifact...
spring boot2.0 校验(@validated) + lombok的注解，彻底解放getter/setter
snetlogon20的博客
09-23 1301
package com.winter.model; import lombok.Getter; import lombok.Setter; import org.hibernate.validator.constraints.Length; import javax.validation.constraints.*; @Getter @Setter public class TestDoma...
springboot2.0 + spark MLlib 必须使用的包
snetlogon20的博客
10-04 719
一、 基础包 spark-assembly-1.6.1-hadoop2.6.0.jar 二、spark mllib 包 至 https://www.apache.org/dyn/closer.lua/spark/spark-2.4.4下下载spark-2.4.4-bin-hadoop2.7.tgz 解压后至解压目录下的 spark-2.4.4-bin-hadoop2.7\jars， 将所有sp...
Springboot2.0调用scala程序
snetlogon20的博客
10-05 604
创建Springboot POM（csdn的编辑器有点怪,请读者自行设法拼接下） <?xml version="1.0" encoding="UTF-8"?> <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" ...
spring boot+thymeleaf实现拦截器
05-24
好的，下面是使用Spring Boot和Thymeleaf实现拦截器的步骤： 1.创建一个拦截器类，该类需要实现HandlerInterceptor接口。在该类中，您可以实现三个方法：preHandle，postHandle和afterCompletion。这些方法分别在...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值