Freemarker与HTML如何结合使用?

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

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

Freemarker与HTML如何结合使用?

环境配置

确保你的开发环境中已经安装了 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 的类,并添加以下代码:

Freemarker与HTML如何结合使用?

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 如何支持条件判断?

Freemarker与HTML如何结合使用?

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>

原创文章,作者:未希,如若转载,请注明出处:https://www.kdun.com/ask/1250786.html

本网站发布或转载的文章及图片均来自网络,其原创性以及文中表达的观点和判断不代表本网站。如有问题,请联系客服处理。

(0)
未希新媒体运营
上一篇 2024-10-29 08:55
下一篇 2024-10-29 09:02

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注

产品购买 QQ咨询 微信咨询 SEO优化
分享本页
返回顶部
云产品限时秒杀。精选云产品高防服务器,20M大带宽限量抢购 >>点击进入