一般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文件中引入静态资源文件成功。
