Spring Boot和thymeleaf ， freemarker , jsp三個前端模組的運用

spring boot和三個前端模組的運用

一 .Thymeleaf

在idea上建立spring boot 工程，勾選Thymeleaf前端模組，它會自動匯入Thymeleaf的依賴

建立了spring boot工程後，勾選web和要用的前端模組

然後隨便建立一個bean類

package com.liy.thymeleaf.bean;

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

    @Override
    public String toString() {
        return "User{" +
                "id=" + id +
                ", name='" + name + '\'' +
                '}';
    }

    public int getId() {
        return id;
    }

    public void setId(int id) {
        this.id = id;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = 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標籤庫)

<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2019/5/28 0028
  Time: 17:05
  To change this template use File | Settings | File Templates.
--%>
<%@ 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/ 目錄下，可以自己去修改

Spring Boot和thymeleaf ， freemarker , jsp三個前端模組的運用

spring boot和三個前端模組的運用一 .Thymeleaf 在idea上建立spring boot

Spring Boot和Thymeleaf整合，結合JPA實現分頁效果

在專案裡，我需要做一個Spring Boot結合Thymeleaf前端模版，結合JPA實現分頁的演示效果。做的時候發現有些問題，也查了現有網上的不少文件，發現能全棧實現的不多，所以這裡我就把我的做法，全部程式碼和步驟貼出來供大家參考。 1 建立專案，用pom.xml引入依賴 &nb

spring boot ----> 常用模板freemarker和thymeleaf

ati include 上下文 tlist rpath num 源文件添加 page ===========================freemarker=================================== freemarker 官網：https:

Spring Boot 整合模板引擎（jsp、Freemarker 、Thymeleaf ）

整合JSP模板新增依賴建立 maven 工程，在 pom.xml 檔案中新增如下依賴： <dependency> <groupId>javax.servlet</groupId> <artifactId>

微服務（三）--------微服務，Spring boot 和Spring Cloud之間的聯絡

前面我們已經瞭解了spring boot 的快速入門，那麼大家對微服務，spring boot，spring cloud 三個之間的聯絡知道麼？相信大家對於這些微服務和spring boot，springcloud還停留在迷迷糊糊的狀態，現在我就簡單的說下他們三個的關

Spring Boot整合Thymeleaf實戰筆記，系統學習Thymeleaf

Thymeleaf1.理解：（1）Thymeleaf是一款Java模板引擎，類似於JSP,Freemarker,能夠處理html,xml,javaScript,Css甚至純文字；（2）自然模板，原型即頁面（3）語法優雅易懂，OGNL,SpringEL（4）使用web標準，支援HTML52.Thymeleaf標

Spring，Spring boot和SpringMVC關係串想

Spring框架是一個大家族，再大的框架必然也是基於基礎，所以說到這三個概念之間的關係，我想先梳理一下近幾年java web專案開發框架的演變。最初的靜態頁面以至於JSP這類技術暫不討論，大部分人都是servlet開始入門的。其實每個JSP頁面在執行的時候都會編譯成一個servlet類檔案，所

為什麼Java大神，都在看Spring Boot和Spring Cloud的書？

如果你是一名Java開發人員，並且最近正打算學習Spring Boot和Spring Cloud框架並尋找一些關於它們的最好的書籍，那麼，你今天就來對地方了。本文，我們將討論一些學習Spring Boot和Spring Cloud的最佳書籍，在這之前，我們先來探討一下，什麼是

Spring Boot啟動之後，預設載入CommandLineRunner介面和註解兩種方式PostContruct

其實從依賴注入的字面意思就可以知道，要將物件p注入到物件a，那麼首先就必須得生成物件p與物件a，才能執行注入。所以，如果一個類A中有個成員變數p被@Autowired註解，那麼@Autowired注入是發生在A的構造方法執行完之後的。如果想在生成物件時候完成某些初始化操作，而偏偏這些初始化操作又依賴於依賴注入

Spring Boot通過Mybatis，使用mapper介面和xml配置sql，連線資料庫

由於最早使用的是註解的方式來連線資料庫，所以比較簡單，後來發行做後臺的同事用的一般都是xml的形式，所以也跟著學習了下。發行mapper介面和xml配置sql，比較複雜，尤其是對我這種新手，研究了好久才配置成功。為了防止忘記，故寫下來，也給準備學習的人當參考

