当前位置：首页 > 行业动态 > 正文

Freemarker与HTML如何结合使用？

freemarker 是一个模板引擎，可以通过模板文件结合数据生成 html 内容。

FreeMarker 是一种基于模板的引擎，用于生成 HTML 网页、电子邮件、配置文件以及源代码等，在 Java Web 开发中，Spring Boot 是一个流行的框架，而 FreeMarker 可以与 Spring Boot 无缝结合，帮助开发者快速构建动态网页应用。

Freemarker与HTML如何结合使用？ 第1张

环境配置

确保你的开发环境中已经安装了 Java 和 Maven，通过以下步骤配置 Spring Boot 和 FreeMarker 的环境：

1、添加依赖：在项目的pom.xml 文件中添加 Spring Boot 和 FreeMarker 的依赖。

 <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>
   </dependencies>

2、配置 FreeMarker：在src/main/resources 目录下创建一个application.properties 文件，并添加以下属性：

 spring.freemarker.template-loader-path=classpath:/templates/
   spring.freemarker.content-type=text/html
   spring.freemarker.suffix=.ftl

创建 FreeMarker 模板

我们将创建一个简单的 FreeMarker 模板，在src/main/resources/templates 目录下创建一个index.ftl 文件，并添加以下内容：

<!DOCTYPE html>
<html>
<head>
    <title>Welcome to My Web App</title>
</head>
<body>
    <h1>${message}</h1>
</body>
</html>

在这个模板中，我们使用了 FreeMarker 的语法${message} 来显示动态数据。

创建 Controller 并注入数据

我们将创建一个 Controller 来处理 Web 请求，并将数据注入到 FreeMarker 模板中，在src/main/java 目录下创建一个名为HomeController 的类，并添加以下代码：

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
@Controller
public class HomeController {
    @GetMapping("/")
    public String home(Model model) {
        model.addAttribute("message", "Hello, FreeMarker!");
        return "index";
    }
}

在这个控制器中，我们使用@GetMapping 注解定义了一个根路径的 GET 请求处理方法，该方法将一个字符串属性message 添加到模型中，并返回模板名称index。

运行应用程序

完成上述步骤后，你可以运行你的 Spring Boot 应用程序，打开浏览器并访问http://localhost:8080，你应该会看到显示 “Hello, FreeMarker!” 的页面。

表格示例

假设你需要在页面上显示一个用户列表，可以使用 FreeMarker 的列表指令来实现，修改index.ftl 模板以包含一个表格：

<!DOCTYPE html>
<html>
<head>
    <title>Users</title>
</head>
<body>
    <h1>User List</h1>
    <table border="1">
        <thead>
            <tr>
                <th>ID</th>
                <th>Name</th>
                <th>Email</th>
            </tr>
        </thead>
        <tbody>
        <#list users as user>
            <tr>
                <td>${user.id}</td>
                <td>${user.name}</td>
                <td>${user.email}</td>
            </tr>
        </#list>
        </tbody>
    </table>
</body>
</html>

在HomeController 中添加一个方法来返回用户列表：

import java.util.Arrays;
import java.util.List;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
@Controller
public class UserController {
    @GetMapping("/users")
    public String listUsers(Model model) {
        List<User> users = Arrays.asList(
            new User(1, "John Doe", "john@example.com"),
            new User(2, "Jane Roe", "jane@example.com")
        );
        model.addAttribute("users", users);
        return "users";
    }
}

在这个例子中，我们创建了一个简单的用户列表，并通过模型将其传递给视图，访问http://localhost:8080/users 可以看到用户列表以表格形式展示。

FAQs

Q1: FreeMarker 如何支持条件判断？

A1: FreeMarker 提供了<#if>、<#elseif> 和<#else> 指令来进行条件判断。

<#if user?? && user.admin>
    <p>Welcome, admin!</p>
<#else>
    <p>Welcome, ${user.name}!</p>
</#if>

Q2: FreeMarker 如何处理循环？

A2: FreeMarker 使用<#list> 指令来处理循环。

<#list items as item>
    <li>${item}</li>
</#list>

这个指令会遍历items 集合，并为每个元素生成一个<li>

web开发数据绑定模板引擎
本站发布或转载的文章及图片均来自网络，其原创性以及文中表达的观点和判断不代表本站，有问题联系侵删！
本文链接：https://www.xixizhuji.com/fuzhu/5146.html
0

相关文章