Spring Boot整合模板引擎

itlemon

发布于 2020-04-03 14:51:37

5630

发布于 2020-04-03 14:51:37

一、FreeMarker模板引擎

Spring Boot支持FreeMarker模板引擎，它是在Spring MVC基础上加入了自动配置的特性，在使用FreeMarker模板引擎的时候，需要在resources文件夹内建立static文件夹存放静态资源（一般包括css、images、js），还要建立一个templates文件，用于存放FreeMarker模板。

1）依赖配置

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>

    <groupId>springboot.example</groupId>
    <artifactId>springboot-freemarker</artifactId>
    <version>1.0-SNAPSHOT</version>
    <packaging>jar</packaging>
    <name>springboot-freemarker</name>
    <description>Spring Boot整合FreeMarker</description>

    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>1.5.8.RELEASE</version>
        <relativePath/> <!-- lookup parent from repository -->
    </parent>

    <properties>
        <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
        <project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding>
        <java.version>1.8</java.version>
    </properties>

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

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-devtools</artifactId>
            <scope>runtime</scope>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
        </dependency>

        <dependency>
            <groupId>org.webjars</groupId>
            <artifactId>jquery</artifactId>
            <version>3.2.1</version>
        </dependency>

    </dependencies>

    <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
            </plugin>
        </plugins>
    </build>

</project>

Spring Boot对静态资源友好z支持，包括对WebJars的支持也非常友好，这里也使用了WebJars。

2）index.ftl模板

<!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="/webjars/jquery/3.2.1/jquery.min.js"></script>

<script>
    $(function () {
        $('#title').click(function () {
            alert('点击了');
        });
    })
</script>
</body>
</html>

上面jquery的资源就来自于WebJars，WebJars将常见的web静态资源封装到了jar包中，这样更加方便管理和版本控制。

3）controller代码

package com.lemon.springboot.controller;

import org.springframework.stereotype.Controller;
import org.springframework.ui.ModelMap;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.servlet.ModelAndView;

/**
 * @author lemon
 */
@Controller
@RequestMapping("/web")
public class WebController {

    @RequestMapping("/index")
    public ModelAndView index() {
        ModelAndView modelAndView = new ModelAndView();
        modelAndView.addObject("title", "Hello World");
        modelAndView.setViewName("index");
        return modelAndView;
    }

    @RequestMapping("/index1")
    public String index1(ModelMap modelMap) {
        modelMap.addAttribute("title", "Hello World!!!");
        return "index";
    }
}

注意：注解@Controller支持Model、ModelMap以及ModelAndView，如果是@RestController，将仅仅支持ModelAndView。

二、Thymeleaf引擎模板

Spring Boot默认使用的是Thymeleaf引擎模板，它的模板是HTML格式的，里面使用的th命名空间。使用方法和FreeMarker一模一样，只需要将FreeMarker的依赖改成Thymeleaf的依赖，将Thymeleaf的模板替换FreeMarker的模板即可。

1）依赖

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

2）模板

<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml">
<head lang="en">
	<title>Spring Boot Demo - Thymeleaf</title>
	
	<link href="/css/index.css" rel="stylesheet" />
	
</head>
<body>
	<center>
		<img src="/images/logo.png" />
		<h1 id="title" th:text="${title}"></h1>
	</center>
	
	<script type="text/javascript" src="/webjars/jquery/3.2.1/jquery.min.js"></script>
	
	<script>
		$(function(){
			$('#title').click(function(){
				alert('点击了');
			});
		})
	</script>
</body>
</html>

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2017-11-22 ，如有侵权请联系 cloudcommunity@tencent.com 删除

spring