SpringBoot之开发web页面

IDEA创建的Springboot web工程如图做所示

会发现，springboot的工程中并没有传统java web项目中的WEB-INF目录以及下面的web.xml文件，

这让人一头雾水，以前做java web无论使用什么框架还没见过不写web.xml的

 

两种web开发思想：

前后端完全分离和使用模板开发；这里主要介绍下前后端分离这种方式的开发。

1-前后端分离开发

使用这种方式开发web项目，后端全部开发成rest API，前端交给专业的前端开发工程师去开发，后端和前端之前完全解耦，前端工程师可以根据自己的喜好选择前端开发框架，例如angular、react、vue等。

静态资源存放路径：src\main\resources\static\index.html

静态资源访问路径：http://localhost:8080/index.html

js、css、图片等静态资源的访问方式阈值类似；

动态请求全部按照restAPI的方式进行进行响应。

2-使用模板开发

@RequestMapping(value="/") 
public String defaultHandler(){ 
    return "thymeleaf"; 
}

这个例子的是意思是对于所有的请求都将会返回名为thymeleaf的模板文件。

 

Thymeleaf的介绍

简单说， Thymeleaf 是一个跟 Velocity、FreeMarker 类似的模板引擎，它可以完全替代 JSP 。相较与其他的模板引擎，它有如下三个极吸引人的特点：

• Thymeleaf 在有网络和无网络的环境下皆可运行，即它可以让美工在浏览器查看页面的静态效果，也可以让程序员在服务器查看带数据的动态页面效果。这是由于它支持 html 原型，然后在 html 标签里增加额外的属性来达到模板+数据的展示方式。浏览器解释 html 时会忽略未定义的标签属性，所以 thymeleaf 的模板可以静态地运行；当有数据返回到页面时，Thymeleaf 标签会动态地替换掉静态内容，使页面动态显示。

• Thymeleaf 开箱即用的特性。它提供标准和spring标准两种方言，可以直接套用模板实现JSTL、 OGNL表达式效果，避免每天套模板、该jstl、改标签的困扰。同时开发人员也可以扩展和创建自定义的方言。

• Thymeleaf 提供spring标准方言和一个与 SpringMVC 完美集成的可选模块，可以快速的实现表单绑定、属性编辑器、国际化等功能。

<!-- pom.xml -->

<properties>
    <java.version>1.8</java.version>
    <!-- 替换成3.0版本-->
    <thymeleaf.version>3.0.0.RELEASE</thymeleaf.version>
    <thymeleaf-layout-dialect.version>2.0.0</thymeleaf-layout-dialect.version>
</properties>

<dependencies>

    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-thymeleaf</artifactId>
    </dependency>

</dependencies>

#application.properties配置

server.port=80

spring.thymeleaf.encoding=UTF-8
spring.thymeleaf.cache=false
spring.thymeleaf.prefix=classpath:/templates/
spring.thymeleaf.check-template=true
spring.thymeleaf.suffix=.html
spring.thymeleaf.mode=HTML5

注意点：

• html文件都放在resource目录下的 templates 文件下
• 静态资源，比如css，js，都是放在 resource 目录下的static文件夹下

 

freemarker 和 thymeleaf 用哪个

freemarker 不足：

thymeleaf由于使用了标签属性做为语法，模版页面直接用浏览器渲染，使得前端和后端可以并行开发。

freemarket使用</>这样的语法，就无法直接使浏览器渲染出原本页面的样子。

thymeleaf优点：

    静态html嵌入标签属性，浏览器可以直接打开模板文件，便于前后端联调。
    springboot官方推荐方案。

thymeleaf缺点：

    模板必须符合xml规范

比较下两者

1.从写code的习惯角度可能 freemarker更习惯于我们的思维。
2.不过从前后分离开发的角度看thymeleaf更合适，值的绑定都是基于html的dom元素属性的，适合前后联调。