Spring Boot使用freemarker并且生

Spring Boot使用freemarker并且生成靜態(tài)html頁面

pring Boot使用freemarker并且生成靜態(tài)html頁面

之前我介紹了在spring boot中使用thymeleaf模板，這次我會(huì)給大家介紹在spring boot中使用freemarker模板技術(shù)，同時(shí)利用freemarker生成靜態(tài)html頁面。生成靜態(tài)html頁面就能實(shí)現(xiàn)網(wǎng)站的靜態(tài)化進(jìn)而提高網(wǎng)站的訪問速度以及提高SEO能力。

首先在pom.xml中添加依賴

添加依賴

<dependency>
 <groupId>org.freemarker</groupId>
 <artifactId>freemarker</artifactId>
 <version>2.3.23</version>
 </dependency>

application配置

在application.properties中添加freemarker的配置參數(shù)

##freemarker
spring.freemarker.cache=false
spring.freemarker.charset=UTF-8
spring.freemarker.check-template-location=true
spring.freemarker.content-type=text/html
spring.freemarker.enabled=true
spring.freemarker.suffix=.ftl
spring.freemarker.template-loader-path=classpath:/templates

Controller和ftl模板

下一步我們就建一個(gè)基礎(chǔ)Controller類和配套的ftl模板

Controller類

package com.hw.myp2c.common.controller;
import freemarker.template.Configuration;
import freemarker.template.Template;
import freemarker.template.TemplateException;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import javax.annotation.Resource;
import java.io.*;
import java.net.URISyntaxException;
import java.util.HashMap;
import java.util.Map;
@Controller
@RequestMapping("")
public class MainController {
 @GetMapping
 public String main(Model model){
 String w="Welcome FreeMarker!";
 Map root=new HashMap();
 root.put("w",w);
 model.addAttribute("w","Welcome FreeMarker!");
 return "test";
 }
}

可以看到很簡(jiǎn)單，跟之前的thymelefa和jsp的沒有區(qū)別。

freemarker模板

<html>
<head>
 <title>Welcome!</title>
 <link rel="stylesheet" href="/bootstrap.min.css">
 <script src="/lib/jquery.min.js"></script>
</head>
<body>
<h1>Hello ${w}!</h1>
</body>
</html>

這樣之后我們就能完成了基礎(chǔ)freemarker的使用，更多的使用參見freemarker官方網(wǎng)站，這里不做過多的描述。

這里我們已經(jīng)完成了標(biāo)準(zhǔn)的freemarker集成，下面我們將介紹如何利用freemarker生成靜態(tài)html頁面，直接上代碼，作為演示我們還是在Controller中完成，在實(shí)際應(yīng)用中我們可以按照自己的實(shí)際需要進(jìn)行封裝。

package com.hw.myp2c.common.controller;
import freemarker.template.Configuration;
import freemarker.template.Template;
import freemarker.template.TemplateException;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import javax.annotation.Resource;
import java.io.*;
import java.net.URISyntaxException;
import java.util.HashMap;
import java.util.Map;
@Controller
@RequestMapping("")
public class MainController {
 @Resource
 Configuration cfg;
 @GetMapping
 public String main(Model model){
 String w="Welcome FreeMarker!";
 Map root=new HashMap();
 root.put("w",w);
 freeMarkerContent(root);
 model.addAttribute("w","Welcome FreeMarker!");
 return "test";
 }
 private void freeMarkerContent(Map<String,Object> root){
 try {
 Template temp=cfg.getTemplate("test.ftl");
 //以classpath下面的static目錄作為靜態(tài)頁面的存儲(chǔ)目錄，同時(shí)命名生成的靜態(tài)html文件名稱
 String path=this.getClass().getResource("/").toURI().getPath()+"static/test.html";
 Writer file=new FileWriter(new File(path.substring(path.indexOf("/"))));
 temp.process(root, file);
 file.flush();
 file.close();
 } catch (IOException e) {
 e.printStackTrace();
 } catch (TemplateException e) {
 e.printStackTrace();
 } catch (URISyntaxException e) {
 e.printStackTrace();
 }
 }
}

