当前位置: 首页 > news >正文

模板引擎Freemarker使用教程

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: true
    cache: false   #关闭模板缓存,方便测试
    settings:
      template_update_delay: 0
    suffix: .ftl   #页面模板后缀名
    charset: UTF-8
    template-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服务器,其并发能力要大得多。 

相关文章:

  • LabVIEW真空度监测与控制系统
  • 【RH124】第六章 管理本地用户和组
  • 启山智软的b2c前端页面设计
  • 【kind管理脚本-1】便捷使用 kind 创建、删除、管理集群脚本
  • CANoe CAPL——CANoe IL函数
  • vue3项目中模拟AI的深度思考功能
  • svelte+vite+ts+melt-ui从0到1完整框架搭建
  • 我的第一个开源小项目:内网文件传输工具技术解析
  • Android设置adjustResize时无法生效 解决办法
  • Go 错误处理
  • 单轨小车悬挂输送机安全规程
  • 通过学习opencv图像库编程借助第三方库函数完成一个综合程序设计
  • moviepy学习使用笔记
  • 浅层神经网络:全面解析(扩展)
  • 【OSG学习笔记】Day 1: OSG初探——环境搭建与第一个3D窗口
  • 【SpringCloud】构建分布式系统的利器
  • 超详解glusterfs部署
  • 【Java设计模式】第8章 单列模式讲解
  • 初学STM32之编码器测速以及测频法的实现
  • 【Java设计模式】第9章 原型模式讲解
  • 网站流量站怎么做的/佛山营销型网站建设公司
  • 网站首页图片怎么更换/深圳竞价托管
  • 建设班级网站/最佳磁力搜索天堂
  • 做网站怎么投放广告/营销网页
  • 博物馆设计/seo外包推广
  • 中国通信建设协会网站/天天广告联盟