SpringBoot集成FreeMarker

最新推荐文章于 2023-07-07 11:44:28 发布

浪飞yes

最新推荐文章于 2023-07-07 11:44:28 发布

阅读量615

点赞数 1

分类专栏：技术杂项文章标签： spring boot freemarker java bootstrap

本文链接：https://blog.csdn.net/langfeiyes/article/details/118056715

版权

技术杂项专栏收录该内容

30 篇文章 8 订阅

订阅专栏

环境

springboot2.4.3 + freemarker2.3.31 + bootstrap3

需求

浏览器中访问：http://localhost:8080/employee/list 列表员工数据

操作步骤

步骤1：创建项目 springboot-freemarker

步骤2：在/项目/resourcess/static 文件中导入bootstrap3相关文件

步骤3：导入依赖

核心依赖有3个：springboot parent + web环境 + freemarker 依赖

在pom.xml文件中导入

    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.4.3</version>
        <relativePath/>
    </parent>

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

步骤4：在/项目/resources/application.properties配置freemarker

#暴露session对象的属性
spring.freemarker.expose-session-attributes=true
#配置为传统模式，空值自动处理
spring.freemarker.settings.classic_compatible=true
#重新指定模板文件后缀 springboot 2.2.x 后 默认后缀为 .ftlh
spring.freemarker.suffix=.ftl

其他配置

spring.freemarker.enabled=true: 是否开启freemarker支持
spring.freemarker.charset=UTF-8: 模板编码
spring.freemarker.content-type=text/html: 模板contenttype
spring.freemarker.expose-session-attributes: 是否开启session属性暴露,默认false
spring.freemarker.prefix: 加载模板时候的前缀
spring.freemarker.settings.*: 直接配置freemarker参数
spring.freemarker.suffix: 模板文件后缀
spring.freemarker.template-loader-path=classpath:/templates/: 模板加载地址

步骤5：编写相关相关代码

代码结构：

实体类：Employee

package com.langfeiyes.freemarker.entities;

/**
 * 员工对象
 */
public class Employee {
    private Long id;
    private String name;
    private int age;
    public Employee() {
    }
    public Employee(Long id, String name, int age) {
        this.id = id;
        this.name = name;
        this.age = age;
    }
    public Long getId() {
        return id;
    }
    public void setId(Long id) {
        this.id = id;
    }
    public String getName() {
        return name;
    }
    public void setName(String name) {
        this.name = name;
    }
    public int getAge() {
        return age;
    }
    public void setAge(int age) {
        this.age = age;
    }
}

接口类：EmployeeController

package com.langfeiyes.freemarker.controller;


import com.langfeiyes.freemarker.entities.Employee;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;

import java.util.ArrayList;
import java.util.List;

@Controller
@RequestMapping("employee")
public class EmployeeController {


    //假装是从数据库中查询出来的
    private List<Employee> queryList(){
        List<Employee> list = new ArrayList<>();
        list.add(new Employee(1L, "zhangsan", 16));
        list.add(new Employee(2L, "lisi", 17));
        list.add(new Employee(3L, "wangwu", 18));
        list.add(new Employee(4L, "zhaoliu", 19));
        list.add(new Employee(5L, "qianqi", 20));
        return list;
    }

    /**
     * 员工列表
     * @return
     */
    @RequestMapping("/list")
    public String list(Model model){
        model.addAttribute("emps", queryList());
        return  "employee/list"; //返回员工模板
    }

}

启动类：App

package com.langfeiyes.freemarker;


import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

@SpringBootApplication
public class App {
    public static void main(String[] args) {
        SpringApplication.run(App.class, args);
    }
}

步骤6：编写员工列表模板

代码结构：

<html lang="en">
<head>
    <title>员工列表</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="/bootstrap/css/bootstrap.css" type="text/css" />
    <script type="text/javascript" src="/bootstrap/js/bootstrap.js"></script>
</head>
<body>

<div class="container-fluid " style="margin-top: 20px">
    <div class="row">
        <div class="col-sm-10">
            <table class="table table-striped table-hover" >
                <thead>
                    <tr>
                        <th>序号</th>
                        <th>员工名称</th>
                        <th>员工年龄</th>
                        <th>操作</th>
                    </tr>
                </thead>
               <#list emps as e>
                   <tr>
                       <td>${e_index+1}</td>
                       <td>${e.name!}</td>
                       <td>${e.age!}</td>

                       <td>
                           <a class="btn btn-info btn-xs " href="javascript:;" >
                               <span class="glyphicon glyphicon-edit"></span> 编辑
                           </a>
                           <a href="javascript:;" class="btn btn-danger btn-xs ">
                               <span class="glyphicon glyphicon-trash"></span> 删除
                           </a>
                       </td>
                   </tr>
               </#list>
            </table>

        </div>
    </div>
</div>

</body>
</html>

步骤7：测试

右键执行App类