博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
Spring Boot☞ 使用Thymeleaf模板引擎渲染web视图
阅读量:6160 次
发布时间:2019-06-21

本文共 11412 字,大约阅读时间需要 38 分钟。

 

静态资源访问

 

在我们开发Web应用的时候,需要引用大量的js、css、图片等静态资源。

 

默认配置

 

Spring Boot默认提供静态资源目录位置需置于classpath下,目录名需符合如下规则:

 

  • /static
  • /public
  • /resources
  • /META-INF/resources

 

举例:我们可以在src/main/resources/目录下创建static,在该位置放置一个图片文件。启动程序后,尝试访问http://localhost:8080/D.jpg。如能显示图片,配置成功。

 

渲染Web页面

 

在之前的示例中,我们都是通过@RestController来处理请求,所以返回的内容为json对象。那么如果需要渲染html页面的时候,要如何实现呢?

 

模板引擎

 

在动态HTML实现上Spring Boot依然可以完美胜任,并且提供了多种模板引擎的默认配置支持,所以在推荐的模板引擎下,我们可以很快的上手开发动态网站。

 

Spring Boot提供了默认配置的模板引擎主要有以下几种:

 

  • Thymeleaf
  • FreeMarker
  • Velocity
  • Groovy
  • Mustache

 

Spring Boot建议使用这些模板引擎,避免使用JSP,若一定要使用JSP将无法实现Spring Boot的多种特性,具体可见后文:支持JSP的配置

 

当你使用上述模板引擎中的任何一个,它们默认的模板配置路径为:src/main/resources/templates。当然也可以修改这个路径,具体如何修改,可在后续各模板引擎的配置属性中查询并修改。

 

Thymeleaf

 

Thymeleaf是一个XML/XHTML/HTML5模板引擎,可用于Web与非Web环境中的应用开发。它是一个开源的Java库,基于Apache License 2.0许可,由Daniel Fernández创建,该作者还是Java加密库Jasypt的作者。

 

Thymeleaf提供了一个用于整合Spring MVC的可选模块,在应用开发中,你可以使用Thymeleaf来完全代替JSP或其他模板引擎,如Velocity、FreeMarker等。Thymeleaf的主要目标在于提供一种可被浏览器正确显示的、格式良好的模板创建方式,因此也可以用作静态建模。你可以使用它创建经过验证的XML与HTML模板。相对于编写逻辑或代码,开发者只需将标签属性添加到模板中即可。接下来,这些标签属性就会在DOM(文档对象模型)上执行预先制定好的逻辑。

示例模板:

Name Price
Oranges 0.99

  

可以看到Thymeleaf主要以属性的方式加入到html标签中,浏览器在解析html时,当检查到没有的属性时候会忽略,所以Thymeleaf的模板可以通过浏览器直接打开展现,这样非常有利于前后端的分离。

在Spring Boot中使用Thymeleaf,只需要引入下面依赖,并在默认的模板路径src/main/resources/templates下编写模板文件即可完成。

org.springframework.boot
spring-boot-starter-thymeleaf

  

 

效果图:

 

POM.xml

4.0.0
com.wls
project
0.0.1-SNAPSHOT
jar
project
project
org.springframework.boot
spring-boot-starter-parent
1.5.6.RELEASE
UTF-8
UTF-8
1.8
org.springframework.boot
spring-boot-starter
org.springframework.boot
spring-boot-starter-web
org.springframework.boot
spring-boot-starter-test
test
org.mybatis.spring.boot
mybatis-spring-boot-starter
1.1.1
org.springframework.boot
spring-boot-starter-jdbc
org.apache.tomcat
tomcat-jdbc
mysql
mysql-connector-java
com.alibaba
fastjson
1.1.43
org.springframework.boot
spring-boot-starter-data-jpa
com.alibaba
druid
1.1.2
org.springframework.boot
spring-boot-devtools
true
mysql
mysql-connector-java
org.springframework.boot
spring-boot-starter-aop
org.springframework.boot
spring-boot-starter-redis
1.4.7.RELEASE
org.springframework.session
spring-session-data-redis
org.springframework.boot
spring-boot-starter-activemq
org.springframework.boot
spring-boot-starter-thymeleaf
org.springframework.boot
spring-boot-starter-mail
io.springfox
springfox-swagger2
2.7.0
io.springfox
springfox-swagger-ui
2.7.0
org.springframework.boot
spring-boot-test
junit
junit
org.springframework
spring-test
4.3.10.RELEASE
org.springframework.boot
spring-boot-maven-plugin
org.mybatis.generator
mybatis-generator-maven-plugin
1.3.2
true
true

  

Controller

package com.wls.integrateplugs.hello.controller;/** * Created by wls on 2017/8/24. */import java.util.Locale;import java.util.UUID;import javax.servlet.http.HttpSession;import com.sun.org.apache.regexp.internal.RE;import org.springframework.ui.Model;import org.springframework.ui.ModelMap;import org.springframework.web.bind.annotation.RequestMapping;import org.springframework.web.bind.annotation.RequestMethod;import org.springframework.web.bind.annotation.RestController;import org.springframework.web.servlet.ModelAndView;import springfox.documentation.annotations.ApiIgnore;@RestControllerpublic class HelloController {    @RequestMapping(value = "/hello",method = RequestMethod.GET)    public String hello(Locale locale, Model model) {        return "hello world";    }    @RequestMapping("/helloWorld")    public String index() {        return "Hello World";    }    /**     * 使用@RestController时,则使用ModelAndView显示页面     * @param map     * @return     */    @ApiIgnore    @RequestMapping(value = "/helloThymeleaf",method = RequestMethod.GET)    public ModelAndView index(ModelMap map) {        ModelAndView mv = new ModelAndView("index");        map.addAttribute("name","王老师");        map.addAttribute("host", "http://blog.didispace.com");        return mv;    }    /**     * 共享session     * @param session     * @return     */    @RequestMapping(value = "/uid",method = RequestMethod.GET)    String uid(HttpSession session) {        UUID uid = (UUID) session.getAttribute("uid");        if (uid == null) {            uid = UUID.randomUUID();        }        session.setAttribute("uid", uid);        return session.getId();    }}

  html

    hello    

