使用Thymeleaf把前端成果融合到SpringBoot项目中

一、创建Web项目

在项目的pox.xml中，引入spring-boot-starter-web依赖。

 
          
              org.springframework.boot
              spring-boot-starter-web
          

二、引入静态资源

项目结构

项目结构.png

对于代码类，项目类路径classpath:/ = src\main\java\

对于静态资源，项目类路径classpath:/ = src\main\resources\

1.通过pom.xml依赖配置形式引入框架资源（Bootstrap.js）

webjars：表示以jar包的方式引入静态资源。

到webjars官网查找所需引入的静态资源及版本号，拷贝对应的标签的内容到本项目的 pom.xml文件中进行引入，maven自动下载对应的jar包。

应用场景：常规的主流的前端框架。

资源访问方式： http://localhost/webjars/ = classpath:/META-INF/resources/webjars/

2.在系统默认的静态资源路径下加入自定义的静态资源（html、css 、js）

SpringBoot默认在检索完所有的Controller的@RequestMapping("/……")后，如果都找不到映射处理，则默认会去以下路径寻找静态资源进行匹配：

1. classpath:/META-INF/resources/

2. classpath:/resources/

3. classpath:/static/

4. classpath:/public/

5. /：当前项目的根目录下

应用场景： 自定义的静态资源。

资源访问方式： http://localhost/ = classpath:/resources/

拓展：自定义静态资源目录的路径：

找到项目配置文件\src\main\resources\application.properties，通过属性spring.resources.static-locations进行设置，将会覆盖以上默认的静态资源路径。

例如：spring.resources.static-locations = classpath:/private/,classpath:/public/

（备注：spring.resources.static-locations 属性实质是一个数组，若要配置多个路径，使用，号分割。）

3.为项目设置欢迎页index.html

在resources的static目录下新建index.html作为项目的欢迎入口（当用户访问根目录时，自动跳转到此index.html页面）。

  
  
  
      
      
  
  
      
欢迎访问本系统！
  
  

4.为项目设置自定义的叶签图标favicon.ico

SpringBoot默认在所有静态资源下查找favicon.ico文件，若找到则自动替换。

三、使用模板引擎把前端页面融合到项目

由于SpringBoot项目是内置Tomcat，并且项目最终会编译打包成jar包形式运行，因此对JSP支持并不友好。SpringBoot项目更推荐使用模板引擎的方式进行页面开发。

Web开发中的模板引擎是为了使[用户界面]与业务数据（内容）分离而产生的，它可以生成特定格式的文档，用于网站的模板引擎就会生成一个标准的HTML文档。

分类：主流的有三种类型，分别为：“置换型”模板引擎 、“解释型”模板引擎和“编译型”模板引擎。

模板引擎原理图.jpg

1.引入Thymeleaf依赖

在项目的pox.xml中，引入spring-boot-starter-Thymeleaf依赖。

         
             org.springframework.boot
             spring-boot-starter-thymeleaf
         
 ​
 
 
     3.0.2.RELEASE
     2.1.1
 

2.把静态资源引入到项目中

使用Thymeleaf模板引擎后，默认有如下设置：

• 模板文件的编码格式：UTF-8

• 模板文件的格式类型：text/html

• 模板文件的默认路径：classpath:/templates/

• 模板文件的默认后缀：.html

如果要修改Thymeleaf的配置，可以修改项目的配置文件application.properties

  # Enable template caching.
  spring.thymeleaf.cache=true
  # Check that the templates location exists.
  spring.thymeleaf.check-template-location=true
  # Content-Type value.
  spring.thymeleaf.servlet.content-type=text/html
  # Enable MVC Thymeleaf view resolution.
  spring.thymeleaf.enabled=true
  # Template encoding.
  spring.thymeleaf.encoding=UTF-8
  # Comma-separated list of view names that should be excluded from resolution.
  spring.thymeleaf.excluded-view-names=
  # Template mode to be applied to templates. See also StandardTemplateModeHandlers.
  spring.thymeleaf.mode=HTML
  # Prefix that gets prepended to view names when building a URL.
  spring.thymeleaf.prefix=classpath:/templates/
  # Suffix that gets appended to view names when building a URL.
  spring.thymeleaf.suffix=.html

因此，我们只需把前端开发好的页面及相关静态资源拷贝到resources\templates\目录下即可，页面内容将由Thymeleaf模板引擎自动渲染，生成最终的.html。

模板引擎组合过程.png

注意：resources\resources\和resources\templates\下虽然都是放html文件，但是它们之间有本质区别。

• resources\resources\下放的是静态资源，用于Request直接访问使用；

• resources\templates\下放的是模板文件，只有Controller能访问。

例如：登录成功后跳转login_sucess.html

在resources\templates\目录下新建login_sucess.html

  
  
  
  
      
      
  
  
      恭喜，您登录成功！
  
  

3.控制器中增加直接访问的路由

为了方便测试，我们先直接在UserController控制器中增加路由请求处理，使得我们通过路由地址直接就能访问到·登录成功页面·。

  import org.springframework.stereotype.Controller;
  ​
  @Controller
  public class UserController {
  ​
      @Autowired
      private IUserService userService;
  ​
      @RequestMapping("/user/login_sucess")
      public String login_sucess(){
          return "login_sucess";
      }
  }

测试：访问http://localhost/user/login_sucess ，查看是否返回login_sucess.html页面内容。