SpringBoot2.X之旅，FreeMarker模板及html静态化（Web Project）

最新推荐文章于 2024-09-15 16:56:05 发布
最新推荐文章于 2024-09-15 16:56:05 发布
阅读量1.6k 收藏 5
点赞数
分类专栏： springboot 文章标签： springboot freemarker整合 freemarker模板 freemarker静态化页面 生成html页面 freemarker
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_37138899/article/details/88776029
版权

一、使用idea新建web工程

1、引入freemarker依赖：

2、pom.xml文件为：

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>
    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.1.3.RELEASE</version>
        <relativePath/> <!-- lookup parent from repository -->
    </parent>
    <groupId>com.cobra.freemarker</groupId>
    <artifactId>freemarkerdemo</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <name>freemarkerdemo</name>
    <description>Demo project for Spring Boot</description>

    <properties>
        <java.version>1.8</java.version>
    </properties>

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

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

    </dependencies>

    <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
            </plugin>
        </plugins>
    </build>

</project>

3、整个工程目录结构：

二、后端coding：

1、定义domain，User.java：

package com.cobra.freemarker.domain;

/**
 * @Author: Baron
 * @Description:
 * @Date: Created in 2019/3/23 22:34
 */
public class User {

    private Integer userId;

    private String username;

    private String address;

    private String email;

    public Integer getUserId() {
        return userId;
    }

    public void setUserId(Integer userId) {
        this.userId = userId;
    }

    public String getUsername() {
        return username;
    }

    public void setUsername(String username) {
        this.username = username;
    }

    public String getAddress() {
        return address;
    }

    public void setAddress(String address) {
        this.address = address;
    }

    public String getEmail() {
        return email;
    }

    public void setEmail(String email) {
        this.email = email;
    }

    @Override
    public String toString() {
        return "User{" +
                "userId=" + userId +
                ", username='" + username + '\'' +
                ", address='" + address + '\'' +
                ", email='" + email + '\'' +
                '}';
    }
}

2、service层

定义接口UserService和方法：

package com.cobra.freemarker.service;

import com.cobra.freemarker.domain.User;

import java.util.Collection;

/**
 * @Author: Baron
 * @Description: 用户服务接口
 * @Date: Created in 2019/3/23 23:26
 */
public interface UserService {

    /**
     * 根据userId查找User
     * @param userId
     * @return
     */
    User findById(Integer userId);

    /**
     * 添加新用户
     * @param user
     */
    void add(User user);

    /**
     * 查询所有用户
     * @return
     */
    Collection<User> findAllUsers();

}

实现接口方法，使用ConcurrentHashMap存储用户信息，AtomicInteger生成用户id：

package com.cobra.freemarker.service.impl;

import com.cobra.freemarker.service.UserService;
import com.cobra.freemarker.domain.User;
import org.springframework.stereotype.Service;

import java.util.Collection;
import java.util.concurrent.ConcurrentHashMap;
import java.util.concurrent.ConcurrentMap;
import java.util.concurrent.atomic.AtomicInteger;

/**
 * @Author: Baron
 * @Description: 用户服务实现
 * @Date: Created in 2019/3/23 23:42
 */
@Service
public class UserServiceImpl implements UserService {

    private ConcurrentMap<Integer,User> userMap = new ConcurrentHashMap<>();

    private final static AtomicInteger idGenerator = new AtomicInteger();

    /**
     * 根据userId查找User
     *
     * @param userId
     * @return
     */
    @Override
    public User findById(Integer userId) {
        return userMap.get(userId);
    }

    /**
     * 添加新用户
     *
     * @param user
     */
    @Override
    public void add(User user) {
        user.setUserId(idGenerator.incrementAndGet());
        userMap.put(user.getUserId(), user);
    }

    /**
     * 查询所有用户
     *
     * @return
     */
    @Override
    public Collection<User> findAllUsers() {
        return userMap.values();
    }
}

3、controller层：

package com.cobra.freemarker.controller;

import com.cobra.freemarker.service.StaticService;
import com.cobra.freemarker.service.UserService;
import com.cobra.freemarker.domain.User;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.servlet.ModelAndView;

import java.util.Collection;
import java.util.Map;

/**
 * @Author: Baron
 * @Description: user的列表、添加、查看
 * @Date: Created in 2019/3/23 22:25
 */
@Controller
@RequestMapping("/user")
public class UserController {

    @Autowired
    private UserService userService;


    /**
     * 获取所有用户
     * @param modelAndView
     * @param map
     * @return
     */
    @GetMapping("/list")
    public ModelAndView index(ModelAndView modelAndView, Map<String, Object> map) {
        Collection<User> users = userService.findAllUsers();
        map.put("users",users);
        return new ModelAndView("list",map);
    }

