IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> Java知识库 -> springboot 整合 freemarker前端模板引擎实现数据展示 -> 正文阅读

[Java知识库]springboot 整合 freemarker前端模板引擎实现数据展示

一.freemaker

1.简介

FreeMarker是一款模板引擎: 即一种基于模板和要改变的数据, 并用来生成输出文本(HTML网页、电子邮件、配置文件、源代码等)的通用工具。 它不是面向最终用户的,而是一个Java类库,是一款程序员可以嵌入他们所开发产品的组件。
FreeMarker是免费的,基于Apache许可证2.0版本发布。其模板编写为FreeMarker Template Language(FTL),属于简单、专用的语言。需要准备数据在真实编程语言中来显示,比如数据库查询和业务运算, 之后模板显示已经准备好的数据。在模板中,主要用于如何展现数据, 而在模板之外注意于要展示什么数据

2.freemark构建

1、首先要构建一个freemark工程
步骤和之前构建springBoot项目大致相同,但是多了一步就是要勾选模板引擎中的apache freemark
在这里插入图片描述
2、导入pom依赖,更改资源文件
pom依赖:

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

application.yml配置文件:

在这里插入代码片server:
  port: 8080
spring:
  datasource:
#数据库名称与密码
    username: *****
    password: *****
    driver-class-name: com.mysql.cj.jdbc.Driver
    url: jdbc:mysql://localhost:3306/crm?useSSL=false&serverTimezone=Asia/Shanghai&useUnicode=true&characterEncoding=utf-8&allowPublicKeyRetrieval=true
  freemarker:
    #指定HttpServletRequest的属性是否可以覆盖controller的model的同名项
    allow-request-override: false
    #req访问request
    request-context-attribute: req
    #后缀名freemarker默认后缀为.ftl,当然你也可以改成自己习惯的.html
    #(如果默认不写此项的话,好像是得在Java中进行配置加载类,否则会出错)
    suffix: .ftl
 
    #设置响应的内容类型
    content-type: text/html;charset=utf-8
    #是否允许mvc使用freemarker
    enabled: true
    #是否开启template caching
    cache: false
    #设定模板的加载路径,多个以逗号分隔,默认: [“classpath:/templates/”]
    template-loader-path: classpath:/templates/
    #设定Template的编码
    charset: UTF-8
#显示日志
logging:
  level:
    com.zxy.code.mapper: debug

注意
模板加载路径:要放在该路径下

#设定模板的加载路径,多个以逗号分隔,默认: [“classpath:/templates/”] template-loader-path: classpath:/templates/

在Java中写配置freemaker的类

package com.chinaunicom.ibos.order.web.config;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.view.freemarker.FreeMarkerConfigurer;

import freemarker.template.TemplateModelException;

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

import javax.annotation.PostConstruct;

/**
 * Freemarker配置
 *
 * @author Mark sunlightcs@gmail.com
 */
@Configuration
public class FreemarkerConfig {

	@Value("${spring.profiles.active}")
	private String activeProfile;
	
	@Autowired
	private freemarker.template.Configuration config;
	
    @Bean
    public FreeMarkerConfigurer freeMarkerConfigurer() throws TemplateModelException{
        FreeMarkerConfigurer configurer = new FreeMarkerConfigurer();
        configurer.setTemplateLoaderPath("classpath:/templates");
        Map<String, Object> variables = new HashMap<>(1);
        variables.put("param", "param");
        configurer.setFreemarkerVariables(variables);

        Properties settings = new Properties();
        settings.setProperty("default_encoding", "utf-8");
        settings.setProperty("number_format", "0.##");
        configurer.setFreemarkerSettings(settings);
        return configurer;
    }
    
    @PostConstruct
    public void setConfigure() throws Exception {
    	config.setSharedVariable("activeProfile", activeProfile);
    }
}

在这里插入图片描述

3、新建user界面
如果没有模板的话,到设置里面进行新建一个freemark模板
在这里插入图片描述
在这里插入图片描述

在生成的user.ftl模板中,通过${}的形式获取controller控制层中传的数据集

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<h1>hello,家人们</h1>
<h1>msg:${msg}</h1>
<div>
    <#if msg! != "">
        <h1>msg:${msg}</h1>
    </#if>

    <#list mapList! as users>
        <div>
            <h1>${users.userName}</h1>
            <h1>${users.password}</h1>
        </div>

    </#list>
</div>
</body>
</html>

4.创建controller控制层,使用ModelAndView返回数据

在这里插入图片描述

在这里插入图片描述
返回以上数据值,则表示 新建freemark模板成功

更多freemaker介绍:
https://blog.csdn.net/zxy15974062965/article/details/122818338

官网:
http://freemarker.foofun.cn/ref_builtins_boolean.html

  Java知识库 最新文章
计算距离春节还有多长时间
系统开发系列 之WebService(spring框架+ma
springBoot+Cache(自定义有效时间配置)
SpringBoot整合mybatis实现增删改查、分页查
spring教程
SpringBoot+Vue实现美食交流网站的设计与实
虚拟机内存结构以及虚拟机中销毁和新建对象
SpringMVC---原理
小李同学: Java如何按多个字段分组
打印票据--java
上一篇文章      下一篇文章      查看所有文章
加:2022-06-16 21:31:54  更:2022-06-16 21:32:42 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年11日历 -2024/11/23 18:30:27-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码