一般springboot应用主要为前端提供数据接口，但是对于一个小型应用来说，还需要部署一个nginx来承担前端应用部署的工作，这给系统的维护带来了复杂度。对于一个简单的应用，我们通常希望将前端和后端一同部署到一个JEE WEB容器中。springboot应用也支持将前后端应用部署到一个WEB容器中，只是springboot不再推荐JSP作为模板语言，因此我们需要引入新的模板引擎freemarker。

1、在pom.xml中添加依赖

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

2、在application.yml文件中配置freemarker

spring:
  freemarker:
    cache: false
    charset: UTF-8
    allow-request-override: false
    check-template-location: true
    #类型
    content-type: text/html
    expose-request-attributes: true
    expose-session-attributes: true
    #文件后缀
    suffix: .ftl
    #路径
    template-loader-path: classpath:/templates/

3、在src/main/resources/templates目录下创建hello.ftl文件，内容如下：

<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>${userInfo.name}</div>
    <div>${userInfo.address}</div>
</body>
</html>

4、创建ctroller：

package com.peng.self.demo.hellodemo.web;

import java.util.HashMap;
import java.util.Map;

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

@Controller
@RequestMapping("/")
public class HelloPageCtrler {
    @GetMapping("/")
    public String toHelloPage(ModelMap modelMap) {
        Map<String, String> map = new HashMap<>();
        map.put("name", "中文姓名");
        map.put("address", "看看中文地址是否正常");
        modelMap.addAttribute("userInfo", map);
        return "hello";//freemarker模板文件路径（没有文件路径，默认src/main/resources/templates目录）
    }
}

5、验证

打开浏览器，访问：http://localhost:8081/，如下如图所示的页面，说明freemarker引入成功：

页面结果

6、引入jQuery静态资源

在目录src/main/resources/static/js目录下保存jquery-3.6.1.min.js文件，之后在hello.ftl文件中添加<script>标签引入静态资源，最后添加jQuery页面加载执行函数。修改后的hello.ftl文件内容如下：

<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <#-- 引入静态js文件 -->
    <script src="/js/jquery-3.6.1.min.js"></script>
</head>
<body>
    <div>${userInfo.name}</div>
    <div>${userInfo.address}</div>
</body>
<script type="text/javascript">
    <#-- 页面加载后自动运行 -->
    $(function() {
        alert("jQuery is OOOOK!")
    });
</script>
</html>

再次打开浏览器访问http://localhost:8081/，页面刷新后浏览器弹出警告对话框，证明在ftl文件中引入静态资源文件成功。

springboot整合freemarker