2. 程式人生 > 程式設計 >SpringBoot系列教程web篇之Freemaker環境搭建

SpringBoot系列教程web篇之Freemaker環境搭建

阿新 • • 發佈：2019-12-31

現在的開發現狀比較流行前後端分離，使用springboot搭建一個提供rest介面的後端服務特別簡單，引入spring-boot-starter-web依賴即可。那麼在不分離的場景下，比如要開發一個後端使用的控制檯，這時候可能並沒有前端資源，由javaer自己來客串一把，我希望簡單一點，前後端專案都整合在一起，一個jar包執行起來就完事，可以怎麼搞呢？

本篇將介紹一下如何使用springboot集合freemaker引擎來搭建web應用

I. 準備

Freemaker是模板引擎，和jsp的作用差不多，對於它的不太清楚的同學可以參考一下官方檔案 freemarker.apache.org/docs/index.…

1. 依賴

首先我們是需要一個springboot專案，基本的pom結構大都相似

<parent>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-parent</artifactId>
    <version>2.0.4.RELEASE</version>
    <relativePath/> <!-- lookup parent from update -->
</parent
 
>

<properties>
    <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
    <project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding>
    <spring-cloud.version>Finchley.RELEASE</spring-cloud.version>
    <java.version>1.8</java.version
 
>
</properties>

<build>
    <pluginManagement>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
            </plugin>
        </plugins>
    </pluginManagement>
</build>
<repositories>
    <repository>
        <id>spring-milestones</id>
        <name>Spring Milestones</name>
        <url>https://repo.spring.io/milestone</url>
        <snapshots>
            <enabled>false</enabled>
        </snapshots>
    </repository>
</repositories>
複製程式碼

在這個專案中，我們主要需要引入兩個依賴包，一個web，一個freemaker

<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>
複製程式碼

2. 配置引數

通常我們直接使用預設的freemaker引數配置即可，下面給出幾個常用的

spring:
  freemarker:
    charset: UTF-8
    # 本機測試時建議設定為false，上線時設定為true
    cache: true
    # 表示模板檔案(類html檔案)的字尾
    suffix: .ftl
複製程式碼

freemaker的引數，主要對應的是org.springframework.boot.autoconfigure.freemarker.FreeMarkerProperties

II. 專案搭建演示

1. 專案結構

搭建一個web專案和我們之前的純後端專案有點不一樣，前端資源放在什麼地方，依賴檔案怎麼處理都是有講究的，下面是一個常規的專案結構

專案結構

如上圖，前端資原始檔預設放在resources目錄下，下面有兩個目錄

  • templates：存放模板檔案，可以理解為我們編寫的html，注意這個檔名不能有問題
  • static: 存放靜態資原始檔，如js,css,image等

2. Rest服務

我們這裡提供了三個介面，主要是為了演示三種不同的資料繫結方式

@Controller
public class IndexController {
    @GetMapping(path = {"","/","/index"})
    public ModelAndView index() {
        Map<String,Object> data = new HashMap<>(2);
        data.put("name","YiHui Freemarker");
        data.put("now",LocalDateTime.now().toString());
        return new ModelAndView("index",data);
    }

    /**
     * 一般不建議直接使用jdk的String.split來分割字串，內部實現是根據正則來處理的，雖然更強大，但在簡單的場景下，效能開銷更大
     */
    private static String[] contents =
            ("綠蟻浮觴香泛泛，黃花共薦芳辰。\n清霜天宇淨無塵。\n登高宜有賦，拈筆戲成文。\n可奈園林搖落盡，悲秋意與誰論。\n眼中相識幾番新。\n龍山高會處，落帽定何人。").split("\n");
    private static Random random = new Random();

    @GetMapping(path = "show1")
    public String showOne(Model model) {
        model.addAttribute("title","臨江仙");
        model.addAttribute("content",contents[random.nextInt(6)]);
        return "show1";
    }

    @GetMapping(path = "show2")
    public String showTow(Map<String,Object> data) {
        data.put("name","Show2---->");
        data.put("now",LocalDateTime.now().toString());
        return "show2";
    }
}
複製程式碼

上面的三種case中

  • 第一個是最好理解的，在建立ModelAndView時，傳入viewName和資料
  • 第二個是通過介面引數Model，設定傳遞給view的資料
  • 第三種則直接使用Map來傳遞資料

