頁面靜態(tài)化技術(shù)Freemarker技術(shù)的介紹及使用實(shí)例.

一、FreeMarker簡介

在網(wǎng)站制作、網(wǎng)站設(shè)計過程中，需要針對客戶的行業(yè)特點(diǎn)、產(chǎn)品特性、目標(biāo)受眾和市場情況進(jìn)行定位分析，以確定網(wǎng)站的風(fēng)格、色彩、版式、交互等方面的設(shè)計方向。創(chuàng)新互聯(lián)建站還需要根據(jù)客戶的需求進(jìn)行功能模塊的開發(fā)和設(shè)計，包括內(nèi)容管理、前臺展示、用戶權(quán)限管理、數(shù)據(jù)統(tǒng)計和安全保護(hù)等功能。

　　1、動態(tài)網(wǎng)頁和靜態(tài)網(wǎng)頁差異

　在進(jìn)入主題之前我先介紹一下什么是動態(tài)網(wǎng)頁，動態(tài)網(wǎng)頁是指跟靜態(tài)網(wǎng)頁相對應(yīng)的一種網(wǎng)頁編程技術(shù)。靜態(tài)網(wǎng)頁，隨著HTML代碼的生成，頁面的內(nèi)容和顯示效 果就不會再發(fā)生變化(除非你修改頁面代碼)。而動態(tài)網(wǎng)頁則不然，頁面代碼雖然沒有發(fā)生變化，但是顯示的內(nèi)容卻是可以隨著時間、環(huán)境或者數(shù)據(jù)庫操作的結(jié)果而 發(fā)生相應(yīng)的變化。簡而言之，動態(tài)網(wǎng)頁是基本的HTML語法規(guī)范與java、VB、VC等高級程序設(shè)計語言、數(shù)據(jù)庫編程等多種技術(shù)的融合，以實(shí)現(xiàn)對網(wǎng)站內(nèi)容 和風(fēng)格的高效、動態(tài)和交互式的管理。

通過前面的介紹我們可以得出動態(tài)網(wǎng)頁和靜態(tài)網(wǎng)頁的優(yōu)缺點(diǎn)下載(這里我們只考慮網(wǎng)站性能方面的相關(guān)問題，信息安全等多方面問題不做贅述)：

　　1)靜態(tài)網(wǎng)頁：

a、靜態(tài)網(wǎng)頁的內(nèi)容穩(wěn)定，頁面加載速度快。

b、靜態(tài)網(wǎng)頁的沒有數(shù)據(jù)庫支持，在網(wǎng)站制作和維護(hù)方面的工作量較大。

c、靜態(tài)網(wǎng)頁的交互性差，有很大的局限性。

　　2)動態(tài)網(wǎng)頁：

a、交互性好。

b、動態(tài)網(wǎng)頁的信息都需要從數(shù)據(jù)庫中讀取，每打開一個一面就需要去獲取一次數(shù)據(jù)庫，如果訪問人數(shù)很多，也就會對服務(wù)器增加很大的荷載，從而影響這個網(wǎng)站的運(yùn)行速度。

　通過上面的比較我們不難看出，要提升網(wǎng)站的性能，我們只要把動態(tài)網(wǎng)頁做成靜態(tài)網(wǎng)頁就會在運(yùn)行速度方面有顯著的提升，但是問題出來了，如果將所有頁面都做 成靜態(tài)頁面顯然是不切實(shí)際的。有什么辦法能讓我們的網(wǎng)站即能有動態(tài)網(wǎng)頁的交互性，又有靜態(tài)網(wǎng)頁的加載速度呢?FreeMarker便能實(shí)現(xiàn)這樣的需求：實(shí) 現(xiàn)動態(tài)網(wǎng)頁靜態(tài)化。

　　2、FreeMarker原理下載