    /**
     * 根据id获取单个用户详情
     * @param userId
     * @param map
     * @return
     */
    @GetMapping("/{userId}")
    public ModelAndView detail(@PathVariable("userId")Integer userId, Map<String, Object> map) {
        User user = userService.findById(userId);
        map.put("user", user);
        return new ModelAndView("detail",map);
    }

    /**
     * 返回添加用户页
     * @return
     */
    @GetMapping("/add")
    public ModelAndView add() {
        return new ModelAndView("add");
    }

    /**
     * 添加用户操作
     * @param user
     * @return
     */
    @PostMapping("/save")
    public ModelAndView save(User user) {
        userService.add(user);
        return new ModelAndView("success");
    }

}

三、前端视图模板的定义：

在resources下templates中定义模板，新建html文件，然后将文件名改为ftl（业务逻辑可以提前看第四部分测试）：

1、用户list.ftl列表页：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表页</title>
</head>
<style>
    td{text-align: center; height: 30px;}
    .code{width:40px }
    .username{width: 80px}
    .address{width: 150px}
    .link{width: 100px}
</style>
<body>
    <h3>欢迎来到！</h3>
    <a href="/user/add">添加新用户</a>
    <br>
    <br>
    <table>
        <thead>
            <tr>
                <td class="code">编号</td>
                <td class="username">姓名</td>
                <td class="address">地址</td>
                <td class="link">详情</td>
            </tr>
        </thead>
        <tbody>
            <#list users as user>
            <tr>
                <td class="code">${user.userId}</td>
                <td class="username">${user.username}</td>
                <td class="address">${user.address}</td>
                <td class="link"><a href="/user/${user.userId}" target="_blank">查看详情</a></td>
            </tr>
            </#list>
        </tbody>
    </table>
</body>
</html>

2、用户add.ftl添加页：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>新建用户</title>
</head>
<body>
    <h3>新建用户</h3>
    <form action="/user/save" method="post">
        <label>姓名：</label><input type="text" name="username" /><br><br>
        <label>地址：</label><input type="text" name="address" /><br><br>
        <label>邮箱：</label><input type="text" name="email" /><br><br>
        <input type="submit" value="提交" />
    </form>

</body>
</html>

3、用户success.ftl添加成功页，添加用户成功后返回列表页：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>添加成功</title>
</head>
    <body>
        <h4>添加成功！</h4><a href="http://localhost:8080/user/list" class="alert-link">三秒后自动跳转！</a>
    </body>
    <script>
        setTimeout('location.href="http://localhost:8080/user/list"',3000)
    </script>
</html>

4、单个用户detail.ftl详情页：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户详情</title>
    <style>
        td{height: 30px;}
        .left{width: 50px;}
        .right{width: 150px;}
    </style>
</head>
<body>
    <h3>用户详情</h3>
    <table>
        <tr><td class="left">编号：</td><td class="right">${user.userId}</td>
        <tr><td>姓名：</td><td>${user.username}</td>
        <tr><td>地址：</td><td>${user.address}</td>
        <tr><td>邮编：</td><td>${user.email}</td>
    </table>
</body>
</html>

四、测试freemarker的模板引擎功能：

1、启动工程，访问http://localhost:8080/user/list：

2、点击添加用户，并填写信息：

3、提交，显示添加成功：

4、返回列表：

5、点击查看详情：

五、页面静态化实现模板转化为html页面，可以让前端直接浏览html页面，减少对数据库的请求：

1、定义静态化服务接口StaticService 及将list.ftl生成index.html的方法：

package com.cobra.freemarker.service;

/**
 * @Author: Baron
 * @Description: 生成静态页面service
 * @Date: Created in 2019/3/24 2:04
 */
public interface StaticService {

    /**
     * 生成首页静态页面
     */
    void createIndexHtml();

}

2、实现类：

package com.cobra.freemarker.service.impl;

import com.cobra.freemarker.service.StaticService;
import com.cobra.freemarker.service.UserService;
import freemarker.template.Configuration;
import freemarker.template.Template;
import freemarker.template.TemplateException;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import java.io.*;
import java.net.URISyntaxException;
import java.util.HashMap;
import java.util.Map;

/**
 * @Author: Baron
 * @Description:
 * @Date: Created in 2019/3/24 2:07
 */
@Service
public class StaticServiceImpl implements StaticService {

    @Autowired
    private UserService userService;

    @Autowired
    private Configuration configuration;

