前面讲了这么多直接,都没有涉及到前端web和后端交互的部分。因为作者所在公司是采用前后端分离方式进行web项目开发了。所以都是后端提供api接口,前端根据api文档或者服务自行调用的。后台也有读者说为何没有关于web这部分的集成文章。本章节就主要讲解下如何渲染页面的。
一点知识我们知道,在web开发时,一般都会涉及到很多的静态资源,如js、image、css文件等。
SpringBoot的默认的静态文件目录是:
/static
/public
/resources
/META-INF/resources
所以一般上我们只需要把静态文件放入前面的四个任一一个即可。默认都放在static下,对应路径即为:src/main/resources/static。
而从官网文档里也可以获悉,为了实现动态的html,SpringBoot是通过模版引擎进行页面结果渲染的,目前(1.5.15)版本的提供默认配置的模版引擎主要为:
FreeMarker
Thymeleaf
Mustache
对于模版引擎而言,SpringBoot默认存放模版文件的路径为src/main/resources/templates,当然也可以通过配置文件进行修改的。因为不同的模版引擎对应的配置属性是不一样,所以在具体讲解模版引擎时,会提到的。
当然了,使用jsp也是可以的,但官方已经不建议使用JSP了,本文也会讲解下SpringBoot下JSP的支持的,比较有很多老的项目还是使用JSP居多的。
知道了以上的一些默认配置和知识点后,就可以进行模版引擎的集成使用了。本章节主要讲解下常用的FreeMarker、Thymeleaf及JSP三个的集成和使用,其他的基本用法都一样,就是各模版引擎的语法的差异了。
FreeMarker支持FreeMarker是一款模板引擎: 即一种基于模板和要改变的数据,并用来生成输出文本(HTML网页,电子邮件,配置文件,源代码等)的通用工具。
0.POM依赖
<dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-freemarker</artifactId> </dependency>1.application.properties配置加入相关配置:
# 缓存配置 开发阶段应该配置为false 因为经常会改 spring.freemarker.cache=false # 模版后缀名 默认为ftl spring.freemarker.suffix=html # 文件编码 spring.freemarker.charset=UTF-8 # 模版加载的目录 spring.freemarker.template-loader-path=classpath:/templates/ # 配置 # locale 该选项指定该模板所用的国家/语言选项 # number_format 指定格式化输出数字的格式:currency、 # boolean_format 指定两个布尔值的语法格式,默认值是true,false # date_format,time_format,datetime_format 定格式化输出日期的格式 # time_zone 设置格式化输出日期时所使用的时区 # 数字 千分位标识 spring.freemarker.settings.number_format=,##0.00题外话:详细的配置可参见org.springframework.boot.autoconfigure.freemarker.FreeMarkerProperties类,或者直接IDE直接配置文件点击查看。
2.编写控制层
FreemarkerController.kava:
//因为是返回页面 所以不能是@RestController @Controller @RequestMapping("/freemarker") public class FreemarkerController { //正常和springmvc设置返回参数是意义的用法了 @GetMapping("/map") public String index(String name,ModelMap map) { map.addAttribute("name", name); map.addAttribute("from", "lqdev.cn"); //模版名称,实际的目录为:src/main/resources/templates/freemarker.html return "freemarker"; } @GetMapping("/mv") public String index(String name,ModelAndView mv) { mv.addObject("name", name); mv.addObject("from", "lqdev.cn"); //模版名称,实际的目录为:src/main/resources/templates/freemarker.html return "freemarker"; } }3.编写模版文件
freemarker.html:
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8" /> <title>freemarker简单示例</title> </head> <body> <h1>Hello Freemarker</h1> <!-- 这里注意:默认变量都不能为null的, 当参数为null时,会发生异常的 --> <!-- 这里后面几个"!"避免下,这样就是空白了 --> <h2>名称:${name!},来自:${from}</h2> </body> </html>4.启动应用,访问::8080/freemarker/mv?name=oKong 或者 :8080/freemarker/map?name=oKong 就能查看页面了。