整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
之前我介紹了在spring boot中使用thymeleaf模板，這次我會給大家介紹在spring boot中使用freemarker模板技術，同時利用freemarker生成靜態html頁面。生成靜態html頁面就能實現網站的靜態化進而提高網站的訪問速度以及提高SEO能力。
首先在pom.xml中添加依賴
添加依賴
<dependency> <groupId>org.freemarker</groupId> <artifactId>freemarker</artifactId> <version>2.3.23</version> </dependency>
application配置
在application.properties中添加freemarker的配置參數
##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模板
下一步我們就建一個基礎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";
}
}
可以看到很簡單，跟之前的thymelefa和jsp的沒有區別。
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>
這樣之后我們就能完成了基礎freemarker的使用，更多的使用參見freemarker官方網站，這里不做過多的描述。
這里我們已經完成了標準的freemarker集成，下面我們將介紹如何利用freemarker生成靜態html頁面，直接上代碼，作為演示我們還是在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 {
@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目錄作為靜態頁面的存儲目錄，同時命名生成的靜態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生成靜態頁面我理解的流程是這樣的
1.利用Configuration讀取想生成靜態頁面的模板，這里是test.ftl
2.解析模板文件，并將模板中的${}!包含的參數替換成真實的數據
3.最終將讀取了真實數據的模板生成相應的html文件，并寫入指定目錄
這樣我們就完成了spring boot中使用freemarker模板，并且利用freemarker生成靜態html文件
者有話要說：此文是作者自己的學習總結，供大家參考，不足之處還請見諒和指正~
在學習完了基本的HTML+CSS標簽之后，就可以嘗試寫一些簡單的靜態網頁啦~練習的過程是充滿成就感的，值得反復體會和思考！
網頁結構
簡單提一下常用于表示網頁機構的標簽：
header 整個頁面的標題（也可表示一個內容區塊）
main 頁面主體部分
footer 整個頁面的腳注（也可表示一個內容區塊）
article 一塊與上下文無關的獨立內容
section 表示一個內容區塊，常嵌套于article中
aside 在article之外與其內容相關的輔助信息
nav 頁面中的導航欄
figure 表示一段獨立的流內容
基本網站結構
三欄布局
一個網頁最少由header、main、footer三部分組成，那么從三欄布局開始練習吧。無論是上-中-下結構還是左-中-右結構，關鍵都在于設置中間部分的寬高或位置。我們知道網頁的主體內容（版心）是處于居中位置、隨網頁縮放而縮放的。那么左右（或上下）兩欄固定后，須使中間部分自適應。以下總結了幾種三欄布局的方法，以左-中-右結構為例：
先寫左中右三個盒子。
body部分
1.使用float
利用float使左右脫離文檔流
需要注意的是，使用float方法需要在body部分改一下center盒子的位置，把center盒子放在right盒子之后（否則right盒子會跑到下一行右側）。以上代碼中，設置center盒子的左右外邊距來實現寬度自適應，若父盒子layout無高度要求，可用min-height實現高度自適應。不加高度自適應也可，在未設置center盒子高度的情況下本身高度會隨文本內容的擴充而自動增加。
2.使用position
利用絕對定位脫離文檔流
三個盒子都分別使用絕對定位，left、right分別距離窗口左右端為0，center距離窗口左端的間距為left盒子的寬度，距離窗口右端的間距為right盒子的寬度。
3.使用flex
利用彈性盒固有屬性
須給父盒子layout加上彈性盒屬性，給center盒子設置大于0的flex值，利用彈性盒自動拉伸效果實現center盒子的寬度自適應。
4.使用table
設置為表格
給父盒子layout設置為table，寬度為整個窗口，給三個子盒子都設置為table-cell，此時三個盒子就有了表格的屬性。固定left、right盒子的寬度，center盒子自動占滿父盒子剩余寬度。需要注意的是，因為父盒子具有表格屬性，當left、center、right三者中任意一個盒子高度改變時，其他兩個盒子會跟著改變。
5.使用grid
設置為網格
將父盒子layout設置為grid，寬度為整個窗口，用template-rows設置行高，用template-columns分別設置三個盒子的寬度，其中auto實現center盒子的寬度自適應。需要注意的是，這里用template-rows設置了固定的行高，因此center的高度不會自適應。
仿寫練習
適合初學者練習的網頁有很多，可以打開網址之家去里面挑一挑，以靜態頁面為主的網站。作者自己是以豆瓣首頁（局部）進行練習的。練習過程中，千萬不要去看網站源碼（此時你也有很多地方看不懂），先試著自己分析和思考，用所學的知識看看能做到哪一步。
筆者學習時的仿寫
放上對比圖，還是有很多不一樣的地方，網頁也沒有功能，作為初學者這都是正常的。靜態網頁練習的主要目的是熟悉HTML+CSS布局，培養做網頁的思維。具體細節隨著學習的深入，可以讓網頁更還原、頁面更精美，網頁功能也能逐步完善起來，實現真正的網站開發。
站，如果不是賣產品的，而是用來吸引客戶的，那就是信息性質的網站了。比如說，你有軟件要賣給用戶，就可以搞一個信息性質的網站，用來展示軟件和說明。這種網站其實上線很簡單，不必糾結太多的東西，老美說的好，"your website should be designed to convert"。
下面就是在美國上線一個最基本的信息型網站需要的步驟。
1. Domain，這篇文章里有介紹: 美國在哪里注冊域名比較好?
2. Hosting，用個最便宜的VPS服務就好，比如這篇文章里提到的 說說我知道的美國最佳vps hosting(虛擬主機服務)。hosting用linode就可以，最低檔的其實就夠了，就是 /month, 1GB RAM, 24GB SSD固態硬盤。
3. 需要做幾個靜態網頁，也就是html page，包括:
--Home page
--About Us page
--TOS page, 就是 Terms Of Service page
--Privacy Policy page
對于不會編程的人來說，搞這種信息性質的網站可以用wordpress來實現，wordpress很好裝，而且也有眾多的插件支持。如果是要搞論壇的話，可以考慮裝discuz, 但要比wordpress復雜一些。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
