如何快速開發網站？

開發網站 ，通常是以下過程：

1. 找美工畫圖
2. 進行圖片切分
3. 開發人員添加內容

如今還用JSP來作網頁，固然屬於...那啥的事情。

今天看看不同的體驗，稍有HTML基礎，立刻就能夠照葫蘆畫瓢了。

第一步：找美工畫圖，第二步圖片切分

這兩步合成一步，到網上找模板，假設咱們就看上這個模板了。

http://www.cssmoban.com/cssthemes/88.shtml

點擊下面的地址http://down.cssmoban.com/cssthemes/dating-web-template-5.rar把它下載到本地。

展開看看，確實還不錯，OK，就它了。

OK，如今看看，如何利用它來快速開發一個網站。

Step1：建立UI展示包

說白點，就是建立個jar包工程

Step2:把css和images目錄複製到src/main/resources/demo/目錄下

Step3:在src/main/resources/demo/目錄下，建立文件demo.ui.xml

其文本內容以下：

 

?

1 2 3 4 5

< ui-components >      < ui-component  name = "demo" >          < css-resource >/demo/css/layout.css</ css-resource >      </ ui-component > </ ui-components >

Step4:編寫宏代碼，這個時候，最好有dreamwaver等html編寫工具，固然沒有，用普通編輯器也能夠，就是眼力要好一點。固然，若是你熟悉Firefox或Chrome，用瀏覽器直接找代碼也是能夠的。 

中src/main/resources/demo/ 建立文件：demo.component文件

這個時候，要稍微有點抽象能力(所謂抽象能力就是找同類項的能力)

首先看首頁，總體效果以下（受上傳圖片大小限制，只能這麼小）：

OK,咱們放大看看局部：

能夠看到，有Banner圖片，有致使欄。

直覺告訴咱們這幾個導航欄的東東，應該是一樣的模式作出來的，找到一看，是下面的樣子。

 

?

1 2 3 4 5 6 7 8 9

< ul >    < li  class = "first" >< a  class = "current" >home</ a ></ li >    < li >< a  href = "about_us.html" >about us</ a ></ li >    < li >< a  href = "privacy.html" >privacy</ a ></ li >    < li >< a  href = "projects.html" >projects</ a ></ li >    < li >< a  href = "services.html" >services</ a ></ li >    < li >< a  href = "support.html" >support</ a ></ li >    < li >< a  href = "contact_us.html" >contact Us</ a ></ li > </ ul >

因此，在  demo.component文件中，添加下面的內容： 

 

 

?

1 2 3 4 5 6 7 8 9 10 11

#macro(menuBar) < div  id = "menu" > < ul > $bodyContent </ ul > </ div > #end   #macro(menuItem $key $url $title) < li >< a  href = "$url" #if($CurrentPage==$key)  class = "current" #end>$title</ a ></ li > #end

上面的兩段腳本是velocity宏，熟悉的一看就明白，不熟悉的，先猜猜大體意思就能夠了。 

 

接下來，在頁面中就能夠用下面的方式來定義原來的菜單區域了：

 

?

1 2 3 4 5 6 7 8 9

#@menuBar()    #menuItem("about" "about_us.html" "about us")    #menuItem("privacy" "privacy.html" "privacy")    #menuItem("projects" "projects.html" "projects")    #menuItem("about" "about_us.html" "about us")    #menuItem("services" "services.html" "services")    #menuItem("support" "support.html" "support")    #menuItem("contact_us" "contact_us.html" "contact Us") #end

好吧，可能有人會說，這樣的寫法，和原來的相比，不容易理解，還不如原來的好寫呢。好吧，我也認同這種說法，不過咱們放到小結的時候再來回顧這個問題。 

 

經過咱們眼睛的模式識別，咱們發現下面的四個東東，好象也是一種類型的，那麼，咱們再抽象一下：

其HTML描述是這樣的：

 

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27

< div  class = "box1" >    < div >      < h2 >Customer Service</ h2 >      < div > < img  src = "images/ico-med-1.png"  alt = ""  class = "about-img"  /> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin sed odio et ante adipiscing lobortis. Quisque eleifend, arcu a dictum varius, < a  href = "#" >Read More...</ a > </ div >      < br  />      < br  />    </ div >    < div >< br  />      < h2 >Global Reach</ h2 >      < br  />      < div > < img  src = "images/ico-med-3.png"  alt = ""  class = "about-img"  /> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin sed odio et ante adipiscing lobortis. Quisque eleifend, arcu a dictum varius, < a  href = "#" >Read More...</ a ></ div >    </ div > </ div > < div  class = "box2" >    < div >      < h2 >Award Winning</ h2 >      < div > < img  src = "images/ico-med-2.png"  alt = ""  class = "about-img"  /> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin sed odio et ante adipiscing lobortis. Quisque eleifend, arcu a dictum varius, < a  href = "#" >Read More...</ a ></ div >      < br  />      < br  />    </ div >    < div >      < h2 >Availability</ h2 >      < div >< br  />        < img  src = "images/ico-med-4.png"  alt = ""  class = "about-img"  /> Lorem ipsum dolor sit amet, consd        ectetuer adipiscing elit. Proin sed odio et ante adipiscing lobortis. Quisque eleifend, arcu a dictum varius, < a  href = "#" >Read More...</ a > </ div >    </ div > </ div >

