1.什么是模板引擎
FreeMarker 是一款 模板引擎: 即一种基于模板和要改变的数据, 并用来生成输出文本(HTML网页,电子邮件,配置文件,源代码等)的通用工具。 它不是面向最终用户的,而是一个Java类库,是一款程序员可以嵌入他们所开发产品的组件。
与目前最常用的响应方式不同,模板引擎不仅仅返回前端请求的数据,而是在服务端将模板+数据一同渲染成一个页面返回给前端,这就是模板引擎。它在某些方面的作用很大,比如在访问量比较大时,对于一些很少更改的页面,我们可以采用模版引擎技术将其“静态化”,前端访问这个页面的请求不会进到数据库,而是直接将整个页面返回,这也大大减少了数据库的压力。
具体流程:
1、浏览器请求web服务器
2、服务器渲染页面,渲染的过程就是向jsp页面(模板)内填充数据(模型)。
3、服务器将渲染生成的页面返回给浏览器。
所以模板引擎就是:模板+数据=输出,Jsp页面就是模板,页面中嵌入的jsp标签就是数 据,两者相结合输出html网页。
这种技术和早期jsp的原理很相似
2.使用方法
1.打开idea创建一个接口类用于接收请求,加上@Controller注解,注意一定是@Controller注解,不能是@RestController,因为我们相当于直接将页面返回,前端拿到返回的数据直接可以进行展示,所以数据的格式不能变
@Controller
public class FreemarkerController {}
2.添加依赖
<!-- Spring Boot 对结果视图 Freemarker 集成 -->
<dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-freemarker</artifactId>
</dependency>
3.在资源目录根路径下创建一个templates包,用于存放模版资源
在包下创建一个文件后缀名为ftl,其中编写一些数据。示例:
<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="description" content=""><meta name="author" content=""><link rel="icon" href="/static/img/asset-favicon.ico"><title>享学网-${model.courseBase.name}</title><link rel="stylesheet" href="/static/plugins/normalize-css/normalize.css" /><link rel="stylesheet" href="/static/plugins/bootstrap/dist/css/bootstrap.css" /><link rel="stylesheet" href="/static/css/page-learing-article.css" />
</head><body data-spy="scroll" data-target="#articleNavbar" data-offset="150">
<!-- 页面头部 -->
<!--#include virtual="/include/header.html"-->
<!--页面头部结束sss-->
<div id="learningArea"><div class="article-banner"><div class="banner-bg"></div><div class="banner-info"><div class="banner-left"><p>${model.courseBase.mtName!''}<span>\ ${model.courseBase.stName!''}</span></p><p class="tit">${model.courseBase.name}</p><p class="pic"><#if model.courseBase.charge=='201000'><span class="new-pic">免费</span><#else><span class="new-pic">特惠价格¥${model.courseBase.price!''}</span><span class="old-pic">原价¥${model.courseBase.originalPrice!''}</span></#if></p><p class="info"><a href="#" @click.prevent="startLearning()">马上学习</a><span><em>难度等级</em><#if model.courseBase.grade=='204001'>初级<#elseif model.courseBase.grade=='204002'>中级<#elseif model.courseBase.grade=='204003'>高级</#if></span><span><em>课程时长</em>2小时27分</span><span><em>评分</em>4.7分</span><span><em>授课模式</em><#if model.courseBase.teachmode=='200002'>录播<#elseif model.courseBase.teachmode=='200003'>直播</#if></span></p></div>
</body>
在你的Controller中定义一个方法用于处理模板,返回值是ModelAndView
你需要先创建一个ModelAndView对象,用于返回模板(详见MVC工作流程)
使用setViewName()方法指定模版,参数就是你的模版名称
然后使用addObject()方法指定模型,第一个参数是用于在模板中动态渲染的模型类的名称,第二个参数是具体的模型类,包含信息。
返回modelAndView对象
@GetMapping("/coursepreview/{courseId}")public ModelAndView preview(@PathVariable("courseId") Long courseId){ModelAndView modelAndView = new ModelAndView();//指定模版modelAndView.setViewName("course_template");CoursePreviewDto coursePreviewInfo = coursePublishService.getCoursePreviewInfo(courseId);//指定数据modelAndView.addObject("model", coursePreviewInfo);return modelAndView;}
在你的模板中,使用这些方式对你的数据进行动态渲染:
具体更多的渲染方式见:
http://freemarker.foofun.cn/ http://freemarker.foofun.cn/ref_directives.html
在配置文件中加上这些属性:
spring:freemarker:enabled: truecache: false #关闭模板缓存,方便测试settings:template_update_delay: 0suffix: .ftl #页面模板后缀名charset: UTF-8template-loader-path: classpath:/templates/ #页面模板位置(默认为 classpath:/templates/)resources:add-mappings: false #关闭项目中的静态资源映射(static、resources文件夹下的资源)
我的模板文件中绑定着样式文件、js文件,我不再进行提供,你需要根据自己的模版创建一个对应的css、js文件放入指定路径下。
启动项目并打开浏览器访问服务地址,效果如下:
3.优化建议
1.因为模版数据是基本不变的,所以我们可以考虑直接将模版上传到文件系统,让请求不在访问服务端。例如:使用分布式文件系统minio实现文件上传_分布式数据库与minio-CSDN博客
2.我们也可以利用nginx代理一些静态文件,比如css、js文件等,因为nginx相比tomcat服务器,其并发能力要大得多。