    /**
     * 生成首页静态页面
     */
    @Override
    public void createIndexHtml() {
        try {
            /**获取输出目标文件输出流------开始*/
            String filepath = this.getClass().getResource("/").toURI().getPath()+"static/";
            File folder = new File(filepath);
            //如果文件夹不存在
            if (!folder.exists()) {
                folder.mkdir();
            }
            String indexFileName = "index.html";
            File indexHtml = new File(folder, indexFileName);
            //如果html文件不存在
            if (!indexHtml.exists()) {
                indexHtml.createNewFile();
            }
            Writer out = new BufferedWriter(new OutputStreamWriter(new FileOutputStream(indexHtml),"UTF-8"));
            /**获取输出目标文件输出流------结束*/

            //获取数据
            Map<String, Object> map = new HashMap<>();
            map.put("users", userService.findAllUsers());

            //获取模板
            Template template = configuration.getTemplate("list.ftl");

            //把数据和输出文件信息交给模板得到静态html文件
            template.process(map,out);

            out.flush();
            out.close();}
        catch (URISyntaxException e) {
            e.printStackTrace();
        } catch (IOException e) {
            e.printStackTrace();
        } catch (TemplateException e) {
            e.printStackTrace();
        }
    }
}

3、在UserController中，添加用户时，调用静态方法，实现每次添加用户，都会生成最新的静态页面，如果有修改、删除操作，也要调用静态化方法：

package com.cobra.freemarker.controller;

import com.cobra.freemarker.service.StaticService;
import com.cobra.freemarker.service.UserService;
import com.cobra.freemarker.domain.User;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.servlet.ModelAndView;

import java.util.Collection;
import java.util.Map;

/**
 * @Author: Baron
 * @Description: user的列表、添加、查看
 * @Date: Created in 2019/3/23 22:25
 */
@Controller
@RequestMapping("/user")
public class UserController {

    @Autowired
    private UserService userService;

    @Autowired
    private StaticService staticService;

    /**
     * 获取所有用户
     * @param modelAndView
     * @param map
     * @return
     */
    @GetMapping("/list")
    public ModelAndView index(ModelAndView modelAndView, Map<String, Object> map) {
        Collection<User> users = userService.findAllUsers();
        map.put("users",users);
        return new ModelAndView("list",map);
    }

    /**
     * 根据id获取单个用户详情
     * @param userId
     * @param map
     * @return
     */
    @GetMapping("/{userId}")
    public ModelAndView detail(@PathVariable("userId")Integer userId, Map<String, Object> map) {
        User user = userService.findById(userId);
        map.put("user", user);
        return new ModelAndView("detail",map);
    }

    /**
     * 返回添加用户页
     * @return
     */
    @GetMapping("/add")
    public ModelAndView add() {
        return new ModelAndView("add");
    }

    /**
     * 添加用户操作
     * @param user
     * @return
     */
    @PostMapping("/save")
    public ModelAndView save(User user) {
        userService.add(user);
        staticService.createIndexHtml();
        return new ModelAndView("success");
    }

}

4、测试：

添加一个用户之后，在static下会生成一个index.html页面：

直接访问生成的html页面：http://localhost:8080/index.html：

六、代码地址：https://github.com/yaobaron/freemarkerdemo