咱們抽象成下面的樣子： 

 

 

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

#macro(box $boxClass) < div  class = "$boxClass" > $bodyContent </ div > #end < span ></ span > #macro(boxItem $title $imgUrl $moreUrl)    < div >      < h2 >$title</ h2 >      < div > #img("$imgUrl") $bodyContent, #moreHref("$moreUrl")      </ div >    </ div >< span ></ span > < span ></ span >< span ></ span >#end< span ></ span > #macro(img $url) < img  src="<span></ span >$url< span ></ span >" alt="" class="about-img" /> #end   #macro(moreHref $url) < a  href = "$url" >Read More...</ a > #end

原來的代碼就能夠寫成下面的樣子了： 

 

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

#@box("box1") #@boxItem("Customer Service" "images/ico-med-1.png" "#") Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin sed odio et ante adipiscing lobortis. Quisque eleifend, arcu a dictum varius #end #@boxItem("Global Reach" "images/ico-med-3.png" "#") Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin sed odio et ante adipiscing lobortis. Quisque eleifend, arcu a dictum varius #end #end   #@box("box2") #@boxItem("Award Winning" "images/ico-med-1.png" "#") Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin sed odio et ante adipiscing lobortis. Quisque eleifend, arcu a dictum varius #end #@boxItem("Availability" "images/ico-med-1.png" "#") Lorem ipsum dolor sit amet, consd ectetuer adipiscing elit. Proin sed odio et ante adipiscing lobortis. Quisque eleifend, arcu a dictum varius #end #end

經過不斷抽象，就能夠把原來雜亂無章的Html代碼從咱們的頁面中拿掉，只留下咱們要顯示的數據內容。

Tiny的哲學是一樣的事情，不要作兩次，很明顯，那些Header Footer是每一個頁面都要顯示的，若是避免這些東東總要被重寫呢？

這裏就要建立一個佈局文件default.layout

 

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41

< div  id = "layout" >    < div  id = "header" >      < div  id = "logo" >< a  href = "#" >< img  src = "images/logo_1.gif"  alt = ""  /></ a ></ div >      < div  class = "member_login" >        < div  class = "login_box" >          < form  action = ""  method = "get" >            < fieldset >            < div  class = "column_1" >              < label >username :</ label >              < label >password :</ label >            </ div >            < div  class = "column_2" >              < input  type = "text"  name = ""  value = ""  />              < input  type = "text"  name = ""  value = ""  />            </ div >            < div  class = "column_3" >              < input  type = "image"  src = "images/login_btn.gif"  class = "login" />            </ div >            < div  class = "column_4" >              < label  class = "password" >< a  href = "#" >Forgot < br  />              password</ a ></ label >            </ div >            </ fieldset >          </ form >        </ div >      </ div >    </ div >    < div  id = "body_container" > $pageContent     </ div >      < div  id = "footer" >        < div  class = "footer_link" >        < ul  style = "color:#FFf;" >           Copyright (c) Sitename.com. All rights reserved. Design by Stylish From < a  style = "text-decoration:underline; color:#FFF;"  href = "http://www.cssmoban.com" >cssMoban.com</ a >.          </ ul >        </ div >      </ div >    </ div > </ div > </ body > </ html >

這樣，全部的頁面都會自動擁有header和Footer。 

 

可是上面的樣子太難看了，咱們能夠經過定義宏，把它簡化成下面的樣子。

 

?

1 2 3 4 5

< div  id = "layout" > #header() $pageContent #footer() </ div >

哇，整個世界清靜了，固然，從Tiny的建議來講，最上層的<div id="layout">也儘可能不要原生的寫來了，變成下面的樣子就是最終的結果： 

?

1 2 3 4 5

#@pageLayout() #header() $pageContent #footer() #end

這樣帶來的好處是，何時要修改這些html原素，與使用它們的人毫無關係，改了，全部的人就都會生效。 

