Spring Boot和thymeleaf ， freemarker , jsp三个前端模块的运用

最新推荐文章于 2022-09-26 12:20:20 发布

咸鱼n+号

最新推荐文章于 2022-09-26 12:20:20 发布

阅读量546

点赞数

CC 4.0 BY-SA版权

分类专栏： spring boot 文章标签： spring boot的三个前端模块的简单用法

本文链接：https://blog.youkuaiyun.com/sssyyyy7/article/details/90645931

spring boot 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了Spring Boot与三个前端模块的运用。Thymeleaf可在创建Spring Boot工程时勾选导入依赖，能直接获取controller类中保存到model的数据；Freemarker与Thymeleaf类似，只是书写方式不同；JSP在Spring Boot里用法复杂，需手动添加依赖并创建webapp。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

spring boot和三个前端模块的运用

一 .Thymeleaf

在idea上创建spring boot 工程，勾选Thymeleaf前端模块，它会自动导入Thymeleaf的依赖
在这里插入图片描述

创建了spring boot工程后，勾选web和要用的前端模块

然后随便创建一个bean类，（省略了getter和setter方法）

package com.liy.thymeleaf.bean;

public class User {
    private int id;
    private String name;

然后直接写个controller类把数据弄到thymeleaf前端模块里去

import com.liy.thymeleaf.bean.User;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.servlet.ModelAndView;

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

@Controller
public class UserController {

    @GetMapping("/user")
    public String lists(Model m){
        List<User> users = new ArrayList<>();
        for (int i = 1;i < 10 ; i++){
            User user = new User();
            user.setId(i);
            user.setName("李四"+i);
            users.add(user);
        }
       m.addAttribute("users",users);
        m.addAttribute("username","hahahh");
        return "index";
    }
}

前端模块写个表格，把数据循环出来就行，thymeleaf也是html的后缀

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <table border="1">
        <tr>
            <td>编号</td>
            <td>姓名</td>
            <td>username</td>
        </tr>
        <tr th:each="user : ${users}">
            <td th:text="${user.id}"></td>
            <td th:text="${user.name}"></td>
            <td th:text="${username}"></td>
        </tr>
    </table>
<script th:inline="javascript">
    var username = [[${username}]];
    console.log(username)
</script>
</body>
</html>

结果为

在这里插入图片描述

Thymeleaf 在书写

<tr th:each="user : ${users}">

时就可以导入“th”

如果导入的网站和下面的有异，则改成下面那个网址

<html lang="en" xmlns:th="http://www.thymeleaf.org">

导入spring boot里的thymeleaf依赖，里面有这个前端模块的自动化配置

可以在ThymeleafProperties和ThymeleafAutoConfiguration里去看一些信息

Thymeleaf可以直接获取到controller类里的保存到model里的数据

在js里用 [[${xxxx}]]

body里面直接用 ${}

二. freemarker

freemarker和thymeleaf类似，也是直接在创建spring boot的工程师选择freemarker作为前端模块，那样会自动导入依赖

和thymeleaf只是在书写的方式不一样

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>freemarker</title>
</head>
<body>
<table border="1">
    <tr>
        <td>编号</td>
        <td>姓名</td>
    </tr>
    <#list users as user>
        <tr>
            <td>${user.id}</td>
            <td>${user.name}</td>
        </tr>
    </#list>
</table>

</body>
</html>

freemarker循环用法

 <#list users as user>
        <tr>
            <td>${user.id}</td>
            <td>${user.name}</td>
        </tr>
    </#list>

三.jsp

jsp是我们java开发最基础的前端模块，但在spring boot里却是用法比较复杂的前端模块

在创建spring boot工程里的前端模块里没有jsp的依赖

所以创建了工程后，得去pom.xml里添加依赖，四个依赖

    <dependency>
        <groupId>jstl</groupId>
        <artifactId>jstl</artifactId>
        <version>1.2</version>
    </dependency>
    <dependency>
        <groupId>javax.servlet</groupId>
        <artifactId>javax.servlet-api</artifactId>
    </dependency>
    <dependency>
        <groupId>javax.servlet.jsp</groupId>
        <artifactId>javax.servlet.jsp-api</artifactId>
        <version>2.3.1</version>
    </dependency>
    <dependency>
        <groupId>org.apache.tomcat.embed</groupId>
        <artifactId>tomcat-embed-jasper</artifactId>
    </dependency>

然后得创建webapp，在webapp里面再创建 xx.jsp (导入了jstl标签库)

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<html>
<head>
    <title>Title</title>
</head>
<body>
    <table border="1">
        <tr>
            <td>编号</td>
            <td>姓名</td>
        </tr>
        <c:forEach items="${users}" var="user">
            <tr>
                <td>${user.id}</td>
                <td>${user.name}</td>
            </tr>
        </c:forEach>
    </table>
</body>
</html>

注意和jsp不同，thymeleaf和freemarker的页面默认是要安装到 resources 里 /templates/ 目录下，可以自己去修改

在这里插入图片描述