三個介面，對應的三個html檔案，如下

index.ftl

<!DOCTYPE html>
<html lang="ch">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <meta name="description" content="SpringBoot FreeMaker"/>
    <meta name="author" content="YiHui"/>
    <meta name="viewport" content="width=device-width,initial-scale=1.0"/>
    <title>YiHui's SpringBoot Demo</title>
    <link rel="stylesheet" href="index.css"/>
</head>
<body>

<div>
    <div class="title">hello world!</div>
    <br/>
    <div class="content">歡迎訪問 ${name}</div>
    <br/>
    <div class="sign">當前時間: ${now}</div>
    <br/>
    <a href="show1">傳參2測試</a> &nbsp;&nbsp;&nbsp;&nbsp;
    <a href="show2">傳參3測試</a>
</div>
</body>
</html>
複製程式碼

show1.ftl

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <meta name="description" content="SpringBoot thymeleaf"/>
    <meta name="author" content="YiHui"/>
    <meta name="viewport" content="width=device-width,initial-scale=1.0"/>
    <title>YiHui's SpringBoot Demo</title>
    <link rel="stylesheet" href="index.css"/>
</head>
<body>

<div>
    <div class="title">${title}</div>
    <div class="content">${content}</div>
</div>
</body>
</html>
複製程式碼

show2.ft

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0"/>
    <title>YiHui's SpringBoot Demo</title>
    <link rel="stylesheet" href="index.css"/>
</head>
<body>

<div>
    <div class="title">${name}</div>
    <div class="content">${now}</div>
</div>
</body>
</html>
複製程式碼

在上面的模板檔案中，需要注意引用css樣式檔案，路徑前面並沒有static，我們對應的css檔案

index.css

.title {
    color: #c00;
    font-weight: normal;
    font-size: 2em;
}

.content {
    color: darkblue;
    font-size: 1.2em;
}

.sign {
    color: lightgray;
    font-size: 0.8em;
    font-style: italic;
}
複製程式碼

3. 演示

啟動專案後，可以看到三個頁面的切換，模板中的資料根據後端的返回替換，特別是主頁的時間，每次重新整理都會隨之改變

demo

II. 其他

0. 專案&系列文章

1. 一灰灰Blog

盡信書則不如，以上內容，純屬一家之言，因個人能力有限，難免有疏漏和錯誤之處，如發現bug或者有更好的建議，歡迎批評指正，不吝感激

下面一灰灰的個人部落格，記錄所有學習和工作中的博文，歡迎大家前去逛逛

一灰灰blog

相關推薦

SpringBoot系列教程web篇之Freemaker環境搭建

現在的開發現狀比較流行前後端分離，使用springboot搭建一個提供rest介面的後端服務特別簡單，引入spring-boot-starter-web依賴即可。那麼在不分離的場景下，比如要開發一個後端使用的控制檯，這時候可能並沒有前端資

SpringBoot系列教程web篇之Beetl環境搭建

前面兩篇分別介紹了目前流行的模板引擎Freemaker和Thymeleaf構建web應用的方式，接下來我們看一下號稱效能最好的國產模板引擎Beetl，如何搭建web環境

SpringBoot系列教程web篇之Thymeleaf環境搭建

上一篇博文介紹瞭如何使用Freemaker引擎搭建web專案，這一篇我們則看一下另外一個常見的頁面渲染引擎Thymeleaf如何搭建一個web專案

SpringBoot系列教程Web篇之開啟GZIP資料壓縮

本篇可以歸納在效能調優篇，雖然內容非常簡單，但效果可能出乎預料的好；

SpringBoot系列教程web篇之全域性異常處理

當我們的後端應用出現異常時，通常會將異常狀況包裝之後再返回給呼叫方或者前端，在實際的專案中，不可能對每一個地方都做好異常處理，再優雅的程式碼也可能丟擲異常，那麼在 Spring 專案中，可以怎樣優雅的處理這些

SpringBoot系列教程web篇之404、500異常頁面配置

接著前面幾篇web處理請求的博文，本文將說明，當出現異常的場景下，如404請求url不存在，，403無權，500伺服器異常時，我們可以如何處理

SpringBoot系列教程web篇之重定向