至此，咱們已經學會了，怎麼進行抽象(眼睛能發生重複的地方，會一點html和Vecocity)；學會了怎麼寫佈局，就是在一大段文本當中放一個$pageContent的標記，表示其它page頁面就塞在這個位置。學會了編寫宏，帶有$pageContent的表示，它裏面能夠裝別的東東。學會了怎麼作UI組件包。
基於Tiny編寫網站 ，帶來的好處是：網站構建中，一樣的東西，永遠不用寫第二次；頁面的易維護性很是強，特別簡潔；將來的維護很是方便，進行大的結構化調整對於最終頁面也沒有任何影響。

下面展現一下Tiny網站的構建代碼：

下面是總體佈局default.layout文件的內容：

 

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40

#@wrap() #@header()      #sitename("TINY WEB FRAMEWORK" "咱們的目標是: Think big, start small.")      #@topnav()          #topnavItem("home" "Home" "/tinysite/home/home.page")          #topnavItem("faq" "FAQ" "/tinysite/home/faq.page")          #topnavItem("feature" "Feature" "/tinysite/home/feature.page")          #topnavItem("sample" "Sample" "/tinysite/home/sample.page")          #topnavItem("demo" "Demo" "/tinysite/home/demo.page")          #topnavItem("Task" "Task" "/tinysite/home/task.page")          #topnavItem("document" "Document" "/tinysite/home/document.page")          #topnavItem("resource" "Resource" "/tinysite/home/resource.page")          #topnavItem("about" "About" "/tinysite/home/about.page")      #end      #clear()      #@headercolumn1()      咱們要作的不僅是平臺，更是一件藝術品，從全部項目參與者的視覺來看，它都是簡潔、高效、美觀的。      #end      #@headercolumn2()          < div  id = "search_top" >          < form  action = "/search/search.php"  method = "get" >          < p >< input  type = "text"  name = "query"  id = "query"  class = "keyword" /> </ p >          < p  class = "button" >< input  name = ""  type = "image" src = "${TINY_CONTEXT_PATH}/images/searchbutton.gif"  alt = "Search"  /></ p >          < p  class = "hide" >  < input  type = "hidden"  name = "search"  value = "1"  /> </ p >          </ form >          </ div >          < div  id = "subscribe" >< a  href = "#" >Subscribe</ a ></ div >      #end      #clear() #end   #@contents() $!pageContent #end   #@footer() < p >Copyright TINY open source group.</ p > < p >網站解釋權歸&nbsp;< b >TINY開源組織</ b >&nbsp;全部.</ p > #end #end

下面是關於頁面about.page的內容： 

 

?

1 2 3 4 5 6 7 8 9 10 11 12 13

#@homepage()      #@faq("關於咱們")          #@servicesItem("idea")              咱們的目標：經過此開源項目的運做，對於J2EE應用框架中的各類概念與架構進行充分的驗證與分析，達到概念清晰，理論體系完整，功能基本完成。              系統的編寫，主要利用業餘時間編寫。          #end      #end      #@faq("主要參與者")          #@servicesItem("idea")          spzebra：負責架構設計，核心代碼編寫。          #end      #end #end

下面是demo.page的頁面內容 

 

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

#@homepage()      #@faq("演示列表")          #@servicesItem("idea")          HelloWorld          #end          #@servicesItem("design")          四則運算          #end          #@servicesItem("apps")          簡單數據維護          #end          #@servicesItem("mobile")          站內郵件系統          #end      #end #end

等等，因此的頁面都很是簡捷。 

上述兩個頁面的執行效果圖：

關於頁面效果：

示例頁面效果

小結：

採用Tiny與傳統網頁開發的不一樣之處在於：

傳統的採用html編寫，Tiny則基於宏編寫，宏有更高的抽象度，避免了重複代碼的編寫，使得修改的時候更加容易。

傳統的html，每一個頁面都要完整編寫，Tiny則不須要，每一個頁面只寫每一個頁面須要的部分。由於Tiny框架引入了佈局的概念，能夠把重複性的內容都放到佈局中去。因爲Tiny支持多重佈局，支持佈局繼承，支持個性化佈局，所以全部需求均可以獲得知足。

國際化支持，若是要構建國際性網站，Tiny在這方面有強力支持。

靜態化支持，Tiny默認是動態網站，可是能夠根據配置提供頁面靜態化能力，大大提高網站響應速度，下降數據庫壓力。

固然，Tiny提供了這麼多優勢，也會帶來一點要求，就是須要學習Velocity模板技術，通常來講3小時的學習，就能夠滿點開發要求(可是開發期及維護期節省的時間就遠不止這個數了)。

固然，光看寫文檔，以爲又羅嗦，又難懂，光看不練假把式，實際操做一下就知道了。