八轮Baron
关注
专栏目录
Springboot整合FreeMarker生成静态html两种方法
csweldn520的专栏
12-30 4487
模板的常用标签 在FreeMarker模板中可以包括下面几个特定部分： ${…}：称为interpolations，FreeMarker会在输出时用实际值进行替代。 ${name}可以取得root中key为name的value。 ${person.name}可以取得成员变量为person的name属性 <#…>：FTL标记（FreeMarker模板语言标记）：类似于HTML...
【SpringBoot】4、SpringBoot中整合Freemarker模板引擎
热门推荐
Asurplus
04-19 20万+
FreeMarker 是一款模板引擎： 即一种基于模板和要改变的数据， 并用来生成输出文本（ HTML 网页、电子邮件、配置文件、源代码等）的通用工具。 它不是面向最终用户的，而是一个 Java 类库，是一款程序员可以嵌入他们所开发产品的组件。 FreeMarker 是一个很值得去学习的模版引擎。它是基于模板文件生成其他文本的通用工具。本文主要介绍在 SpringBoot 中如何整合 FreeM...
SpringBoot静态化FreeMarker
xiao-啸
11-01 721
SpringBoot静态化FreeMarker 项目结构图 配置文件 pom.xml <?xml version="1.0" encoding="UTF-8"?> <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache
FreeMarker模板引擎：开发指南与实战手册
最新发布
weixin_42509507的博客
09-15 1070
本文还有配套的精品资源，点击获取 简介：FreeMarker是一个开源的模板引擎，主要用于生成动态文本内容，特别适合Java环境下的Web应用开发。它支持与Spring MVC等框架集成，通过分离业务逻辑和视图层，提高开发效率。本文详细介绍FreeMarker的核心概念、语法、Web集成、性能优化以及与其他技术的结合。学习FreeMarker将帮助开发者利用这一工具快速、安...
Spring Boot 整合 Freemarker，50 多行配置是怎么省略掉的？
weixin_30379531的博客
07-05 458
Spring Boot2 系列教程接近完工，最近进入修修补补阶段。Freemarker 整合貌似还没和大家聊过，因此今天把这个补充上。 已经完工的 Spring Boot2 教程，大家可以参考这里： 干货|最新版 Spring Boot2.1.5 教程+案例合集 Freemarker 简介 这是一个相当老牌的开源的免费的模版引擎。通过 Freemarker 模版，我们可以将数据渲染成 HTM...
SpringBoot整合Freemarker实现静态化
哈
10-25 1053
运行测试代码发现在当前项目根目录下生成了一个haha.html的文件。
Springboot 集成freemarker页面静态化
axibazZ的博客
09-23 361
页面静态化在一些大流量场景应用很多，需要学一下，各位快去学一下吧。二、配置application.yml。
SpringBoot2.2.X用Freemarker出现404的解决
08-25
在SpringBoot 2.2.x版本中，如果你尝试使用Freemarker模板引擎并遇到了404错误，这通常意味着SpringBoot无法正确地找到并解析你的Freemarker模板文件。这个问题的根源在于SpringBoot 2.2.x的一个变化，即默认的...
SpringBoot2 整合FreeMarker模板，完成页面静态化处理.docx
07-10
【SpringBoot2 整合FreeMarker模板，完成页面静态化处理】 在Web开发中，页面静态化是一种提高网站性能和用户体验的技术。它涉及到将原本动态生成的页面转换为静态HTML文件，减少对服务器的依赖，加快页面加载速度...
SpringBoot2.x入门到项目实战
02-18
**SpringBoot2.x入门到项目实战** SpringBoot是由Pivotal团队提供的全新框架，其设计目的是简化Spring应用的初始搭建以及开发过程。SpringBoot通过自动配置、起步依赖和内嵌Servlet容器等方式，使得创建和运行一个...
SpringBoot2.x系列教程（二十七）Springboot集成freemarker 404常见问题汇总
程序新视界
01-12 2864
在实战中，经常会遇到按照教程集成完freemarker，访问时却出现404的问题。本篇文章给大家汇总一下常见的问题及解决方案。 常见问题一 该问题之前章节也提到，就是启动类比如SpringbootFreemarkerApplication的位置不对，并不是位于顶级包下。一般情况下该启动类与controller包同级。springboot则会扫描启动类同级及其下级目录下的类和注解。 常见问题二 ma...
Springboot2.0.1 + freemarker + hibernate简单实例，可直接运行
05-03
步骤： 1、建立mysql数据库demo 2、运行sql脚本 3、更改application.properties中登陆用户名和密码 jdbc.username=xxx jdbc.password=xxx 4、运行Application类
基于spring boot 2集成hibernate及freemarker的简单实例
04-29
该demo是基于spring boot 2集成hibernate及freemarker的可以运行的最基本的例子。 希望能对大家有帮助。
通过SpringBoot访问HTML页面源码
10-25
通过SpringBoot访问HTML页面实例，代码简洁，易懂，有注释
springboot freeMarker html页面静态化 demo
FUSIPING的博客
05-22 1439
controller : @RequestMapping(value = "/main", method = RequestMethod.GET) public String main(Model model){ String w="Welcome fusiping FreeMarker!"; Map root = new HashMap(); ...
springboot Freemarker静态化页面生成并通过注解方式刷新
Chioce的博客
07-26 388
springboot Freemarker静态化页面生成并通过注解方式刷新
Spring Boot使用freemarker并且生成静态html页面
看山 看水 看世界
11-05 1万+
Spring Boot使用freemarker并且生成静态html页面之前我介绍了在spring boot中使用thymeleaf模板，这次我会给大家介绍在spring boot中使用freemarker模板技术，同时利用freemarker生成静态html页面。生成静态html页面就能实现网站的静态化进而提高网站的访问速度以及提高SEO能力。 首先在pom.xml中添加依赖添加依赖<depend
spring boot + freemarker 静态化以及遇到的坑
lisheng19870305的专栏
03-19 1338
页面静态化是网站开发过程中经常遇到的一个问题，今天主要讲的是spring boot 结合freemarker的静态化的方法。 第一步，引入相应的jar包 <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-freemarker</artifactId> </depen...
SpringBoot2.X模板引擎freemarker
weixin_43432438的博客
04-14 534
SpringBoot2.X模板引擎freemarker
SpringBoot2整合FreeMarker实现页面静态化
本文档主要介绍了如何在SpringBoot2中整合FreeMarker模板引擎来实现页面静态化处理，以及页面静态化和动态化的概念、应用场景和流程。通过将动态页面转换为静态HTML，可以提高页面加载速度，降低服务器压力。 一、...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值