SpringBoot + Vue + 模板引擎整合实践 - 指南
目录
3.2 Freemarker 模板（chapter1.ftl）
四、SpringBoot + Vue 与 MVVM、axios
4.3 控制器代码（DataController.java）
在 Java 后端开发中，SpringBoot 凭借其便捷性成为主流框架，同时它支持多种视图技术（如 Thymeleaf、Freemarker），还能与 Vue 这类前端框架无缝整合。本篇博客将围绕 SpringBoot + Thymeleaf、SpringBoot + Freemarker 以及 SpringBoot + Vue 这几种技术组合展开，同时深入探讨 MVVM 思想、axios 以及 JavaScript 中 this 指向等关键知识点。
一、项目结构与依赖
1.1 项目结构
项目采用典型的 SpringBoot 项目结构：
src/main/java：存放 Java 代码，包含多个控制器类（如DataController、EmpController等）以及启动类SpringBootVueApplication。src/main/resources：static：存放静态资源，如图片a1.jpg。templates：存放视图模板，包含 Thymeleaf 模板（如demo1.html）和 Freemarker 模板（如chapter1.ftl）。application.properties：SpringBoot 配置文件。pom.xml：管理项目依赖。
1.2 Maven核心依赖
在 pom.xml 中，引入了关键依赖：
spring-boot-starter-web：SpringBoot Web 开发核心依赖。spring-boot-starter-thymeleaf：Thymeleaf 视图模板依赖。spring-boot-starter-freemarker：Freemarker 视图模板依赖。
<dependencies>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-freemarker</artifactId>
</dependency>
</dependencies>
1.3 配置文件
在application.properties中：
配置Web访问端口和 Freemarker 模板的缓存、字符集、后缀以及模板加载路径等信息，让 SpringBoot 能正确识别和加载 Freemarker 模板。
# 应用服务 WEB 访问端口 server.port=8050 spring.application.name=springbootvue # Freemarker 配置 #是否开启缓存 spring.freemarker.cache=false #模板文件编码 spring.freemarker.charset=UTF-8 #是否检查模板位置 spring.freemarker.check-template-location=true #Content-Type的值 spring.freemarker.content-type=text/html #模板文件后缀 spring.freemarker.suffix=.ftl #模板文件位置 spring.freemarker.template-loader-path=classpath:/templates/
二、SpringBoot + Thymeleaf
2.1 控制器代码（StuController.java）
@Controller标识该类为控制器，处理 Web 请求。@RequestMapping("/stus")定义控制器的基础访问路径。loadData1方法处理/stus/loaddata1请求，创建ModelAndView对象，设置视图名为demo1（Thymeleaf 模板），并添加数据（msg、listkey、imgpath）供模板渲染。
package com.pp.springbootvue.controller;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.servlet.ModelAndView;
import java.util.ArrayList;
import java.util.List;
@Controller
@RequestMapping("/stus")
public class StuController {
@RequestMapping("/loaddata1")
public ModelAndView loadData1()
{
System.out.println("StuController is loadData1 start... ");
// 创建 ModelAndView 对象
ModelAndView mav = new ModelAndView();
mav.setViewName("demo1"); // 对应demo1.html,设置视图名为 demo1（Thymeleaf 模板）
mav.addObject("msg","喵喵咪");
List lists = new ArrayList();
lists.add("one");
lists.add("two");
lists.add("three");
mav.addObject("listkey",lists);
mav.addObject("imgpath","https://tse3-mm.cn.bing.net/th/id/OIP-C.tZUyXnE2DA_qqCkDAZZJgQAAAA?w=208&h=367&c=7&r=0&o=7&cb=12&dpr=1.3&pid=1.7&rm=3");
return mav;
}
} 2.2 Thymeleaf 模板（demo1.html）
th:text="${msg}"：使用 Thymeleaf 表达式，将控制器传递的msg数据渲染到<div>标签中。th:each="item:${listkey}"：遍历listkey集合，th:text="${item}"将集合中的每个元素渲染到<td>标签。th:src="${imgpath}"：设置图片的 src 属性为控制器传递的imgpath地址。
Title
![]()
2.3 访问效果
访问 http://localhost:8050/stus/loaddata1，Thymeleaf 模板会将控制器传递的数据渲染成 HTML 页面，展示文本、表格和图片内容。
三、SpringBoot + Freemarker
3.1 控制器代码（EmpController.java）
类似 Thymeleaf 控制器，
load1方法处理请求，设置 Freemarker 视图chapter1，并传递数据name。
package com.pp.springbootvue.controller;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.servlet.ModelAndView;
@Controller
@RequestMapping("/emps")
public class EmpController {
@RequestMapping("/load1")
public ModelAndView load1()
{
System.out.println("EmpController is load1 start... ");
ModelAndView mav = new ModelAndView();
mav.setViewName("chapter1"); // 对应chapter1.ftl
mav.addObject("name","相信相信的力量");
return mav;
}
}3.2 Freemarker 模板（chapter1.ftl）
使用 Freemarker 简单的
${name}表达式，将控制器传递的name数据渲染到页面。
Title
${name}欢迎访问
3.3 访问效果
访问 http://localhost:8050/emps/load1，Freemarker 模板会渲染出“相信相信的力量”的文本内容。
四、SpringBoot + Vue 与 MVVM、axios
4.1 MVVM 思想
MVVM（Model-View-ViewModel）是一种软件架构模式。在 Vue 中：
Model：数据模型，对应 Vue 实例的
data属性，如message、imgpath等数据。View：视图，即 HTML 页面，包含各种标签和 Vue 指令（如
v-bind、v-for等）。ViewModel：视图模型，是 Vue 实例本身，它是连接 Model 和 View的桥梁，实现数据的双向绑定。当 Model 数据变化时，View 会自动更新；反之，View 上的操作也会同步到 Model 中。
4.2 Vue 页面（view1.html）
通过
<script>引入 Vue 库，创建 Vue 实例，el指定挂载的 DOM 元素（#app）。data中定义数据模型，{{item}}、v-on等实现数据到视图的绑定。
Title
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
这是Vue的初始化的页面
- {{item}}
<script type="text/javascript">
//MVVM: M:data:{},V:html视图+Vue指令 VM：虚拟DOM，基于面向对象底层解析
let vue =new Vue({
el:"#app",
data:{
lists:[]
},
methods:{
// clickdata:function(){
// console.log("按钮被点击");
// let that = this;
// axios.get("/loaddataone").then(function(resp){ 匿名函数的“this"指的是window窗口对象，“that"指的是vue对象
//
// console.log(JSON.stringify(resp));
// let resultData = resp.data;
// console.log(resultData);
// console.log(this);
// console.log(that);
// that.lists = resultData;
//
// });
//}
clickdata:function()
{
console.log(this);
axios.get("/loaddataone").then((resp)=>{ // 箭头函数的“this"指的是vue对象
console.log(JSON.stringify(resp));
console.log(this);
this.lists = resp.data;
});
}
}
});
</script>
4.3 控制器代码（DataController.java）
@ResponseBody注解表示将方法返回的对象直接作为响应体返回（通常转为 JSON 格式），这里返回一个字符串列表，供前端 Vue 页面通过 axios 获取。
package com.pp.springbootvue.controller;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.servlet.ModelAndView;
import java.util.ArrayList;
import java.util.List;
@Controller
public class DataController {
@RequestMapping("/loadview")
public ModelAndView LoadViewOne()
{
System.out.println("DataController is LoadViewOne start....");
ModelAndView mav = new ModelAndView();
mav.setViewName("view1");
return mav;
}
@RequestMapping("/loaddataone")
@ResponseBody
public List LoadDataOne()
{
System.out.println("DataController is LoadDataOne start....");
List lists =new ArrayList();
lists.add("张1");
lists.add("张2");
lists.add("张3");
return lists;
}
} 4.4 axios 与 this 指向
axios：是一个基于 Promise 的 HTTP 客户端，用于在浏览器和 Node.js 中发送 HTTP 请求。这里通过
axios.get("/loaddataone")向 SpringBoot 后端发送 GET 请求，获取数据。this指向：在普通匿名函数（如原来注释掉的代码中
then里的普通函数）中，this指向的是this指向调用该函数的对象 （浏览器环境下是window对象）。为了能在回调中操作 Vue 实例的数据，需要用that = this来保存 Vue 实例的引用。而箭头函数没有自己的
this，它的this继承自外层作用域。在then的箭头函数中（存在于Vue方法中），this指向的是 Vue 实例，所以可以直接通过this.lists = resp.data来更新 Vue 实例的数据，进而更新视图。
五、项目总结
SpringBoot 作为后端框架，能灵活整合 Thymeleaf、Freemarker 等服务端视图技术，也能与 Vue 这类前端框架结合，发挥各自优势。Thymeleaf 和 Freemarker 适合服务端渲染场景，而 Vue 结合 MVVM 思想和 axios，能实现更灵活的前后端分离开发。同时，JavaScript 中 this 指向在不同函数类型（普通匿名函数、箭头函数）下的差异，也是前端开发中需要重点关注的知识点，需要合理利用箭头函数能简化代码，避免 this 指向问题带来的困扰。
浙公网安备 33010602011771号