FreeMarker是一個基 于Java的開發(fā)包和類庫的一種將模板和數(shù)據(jù)進(jìn)行整合并輸出文本的通用工具，F(xiàn)reeMarker實(shí)現(xiàn)頁面靜態(tài)化的原理是：將頁面中所需要的樣式寫入到 FreeMarker模板文件中，然后將頁面所需要的數(shù)據(jù)進(jìn)行動態(tài)綁定并放入到Map中，然后通過FreeMarker的模板解析類process()方 法完成靜態(tài)頁面的生成。其工作原理如圖2-1所示。

模板 +  數(shù)據(jù)模型 = 輸出

二, 示例演示FreeMarker下載

先看一下Demo項(xiàng)目的整體結(jié)構(gòu):

頁面靜態(tài)化技術(shù)Freemarker技術(shù)的介紹及使用實(shí)例.

上面我們已經(jīng)說了, 模板 +  數(shù)據(jù)模型 = 輸出, 那么我們就一個個看模板和數(shù)據(jù)模型是什么樣子的, 以及最后的輸出是什么樣子的.
注: 這里將省略freemarker的語法, 因?yàn)楹芏喽际穷愃艵L表達(dá)式的, 這里只提供幾種情況的講解,下載 其中包括: list, map, list和map混合
FMDemo.java:

頁面靜態(tài)化技術(shù)Freemarker技術(shù)的介紹及使用實(shí)例.

 1 public class FMDemo { 2  3     //Freemarker 4     public static void main(String[] args) throws Exception { 5          6         Configuration conf = new Configuration(); 7         //模板+數(shù)據(jù)模型 = 輸出 8         //ftl: freemarker template 9         //第一步: 讀取html模板10         String dir = "C:\\workspace\\freemarker\\ftl\\";11         conf.setDirectoryForTemplateLoading(new File(dir));12         Template template = conf.getTemplate("freemarker.html");13         14         //第二步: 加載數(shù)據(jù)模型15         Map root = new HashMap();16         root.put("world", "世界你好");17         18         //List集合19         List<String> persons = new ArrayList<String>();20         persons.add("范冰冰");21         persons.add("李冰冰");22         persons.add("何炅");23         root.put("persons", persons);24         25         //Map集合26         Map map = new HashMap();27         map.put("fbb", "范冰冰");28         map.put("lbb", "李冰冰");29         root.put("map", map);30         31         //list和map混合32         List<Map> maps = new ArrayList<Map>();33         Map pms1 = new HashMap();34         pms1.put("id1", "范冰冰");35         pms1.put("id2", "李冰冰");36         Map pms2 = new HashMap();37         pms2.put("id1", "曾志偉");38         pms2.put("id2", "何炅");39         maps.add(pms1);40         maps.add(pms2);41         root.put("maps", maps);42         43         Writer out = new FileWriter(new File(dir + "hello.html"));44         template.process(root, out);45         System.out.println("生成完成");46     }47 }

頁面靜態(tài)化技術(shù)Freemarker技術(shù)的介紹及使用實(shí)例.

freemarker.html: 模板文件下載

頁面靜態(tài)化技術(shù)Freemarker技術(shù)的介紹及使用實(shí)例.

 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Insert title here</title> 6 </head> 7 <body> 8 ${world} 9 <br/>10 11 <#list persons as person>12     <#if person_index == 2>13         ${person}---紅色14     <#else>15         ${person}---綠色16     </#if>17 </#list><br/>18 19 <#list map?keys as key>20     ${map[key]}21 </#list>22 ${map.fbb}/${map.lbb}<br/>23 24 <#list maps as map>25     <#list map?keys as key>26         ${map[key]}27     </#list>28 </#list>29 <#list maps as map>30     ${map.id1}///${map.id2}31 </#list>32 </body>33 </html>

頁面靜態(tài)化技術(shù)Freemarker技術(shù)的介紹及使用實(shí)例.

執(zhí)行FMDemo.java中的Main方法, 這會生成:
頁面靜態(tài)化技術(shù)Freemarker技術(shù)的介紹及使用實(shí)例.
hello.html:

頁面靜態(tài)化技術(shù)Freemarker技術(shù)的介紹及使用實(shí)例. View Code



三, 靜態(tài)化頁面在項(xiàng)目中的使用下載

這里就來說下靜態(tài)化頁面在項(xiàng)目中的使用情況, 現(xiàn)在只是給商品詳情頁做了靜態(tài)化處理.
前面關(guān)于ActiveMQ的文章已經(jīng)說過, 當(dāng)一個商品上架的時候, 通過發(fā)送消息來通知babasport-cms 來將對應(yīng)的頁面靜態(tài)化. 
在這里我們只寫接收消息的方法, 首先來看看babasport-cms的結(jié)構(gòu)圖:
CustomMessageListener.java:接收MQ中的消息

頁面靜態(tài)化技術(shù)Freemarker技術(shù)的介紹及使用實(shí)例. View Code


StaticPageServiceImpl.java:

頁面靜態(tài)化技術(shù)Freemarker技術(shù)的介紹及使用實(shí)例. View Code


使用Spring管理Freemarker配置文件:

頁面靜態(tài)化技術(shù)Freemarker技術(shù)的介紹及使用實(shí)例.

 1 <!-- 配置freemarker 實(shí)現(xiàn)類 -->     2         <bean class="cn.itcast.core.service.StaticPageServiceImpl"> 3             <property name="freeMarkerConfig"> 4                 <bean class="org.springframework.web.servlet.view.freemarker.FreeMarkerConfigurer"> 5                     <!-- 設(shè)置模板所在目錄或文件夾的位置, 相對路徑  --> 6                     <property name="templateLoaderPath" value="/WEB-INF/ftl/" /> 7                     <!-- 設(shè)置默認(rèn)編碼集 --> 8                     <property name="defaultEncoding" value="UTF-8"></property> 9                 </bean>10             </property>11         </bean>

頁面靜態(tài)化技術(shù)Freemarker技術(shù)的介紹及使用實(shí)例.


模板頁面: product.html 中的改動:

引入其他頁面:下載

<!-- header start -->
<#include "commons/header.html" />

循環(huán)遍歷colors:

頁面靜態(tài)化技術(shù)Freemarker技術(shù)的介紹及使用實(shí)例.

 1 <div class="dd" id="colors"> 2     <#list colors as color> 3     <div class="item" onclick="colorToRed(this,'${color.id}')"> 4         <b></b> 5         <a href="javascript:;" title="${color.name }" > 6         <img data-img="1" 7             src="/p_w_picpaths/53f44cc2N0b714cb2_002.jpg" 8             alt="灰色三件套" height="25" width="25"><i>${color.name }</i></a> 9     </div>10     </#list>11 </div>

頁面靜態(tài)化技術(shù)Freemarker技術(shù)的介紹及使用實(shí)例.

循環(huán)遍歷imgUrls, 并且使用if..else 進(jìn)行判斷:

頁面靜態(tài)化技術(shù)Freemarker技術(shù)的介紹及使用實(shí)例.

 1 <div class="spec-items"> 2     <ul class="lh"> 3         <#list product.imgUrls as pic> 4                 <#if pic_index == 0> 5                     <li><img data-img="1" class="img-hover" 6                         alt="${product.name}" src="${pic}" width="50" height="50"></li> 7                 <#else> 8                     <li><img data-img="1" alt="${product.name}" src="${pic}" 9                         width="50" height="50" ></li>10                 </#if>11         </#list>12     </ul>13 </div>

頁面靜態(tài)化技術(shù)Freemarker技術(shù)的介紹及使用實(shí)例.

其他的照常使用EL表達(dá)式, 然后生成 id.html的靜態(tài)化頁面, 查看訪問后的頁面

網(wǎng)頁標(biāo)題：頁面靜態(tài)化技術(shù)Freemarker技術(shù)的介紹及使用實(shí)例.
URL地址：http://www.muchs.cn/article36/jpjgpg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供移動網(wǎng)站建設(shè)、微信公眾號、做網(wǎng)站、關(guān)鍵詞優(yōu)化、網(wǎng)頁設(shè)計公司、網(wǎng)站改版

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)

h5響應(yīng)式網(wǎng)站建設(shè)