springBoot(5):web开发-模板引擎FreeMarker与thymeleaf

简介:

一、简介

spring boot的web应用开发,是基于spring mvc。


Spring boot在spring默认基础上,自动配置添加了以下特性:

 1、包含了ContentNegotiatingViewResolver和BeanNameViewResolver beans。

 2、对静态资源的支持,包括对WebJars的支持。

 3、自动注册Converter,GenericConverter,Formatter beans。

 4、对HttpMessageConverters的支持。

 5、自动注册MessageCodeResolver。

 6、对静态index.html的支持。

 7、对自定义Favicon的支持。

 8、主动使用ConfigurableWebBindingInitializer bean


二、模板引擎的选择

FreeMarker

Thymeleaf

Velocity (1.4版本之后弃用,Spring Framework 4.3版本之后弃用)

Groovy

Mustache

注:jsp应该尽量避免使用,原因如下:

 1、jsp只能打包为:war格式,不支持jar格式,只能在标准的容器里面跑(tomcat,jetty都可以)

 2、内嵌的Jetty目前不支持JSPs

 3、Undertow不支持jsps

 4、jsp自定义错误页面不能覆盖spring boot 默认的错误页面

三、FreeMarker使用

新建一个工程,勾选Freemarker、DevTools(开发方便)

wKioL1k_azHgXoASAABPQCG3DAQ480.jpg

会自动在pom.xml中加入Freemarker的配置:

1
2
3
4
< dependency >
    < groupId >org.springframework.boot</ groupId >
    < artifactId >spring-boot-starter-freemarker</ artifactId >
</ dependency >


WebController.java:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
package  com.example.demo.controller;
 
import  org.slf4j.Logger;
import  org.slf4j.LoggerFactory;
import  org.springframework.stereotype.Controller;
import  org.springframework.ui.Model;
import  org.springframework.web.bind.annotation.RequestMapping;
 
/**
  * Created by DELL on 2017/6/13.
  */
@Controller
@RequestMapping ( "/web" )
public  class  WebController {
     private  static  final  Logger logger = LoggerFactory.getLogger(WebController. class );
 
     @RequestMapping ( "/index" )
     public  String index(Model model){
         logger.info( "这是一个controller" );
         model.addAttribute( "title" , "我是一个例子" );
         return  "index" ;   // 注意,不要再最前面加上/,linux下面会出错
     }
}

index.ftl:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
< html >
< head  lang = "en" >
    < title >Spring Boot Demo - FreeMarker</ title >
     < link  href = "/css/index.css"  rel = "stylesheet"  />
</ head >
< body >
     < center >
         < img  src = "/images/logo.png"  />
         < h1  id = "title" >${title}</ h1 >
     </ center >
 
     < script  type = "text/javascript"  src = "/js/jquery.min.js" ></ script >
 
     < script >
         $(function(){
             $('#title').click(function(){
                 alert('点击了');
             });
         })
     </ script >
</ body >
</ html >


说明:

 1、视图默认访问templates下面,如"index",则:在templates下面找index.ftl

 2、css、js、img等静态资源则在static下面找,如<link href="/css/index.css" rel="stylesheet" />,则是找static下面的css下面的index.css文件

四、thymeleaf模块

4.1、简介

Thymeleaf是一个优秀的面向java的XML/XHTML/HTML5页面模板,并且有丰富的标签语言和函数。使用Springboot框架进行界面设计,一般都会选择Thymeleaf模板。

4.2、使用

引入依赖:

1
2
3
4
< dependency >
    < groupId >org.springframework.boot</ groupId >
    < artifactId >spring-boot-starter-thymeleaf</ artifactId >
</ dependency >


配置application.properties文件:

1
2
3
4
5
6
7
8
#####################thymeleaf开始#####################################
#关闭缓存
spring.thymeleaf.cache=false
#后缀
spring.thymeleaf.suffix=.html
#编码
spring.thymeleaf.encoding=UTF-8
#####################thymeleaf结束#####################################

IndexController.java:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
@Controller
public  class  IndexController {
     @RequestMapping ( "/index" )
     public  String show(Model model)  throws  Exception {
         List<User> users =  new  ArrayList<User>();
         users.add( new  User(1L,  "zhangsan" ));
         users.add( new  User(2L,  "lisi" ));
         users.add( new  User(3L,  "wangwu" ));
         model.addAttribute( "hello" , "我只是一个例子" );
         model.addAttribute( "users" , users);
         model.addAttribute( "addtime" , new  Date());
         return "/helloHtml" ;
     }
}

main/resources/templates/helloHtml.html:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
< html  xmlns = "http://www.w3.org/1999/xhtml"  xmlns:th = "http://www.thymeleaf.org" >
< head >
     < title >Hello World!</ title >
</ head >< p  th:text = "${hello}" ></ p >
< body >
< h1  th:inline = "text" >Hello.v.2</ h1 >
< p  th:text = "${addtime} ? ${#dates.format(addtime, 'yyyy-MM-dd HH:mm:ss')}" ></ p >
< select >
     < option >请选择用户</ option >
     < option  th:each = "user:${users}"  th:value = "${user.id}"  th:text = "${user.name}" >
     </ option >
</ select >
</ body >
</ html >

浏览器中输入:http://localhost:8989/index ,效果如下:

wKiom1lZt7eSY8JCAABh1wZjjsw709.jpg

4.3、thymeleaf功能简介

在html页面中使用thymeleaf标签语言,用一个简单的关键字“th”来标注,如:

1
2
< p  th:text = "${hello}" ></ p >
< img  th:src = "@{images/logo.png}"  />

其中th:text指定在<p>标签中显示的文本,它的值来自"$"所引用的内存变量。

