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如需转载请自行联系原作者


我爱大金子

相关文章
|
2月前
|
Java API 数据库
构建RESTful API已经成为现代Web开发的标准做法之一。Spring Boot框架因其简洁的配置、快速的启动特性及丰富的功能集而备受开发者青睐。
【10月更文挑战第11天】本文介绍如何使用Spring Boot构建在线图书管理系统的RESTful API。通过创建Spring Boot项目,定义`Book`实体类、`BookRepository`接口和`BookService`服务类,最后实现`BookController`控制器来处理HTTP请求,展示了从基础环境搭建到API测试的完整过程。
52 4
|
2月前
|
XML JSON API
ServiceStack:不仅仅是一个高性能Web API和微服务框架,更是一站式解决方案——深入解析其多协议支持及简便开发流程,带您体验前所未有的.NET开发效率革命
【10月更文挑战第9天】ServiceStack 是一个高性能的 Web API 和微服务框架,支持 JSON、XML、CSV 等多种数据格式。它简化了 .NET 应用的开发流程,提供了直观的 RESTful 服务构建方式。ServiceStack 支持高并发请求和复杂业务逻辑,安装简单,通过 NuGet 包管理器即可快速集成。示例代码展示了如何创建一个返回当前日期的简单服务,包括定义请求和响应 DTO、实现服务逻辑、配置路由和宿主。ServiceStack 还支持 WebSocket、SignalR 等实时通信协议,具备自动验证、自动过滤器等丰富功能,适合快速搭建高性能、可扩展的服务端应用。
140 3
|
10天前
|
Java 开发者 微服务
Spring Boot 入门:简化 Java Web 开发的强大工具
Spring Boot 是一个开源的 Java 基础框架,用于创建独立、生产级别的基于Spring框架的应用程序。它旨在简化Spring应用的初始搭建以及开发过程。
27 6
Spring Boot 入门:简化 Java Web 开发的强大工具
|
1月前
|
设计模式 前端开发 数据库
Python Web开发:Django框架下的全栈开发实战
【10月更文挑战第27天】本文介绍了Django框架在Python Web开发中的应用,涵盖了Django与Flask等框架的比较、项目结构、模型、视图、模板和URL配置等内容,并展示了实际代码示例,帮助读者快速掌握Django全栈开发的核心技术。
152 45
|
17天前
|
开发框架 JavaScript 前端开发
TypeScript 是一种静态类型的编程语言,它扩展了 JavaScript,为 Web 开发带来了强大的类型系统、组件化开发支持、与主流框架的无缝集成、大型项目管理能力和提升开发体验等多方面优势
TypeScript 是一种静态类型的编程语言,它扩展了 JavaScript,为 Web 开发带来了强大的类型系统、组件化开发支持、与主流框架的无缝集成、大型项目管理能力和提升开发体验等多方面优势。通过明确的类型定义,TypeScript 能够在编码阶段发现潜在错误,提高代码质量;支持组件的清晰定义与复用,增强代码的可维护性;与 React、Vue 等框架结合,提供更佳的开发体验;适用于大型项目,优化代码结构和性能。随着 Web 技术的发展,TypeScript 的应用前景广阔,将继续引领 Web 开发的新趋势。
30 2
|
1月前
|
前端开发 API 开发者
Python Web开发者必看!AJAX、Fetch API实战技巧,让前后端交互如丝般顺滑!
在Web开发中,前后端的高效交互是提升用户体验的关键。本文通过一个基于Flask框架的博客系统实战案例,详细介绍了如何使用AJAX和Fetch API实现不刷新页面查看评论的功能。从后端路由设置到前端请求处理,全面展示了这两种技术的应用技巧,帮助Python Web开发者提升项目质量和开发效率。
43 1
|
1月前
|
XML 安全 PHP
PHP与SOAP Web服务开发:基础与进阶教程
本文介绍了PHP与SOAP Web服务的基础和进阶知识,涵盖SOAP的基本概念、PHP中的SoapServer和SoapClient类的使用方法,以及服务端和客户端的开发示例。此外,还探讨了安全性、性能优化等高级主题,帮助开发者掌握更高效的Web服务开发技巧。
|
1月前
|
前端开发 Java Spring
SpringBoot项目thymeleaf页面支持词条国际化切换
SpringBoot项目thymeleaf页面支持词条国际化切换
63 2
|
1月前
|
安全 数据库 开发者
Python Web开发:Django框架下的全栈开发实战
【10月更文挑战第26天】本文详细介绍了如何在Django框架下进行全栈开发,包括环境安装与配置、创建项目和应用、定义模型类、运行数据库迁移、创建视图和URL映射、编写模板以及启动开发服务器等步骤,并通过示例代码展示了具体实现过程。
51 2
WK
|
1月前
|
安全 Java 编译器
C++和Java哪个更适合开发web网站
在Web开发领域,C++和Java各具优势。C++以其高性能、低级控制和跨平台性著称,适用于需要高吞吐量和低延迟的场景,如实时交易系统和在线游戏服务器。Java则凭借其跨平台性、丰富的生态系统和强大的安全性,广泛应用于企业级Web开发,如企业管理系统和电子商务平台。选择时需根据项目需求和技术储备综合考虑。
WK
67 0