如何在spring boot 專案中加入freemarker，以及使用yaml語法時的注意事項

最近在做一個用郵件傳送報表的專案，要求在郵件正文中將excel表格顯示出來。我考慮到通過字串拼接表格太麻煩，而且不利於維護，所以使用freemarker做郵件模板來做展示。專案環境:spring boot 構建工具:maven 步驟如下: 1.引入pom依賴

Spring-Boot-操作-Redis，三種方案全解析！

在 Redis 出現之前，我們的快取框架各種各樣，有了 Redis ，快取方案基本上都統一了，關於 Redis，鬆哥之前有一個系列教程，尚不瞭解 Redis 的小夥伴可以參考這個教程： Redis 教程合集使用 Java 操作 Redis 的方案很多，Jedis 是目前較為流行的一種方案，除了 Jedi

spring boot無法啟動，或者正常啟動之後無法訪問報404的解決辦法

沒有自己路徑 con 啟動不了瀏覽器了無搭建報錯以前用spring boot都是用idea的自動創建，或者是用的Jhipster創建的，就沒有深究怎麽去搭建。但是今天晚上心血來潮，想自己搭一個demo來整合一些技術，於是就花一點時間來手動搭。因為今

Spring Boot 整合 Elasticsearch，實現 function score query 權重分查詢

search 小寫業務 jpg 啟動會 last cti cal agen 摘要: 原創出處 www.bysocket.com 「泥瓦匠BYSocket 」歡迎轉載，保留摘要，謝謝！『預見未來最好的方式就是親手創造未來 – 《史蒂夫·喬布斯

spring boot 登錄註冊 demo （三） -- 前後端傳遞

lin 表單提交 www col log ref rec put 內容前端頁面通過thymeleaf渲染　　　　<dependency> <groupId>org.springframework.boot</gro

Spring Boot：Thymeleaf篇

格式驗證機制 html webapp 表單 freemark entity tac err Spring Boot幹貨系列：（四）Thymeleaf篇http://www.cnblogs.com/zheting/p/6707037.html 前言

Spring Boot使用thymeleaf模板時報異常：template might not exist or might not be accessible by any of the configured Template Resolvers

logs pla 開頭 spring 方法 temp ring mode acc 錯誤如下： template might not exist or might not be accessible by any of the configured Template R

Spring Boot和thymeleaf ， freemarker , jsp三個前端模組的運用

Spring Boot和thymeleaf ， freemarker , jsp三個前端模組的運用

Spring Boot和Thymeleaf整合，結合JPA實現分頁效果

spring boot ----> 常用模板freemarker和thymeleaf

Spring Boot 整合模板引擎（jsp、Freemarker 、Thymeleaf ）

微服務（三）--------微服務，Spring boot 和Spring Cloud之間的聯絡

Spring Boot整合Thymeleaf實戰筆記，系統學習Thymeleaf

Spring，Spring boot和SpringMVC關係串想

為什麼Java大神，都在看Spring Boot和Spring Cloud的書？

Spring Boot啟動之後，預設載入CommandLineRunner介面和註解兩種方式PostContruct

Spring Boot通過Mybatis，使用mapper介面和xml配置sql，連線資料庫

如何在spring boot 專案中加入freemarker，以及使用yaml語法時的注意事項

Spring-Boot-操作-Redis，三種方案全解析！

spring boot無法啟動，或者正常啟動之後無法訪問報404的解決辦法

Spring Boot 整合 Elasticsearch，實現 function score query 權重分查詢

spring boot 登錄註冊 demo （三） -- 前後端傳遞

Spring Boot：Thymeleaf篇

Spring Boot使用thymeleaf模板時報異常：template might not exist or might not be accessible by any of the configured Template Resolvers

Spring-boot和kafka實現消息發送器

Spring Boot參考教程（六）Spring Boot配置Servlet，Filter，Listener，Interceptor

【spring boot】3.spring boot項目，綁定資源文件為bean並使用

Spring Boot和thymeleaf ， freemarker , jsp三個前端模組的運用

相關推薦