利用freemarker生成靜態(tài)頁面我理解的流程是這樣的

1.利用Configuration讀取想生成靜態(tài)頁面的模板，這里是test.ftl

2.解析模板文件，并將模板中的${}!包含的參數(shù)替換成真實(shí)的數(shù)據(jù)

3.最終將讀取了真實(shí)數(shù)據(jù)的模板生成相應(yīng)的html文件，并寫入指定目錄

這樣我們就完成了spring boot中使用freemarker模板，并且利用freemarker生成靜態(tài)html文件

者有話要說：此文是作者自己的學(xué)習(xí)總結(jié)，供大家參考，不足之處還請(qǐng)見諒和指正~

在學(xué)習(xí)完了基本的HTML+CSS標(biāo)簽之后，就可以嘗試寫一些簡(jiǎn)單的靜態(tài)網(wǎng)頁啦~練習(xí)的過程是充滿成就感的，值得反復(fù)體會(huì)和思考！

網(wǎng)頁結(jié)構(gòu)

簡(jiǎn)單提一下常用于表示網(wǎng)頁機(jī)構(gòu)的標(biāo)簽：

header 整個(gè)頁面的標(biāo)題（也可表示一個(gè)內(nèi)容區(qū)塊）

main 頁面主體部分

footer 整個(gè)頁面的腳注（也可表示一個(gè)內(nèi)容區(qū)塊）

article 一塊與上下文無關(guān)的獨(dú)立內(nèi)容

section 表示一個(gè)內(nèi)容區(qū)塊，常嵌套于article中

aside 在article之外與其內(nèi)容相關(guān)的輔助信息

nav 頁面中的導(dǎo)航欄

figure 表示一段獨(dú)立的流內(nèi)容

基本網(wǎng)站結(jié)構(gòu)

三欄布局

一個(gè)網(wǎng)頁最少由header、main、footer三部分組成，那么從三欄布局開始練習(xí)吧。無論是上-中-下結(jié)構(gòu)還是左-中-右結(jié)構(gòu)，關(guān)鍵都在于設(shè)置中間部分的寬高或位置。我們知道網(wǎng)頁的主體內(nèi)容（版心）是處于居中位置、隨網(wǎng)頁縮放而縮放的。那么左右（或上下）兩欄固定后，須使中間部分自適應(yīng)。以下總結(jié)了幾種三欄布局的方法，以左-中-右結(jié)構(gòu)為例：

先寫左中右三個(gè)盒子。

body部分

1.使用float

利用float使左右脫離文檔流

需要注意的是，使用float方法需要在body部分改一下center盒子的位置，把center盒子放在right盒子之后（否則right盒子會(huì)跑到下一行右側(cè)）。以上代碼中，設(shè)置center盒子的左右外邊距來實(shí)現(xiàn)寬度自適應(yīng)，若父盒子layout無高度要求，可用min-height實(shí)現(xiàn)高度自適應(yīng)。不加高度自適應(yīng)也可，在未設(shè)置center盒子高度的情況下本身高度會(huì)隨文本內(nèi)容的擴(kuò)充而自動(dòng)增加。

2.使用position

利用絕對(duì)定位脫離文檔流

三個(gè)盒子都分別使用絕對(duì)定位，left、right分別距離窗口左右端為0，center距離窗口左端的間距為left盒子的寬度，距離窗口右端的間距為right盒子的寬度。

3.使用flex

利用彈性盒固有屬性

須給父盒子layout加上彈性盒屬性，給center盒子設(shè)置大于0的flex值，利用彈性盒自動(dòng)拉伸效果實(shí)現(xiàn)center盒子的寬度自適應(yīng)。

4.使用table

設(shè)置為表格