原文地址: SpringBoot系列教程web篇之重定向 前面介紹了spring web篇資料返回的幾種常用姿勢，當我們在相應一個http請求時，除了直接返回資料之外，還有另一種常見的case -> 重定向；

SpringBoot系列教程web篇之自定義異常處理HandlerExceptionResolver

關於Web應用的全域性異常處理，上一篇介紹了ControllerAdvice結合@ExceptionHandler的方式來實現web應用的全域性異常管理；

SpringBoot系列教程web篇之過濾器Filter使用指南擴充套件篇

前面一篇博文介紹了在 SpringBoot 中使用 Filter 的兩種使用方式，這裡介紹另外一種直接將 Filter 當做 Spring 的 Bean 來使用的方式，並且在這種使用方式下，Filter 的優先順序可以直接通過@Order註解來指定；最後將

SpringBoot系列教程web篇之過濾器Filter使用指南

web三大元件之一Filter，可以說是很多小夥伴學習java web時最早接觸的知識點了，然而學得早不代表就用得多。基本上，如果不是讓你從0到1寫一個web應用（或者說即便從0到1寫一個web應用），在你的日常業務開發中不太可

SpringBoot系列教程web篇之Get請求引數解析姿勢彙總

一般在開發web應用的時候，如果提供http介面，最常見的http請求方式為GET/POST，我們知道這兩種請求方式的一個顯著區別是GET請求的引數在url中，而post請求可以不在url中；那麼一個SpringBoot搭建的web應用可以如何

SpringBoot系列教程web篇之Post請求引數解析姿勢彙總

作為一個常年提供各種Http介面的後端而言，如何獲取請求引數可以說是一項基本技能了，本篇為《190824-SpringBoot系列教程web篇之Get請求引數解析姿勢彙總》之後的第二篇，對於POST請求方式下，又可以怎樣獲取請求引數

SpringBoot系列教程web篇之如何自定義引數解析器

SpringMVC提供了各種姿勢的http引數解析支援，從前面的GET/POST引數解析篇也可以看到，加一個@RequsetParam註解就可以將方法引數與http引數繫結，看到這時自然就會好奇這是怎麼做到的,我們能不能自己定義一種引數解析

SpringBoot系列教程web篇Servlet 註冊的四種姿勢

原文： 191122-SpringBoot系列教程web篇Servlet 註冊的四種姿勢 前面介紹了 java web 三要素中 filter 的使用指南與常見的易錯事項，接下來我們來看一下 Servlet 的使用姿勢，本篇主要帶來在 SpringBoot 環境下，註

Angular入門到精通系列教程（4）- 開發環境搭建以及入手專案

1. 本地開發環境搭建 1.1. node.js 1.2. Angular CLI 2. 開發工具 - Visual Studio Code 第一個Anuglar專案

SpringBoot系列教程之Redis叢集環境配置

之前介紹的幾篇redis的博文都是基於單機的redis基礎上進行演示說明的，然而在實際的生產環境中，使用redis叢集的可能性應該是大於單機版的redis的，那麼叢集的redis如何操作呢？它的配置和單機的有什麼區別，又有什麼

SpringBoot系列教程JPA之query使用姿勢詳解之基礎篇

前面的幾篇文章分別介紹了CURD中的增刪改，接下來進入最最常見的查詢篇，看一下使用jpa進行db的記錄查詢時，可以怎麼玩

SpringBoot系列教程JPA之指定id儲存

原文連結: 191119-SpringBoot系列教程JPA之指定id儲存 前幾天有位小夥伴問了一個很有意思的問題，使用 JPA 儲存資料時，即便我指定了主鍵 id，但是新插入的資料主鍵卻是 mysql 自增的 id；那麼是什麼原因導致的呢？

Go語言系列教程(十二)之函式完結篇

Hello，各位小夥伴大家好，我是小棧君。上一期我們講到了關於函式的有參、無參、匿名函式，本期我們分享一下關於go語言函式型別、匿名函式和閉包的概念和實戰。閒話不多說，立馬開始分享。

SpringBoot系列教程之Bean載入順序之錯誤使用姿勢闢謠

在網上查詢 Bean 的載入順序時，看到了大量的文章中使用@Order註解的方式來控制 bean 的載入順序，不知道寫這些的博文的同學自己有沒有實際的驗證過，本文希望通過指出這些錯誤的使用姿勢，讓觀文的小夥伴可以知道@O