thymeleaf测试。。。

Hello World

  

如上页面,直接打开html页面展现Hello World,但是启动程序后,访问http://localhost:8081/project/helloThymeleaf,则是展示Controller中host的值:http://blog.didispace.com,做到了不破坏HTML自身内容的数据逻辑分离。

更多Thymeleaf的页面语法,还请访问Thymeleaf的官方文档查询使用。

Thymeleaf的默认参数配置

如有需要修改默认配置的时候,只需复制下面要修改的属性到application.properties中,并修改成需要的值,如修改模板文件的扩展名,修改默认的模板路径等。

application-dev.yml

spring:  datasource:    primary:      driver-class-name: com.mysql.jdbc.Driver  #    url: jdbc:mysql://192.168.159.128:3306/mydb      url: jdbc:mysql://192.168.223.128:3306/db1      username: wls      password: Wls141215!    secondary:      driver-class-name: com.mysql.jdbc.Driver  #    url: jdbc:mysql://192.168.159.128:3306/mydb      url: jdbc:mysql://192.168.223.128:3306/db2      username: wls      password: Wls141215!  jpa:    hibernate:      ddl-auto: update    show-sql: true  thymeleaf:    mode: HTML5    encoding: utf-8    content-type: text/html    cache: false    prefix: classpath:/templates/    suffix: .html    check-template-location: true  output:    ansi:      enabled: always  mvc:    view:      prefix: /templates/      suffix: .*  mail:    host: smtp.qq.com    username: 158822436@qq.com    password: Wls141215sxj    properties:      mail:        smtp:          auth: true          starttls:            enable: true            required: true  redis:    database: 0#    host: 192.168.159.128    host: 192.168.223.128    port: 6379    password: Wls141215!    pool:      # 连接池最大连接数(使用负值表示没有限制)      max-active: 8      # 连接池最大阻塞等待时间(使用负值表示没有限制)      max-wait: -1      # 连接池中的最大空闲连接      max-idle: 8      # 连接池中的最小空闲连接      min-idle: 0    # 连接超时时间(毫秒)    timeout: 0mybatis:  type-aliases-package: com.wls.integrateplugs.mybatis.model  mapper-locations: classpath:static/sqlmapper/*.xml  check-config-location: true#  config-location: classpath:mybatis/mybatis-config.xmllogging:  level:    com.wls.shopmall: debugage:  18name: 张三content: "name: ${name}, age: ${age}"cron: 0/3 * * * * ?com.diy.title: 纯洁的微笑com.diy.description: 分享生活和技术orderInfo:  orderNumber: 1245  receiver: wls  province: 北京  city: 北京  area: 大兴区  street: 广平大街9号  addressDetail:  九州通医药有限公司  orderStatus:  1  invoiceInfo:      invoiceTitle: 北京好药师大药房连锁有限公司      invoiceType: 1  details:    - orderDetail:        productId:  1        productCode:  BC001        productName:  商品1        unitPrice:  10.01        count:  1#   - orderDetail:#        productId:  2#        productCode:  BC002#        productName:  商品2#        unitPrice:  10.01#        count:  1com.didispace.blog:  name: 程序猿DD  title: Spring Boot教程  desc: ${com.didispace.blog.name}正在努力写《${com.didispace.blog.title}》# 随机字符串  value: ${random.value}# 随机int  number: ${random.int}# 随机long  bignumber: ${random.long}# 10以内的随机数  test1: ${random.int(10)}# 10-20的随机数  test2: ${random.int[10,20]}

  application.yml

server:  port: 8081  context-path: /projectspring:  profiles:    active: dev#spring.jpa.hibernate.naming.physical-strategy: org.hibernate.boot.model.naming.PhysicalNamingStrategyStandardImpl

  

支持JSP的配置

Spring Boot并不建议使用,但如果一定要使用,可以参考此工程作为脚手架:

转载于:https://www.cnblogs.com/wlsblog/p/7487633.html

你可能感兴趣的文章
android背景选择器selector用法汇总
查看>>
[转]Paul Adams:为社交设计
查看>>
showdialog弹出窗口刷新问题
查看>>
java
查看>>
Vue.js连接后台数据jsp页面  ̄▽ ̄
查看>>
关于程序的单元测试
查看>>
mysql内存优化
查看>>
都市求生日记第一篇
查看>>
Java集合---HashMap源码剖析
查看>>
SQL优化技巧
查看>>
thead 固定,tbody 超出滚动(附带改变滚动条样式)
查看>>
Dijkstra算法
查看>>
css 动画 和 响应式布局和兼容性
查看>>
csrf 跨站请求伪造相关以及django的中间件
查看>>
MySQL数据类型--与MySQL零距离接触2-11MySQL自动编号
查看>>
生日小助手源码运行的步骤
查看>>
Configuration python CGI in XAMPP in win-7
查看>>
bzoj 5006(洛谷 4547) [THUWC2017]Bipartite 随机二分图——期望DP
查看>>
CF 888E Maximum Subsequence——折半搜索
查看>>
欧几里德算法(辗转相除法)
查看>>