給父盒子layout設(shè)置為table，寬度為整個(gè)窗口，給三個(gè)子盒子都設(shè)置為table-cell，此時(shí)三個(gè)盒子就有了表格的屬性。固定left、right盒子的寬度，center盒子自動(dòng)占滿父盒子剩余寬度。需要注意的是，因?yàn)楦负凶泳哂斜砀駥傩裕?dāng)left、center、right三者中任意一個(gè)盒子高度改變時(shí)，其他兩個(gè)盒子會(huì)跟著改變。

5.使用grid

設(shè)置為網(wǎng)格

將父盒子layout設(shè)置為grid，寬度為整個(gè)窗口，用template-rows設(shè)置行高，用template-columns分別設(shè)置三個(gè)盒子的寬度，其中auto實(shí)現(xiàn)center盒子的寬度自適應(yīng)。需要注意的是，這里用template-rows設(shè)置了固定的行高，因此center的高度不會(huì)自適應(yīng)。

仿寫練習(xí)

適合初學(xué)者練習(xí)的網(wǎng)頁有很多，可以打開網(wǎng)址之家去里面挑一挑，以靜態(tài)頁面為主的網(wǎng)站。作者自己是以豆瓣首頁（局部）進(jìn)行練習(xí)的。練習(xí)過程中，千萬不要去看網(wǎng)站源碼（此時(shí)你也有很多地方看不懂），先試著自己分析和思考，用所學(xué)的知識(shí)看看能做到哪一步。

筆者學(xué)習(xí)時(shí)的仿寫

放上對(duì)比圖，還是有很多不一樣的地方，網(wǎng)頁也沒有功能，作為初學(xué)者這都是正常的。靜態(tài)網(wǎng)頁練習(xí)的主要目的是熟悉HTML+CSS布局，培養(yǎng)做網(wǎng)頁的思維。具體細(xì)節(jié)隨著學(xué)習(xí)的深入，可以讓網(wǎng)頁更還原、頁面更精美，網(wǎng)頁功能也能逐步完善起來，實(shí)現(xiàn)真正的網(wǎng)站開發(fā)。

站，如果不是賣產(chǎn)品的，而是用來吸引客戶的，那就是信息性質(zhì)的網(wǎng)站了。比如說，你有軟件要賣給用戶，就可以搞一個(gè)信息性質(zhì)的網(wǎng)站，用來展示軟件和說明。這種網(wǎng)站其實(shí)上線很簡(jiǎn)單，不必糾結(jié)太多的東西，老美說的好，"your website should be designed to convert"。

下面就是在美國(guó)上線一個(gè)最基本的信息型網(wǎng)站需要的步驟。

1. Domain，這篇文章里有介紹: 美國(guó)在哪里注冊(cè)域名比較好?

2. Hosting，用個(gè)最便宜的VPS服務(wù)就好，比如這篇文章里提到的說說我知道的美國(guó)最佳vps hosting(虛擬主機(jī)服務(wù))。hosting用linode就可以，最低檔的其實(shí)就夠了，就是 /month, 1GB RAM, 24GB SSD固態(tài)硬盤。

3. 需要做幾個(gè)靜態(tài)網(wǎng)頁，也就是html page，包括:

--Home page

--About Us page

--TOS page, 就是 Terms Of Service page

--Privacy Policy page

對(duì)于不會(huì)編程的人來說，搞這種信息性質(zhì)的網(wǎng)站可以用wordpress來實(shí)現(xiàn)，wordpress很好裝，而且也有眾多的插件支持。如果是要搞論壇的話，可以考慮裝discuz, 但要比wordpress復(fù)雜一些。

在線咨詢

上一篇：Python與Mysql怎么完成大量的數(shù)據(jù)交互？
下一篇：HTML行內(nèi)元素與塊級(jí)元素有哪些及區(qū)別？

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷服務(wù)商

Spring Boot使用freemarker并且生

pring Boot使用freemarker并且生成靜態(tài)html頁面

您的項(xiàng)目需求