th:src指定img的图片地址


注意:使用th,需要<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">

 wKiom1lcTuSxynbNAABWnFxuX6Y558.jpg


thymeleaf的主要标签和函数:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
th:text,显示文本。
th:utext,和th:text的区别是针对 "unescaped text"
th:attr,设置标签属性
th: if  or th: unless ,条件判断语句
th:switch, th:case,选择语句
th: each ,循环语句
 
#date:日期函数
#calendars:日历函数
#numbers:数字函数
#strings:字符串函数
#objects:对象函数
#bools:逻辑函数
#arrays:数组函数
#lists:列表函数

详细标签请查看官方:http://www.thymeleaf.org/  

本文转自我爱大金子博客51CTO博客,原文链接http://blog.51cto.com/1754966750/1934891如需转载请自行联系原作者


我爱大金子

相关文章
|
3月前
|
缓存 自然语言处理 Java
详解FreeMarker Template:在Spring Boot中实现动态内容生成
详解FreeMarker Template:在Spring Boot中实现动态内容生成
219 13
|
3月前
|
开发框架 搜索推荐 数据可视化
Django框架适合开发哪种类型的Web应用程序?
Django 框架凭借其强大的功能、稳定性和可扩展性,几乎可以适应各种类型的 Web 应用程序开发需求。无论是简单的网站还是复杂的企业级系统,Django 都能提供可靠的支持,帮助开发者快速构建高质量的应用。同时,其活跃的社区和丰富的资源也为开发者在项目实施过程中提供了有力的保障。
153 62
|
1月前
|
移动开发 前端开发 JavaScript
SpringBoot3 整合Thymeleaf 模板引擎
Thymeleaf 是一个基于 Java 的现代模板引擎,支持 HTML 原型,文件后缀为 .html,可直接在浏览器中查看静态效果。它与 Spring Boot 完美整合,默认配置即可使用,无需额外视图解析器设置。Thymeleaf 支持多种表达式(如变量、链接、国际化等)和 th 属性(如 th:text、th:if 等),适用于 Web 和非 Web 应用开发。通过 th:fragment、th:insert、th:replace 和 th:include 等属性,可以抽取和复用公共页面片段,并支持参数传递。
100 12
|
2月前
|
Java 开发者 微服务
Spring Boot 入门:简化 Java Web 开发的强大工具
Spring Boot 是一个开源的 Java 基础框架,用于创建独立、生产级别的基于Spring框架的应用程序。它旨在简化Spring应用的初始搭建以及开发过程。
95 6
Spring Boot 入门:简化 Java Web 开发的强大工具
|
2月前
|
前端开发 安全 JavaScript
2025年,Web3开发学习路线全指南
本文提供了一条针对Dapp应用开发的学习路线,涵盖了Web3领域的重要技术栈,如区块链基础、以太坊技术、Solidity编程、智能合约开发及安全、web3.js和ethers.js库的使用、Truffle框架等。文章首先分析了国内区块链企业的技术需求,随后详细介绍了每个技术点的学习资源和方法,旨在帮助初学者系统地掌握Dapp开发所需的知识和技能。
2025年,Web3开发学习路线全指南
|
3月前
|
设计模式 前端开发 数据库
Python Web开发:Django框架下的全栈开发实战
【10月更文挑战第27天】本文介绍了Django框架在Python Web开发中的应用,涵盖了Django与Flask等框架的比较、项目结构、模型、视图、模板和URL配置等内容,并展示了实际代码示例,帮助读者快速掌握Django全栈开发的核心技术。
259 45
|
3月前
|
存储 前端开发 JavaScript
如何在项目中高效地进行 Web 组件化开发
高效地进行 Web 组件化开发需要从多个方面入手,通过明确目标、合理规划、规范开发、加强测试等一系列措施,实现组件的高效管理和利用,从而提高项目的整体开发效率和质量,为用户提供更好的体验。
52 7
|
3月前
|
开发框架 JavaScript 前端开发
TypeScript 是一种静态类型的编程语言,它扩展了 JavaScript,为 Web 开发带来了强大的类型系统、组件化开发支持、与主流框架的无缝集成、大型项目管理能力和提升开发体验等多方面优势
TypeScript 是一种静态类型的编程语言,它扩展了 JavaScript,为 Web 开发带来了强大的类型系统、组件化开发支持、与主流框架的无缝集成、大型项目管理能力和提升开发体验等多方面优势。通过明确的类型定义,TypeScript 能够在编码阶段发现潜在错误,提高代码质量;支持组件的清晰定义与复用,增强代码的可维护性;与 React、Vue 等框架结合,提供更佳的开发体验;适用于大型项目,优化代码结构和性能。随着 Web 技术的发展,TypeScript 的应用前景广阔,将继续引领 Web 开发的新趋势。
62 2
|
3月前
|
前端开发 API 开发者
Python Web开发者必看!AJAX、Fetch API实战技巧,让前后端交互如丝般顺滑!
在Web开发中,前后端的高效交互是提升用户体验的关键。本文通过一个基于Flask框架的博客系统实战案例,详细介绍了如何使用AJAX和Fetch API实现不刷新页面查看评论的功能。从后端路由设置到前端请求处理,全面展示了这两种技术的应用技巧,帮助Python Web开发者提升项目质量和开发效率。
84 1
|
3月前
|
XML 安全 PHP
PHP与SOAP Web服务开发:基础与进阶教程
本文介绍了PHP与SOAP Web服务的基础和进阶知识,涵盖SOAP的基本概念、PHP中的SoapServer和SoapClient类的使用方法,以及服务端和客户端的开发示例。此外,还探讨了安全性、性能优化等高级主题,帮助开发者掌握更高效的Web服务开发技巧。