不⼀一樣的 Web  Server…  coServ

Part  I    

Ben  Lue  2014©  Gocharm  Inc.

coServ  …

不是 Express.js  的改良版 è 解決的是不同的問題

不處理 session, cookie, request body-parsing 的問題

è 這些問題 connect.js 或 express.js 已經處理的不錯了

coServ  要解決的是

•  前、後端如何有效分⼯工 •  前端設計的成果能否重複使⽤用 •  快速有效的使⽤用 BaaS 服務 •  網路應⽤用的開發時間縮減成 1/10

開始我們的 coServ 探索⾏行程吧

⽀支援多網站 利⽤用 node  cli/AddSite  就可建⽴立⼀一個網站的基本結構

{          "127.0.0.1":  {                  "Jtle":  "Single-­‐Page  Web  ApplicaJon  Demo",                  "locale":  "en",                  "home":  "/index",                  "theme":  "index”          }  }  

在 sites.json 上指定網域名稱

//  網域名稱 sites.json  

變更網站預設語系

{          "127.0.0.1":  {                  "Jtle":  "Single-­‐Page  Web  ApplicaJon  Demo",                  "locale":  "en",                  "home":  "/index",                  "theme":  "index”          }  }  

//  網站預設語系

試著將 coServ demo 的語系從 en 改成 zh，重開網站就發現⾸首⾴頁已是中⽂文

sites.json  

變更網站樣板

{          "127.0.0.1":  {                  "Jtle":  "Single-­‐Page  Web  ApplicaJon  Demo",                  "locale":  "en",                  "home":  "/index",                  "theme":  "index”          }  }  

//  網站所使⽤用樣板

修改 sites.json 中 theme 的屬性質，就可以換⼀一個樣板

sites.json  

網⾴頁解剖學 ⾴頁⾸首區(Head  Region)  

左欄區 (LeU  

Region)  

主內容區 (Content  Region)  

⾴頁尾區(Footer  Region)  

右圖顯⽰示⼀一個範例網⾴頁的架構。我們通常可以將⼀一個網⾴頁切割成幾個主要的區域。

區域可以疊套

提⽰示區 (Status Region)

橫幅區 (Banner Region)

功能選單 (Menu Region)

疊套可以無限層數，直到你把 server 灌爆 （不過灌爆應該不是我們的⺫⽬目的吧）

區域是Layout時的好朋友

每個區域有⾃自⼰己專屬的 HTML 和 CSS。你可以專注在單⼀一區域的設計，coServ 會為你做 CSS 的保護（不同區域即使⽤用了相同的id/class也不會衝突）。

區域的範例 <div  class=“top_row”>          <%  block(‘banner’);  %>  </div>  <div  class=“bot_row”>        <%  block(‘gallery’);  %>  </div>    .top_row  {          padding:  5px  auto;          background-­‐color:  #000;  }  .bot_row  {          border:  1px  solid;          background-­‐color:  #888;  }    

這個範例將區域切成上下⼆二列。第⼀一列引⽤用了’banner’這個區塊，第⼆二列則引⽤用了’gallery’區塊。 可以利⽤用區域專屬的 CSS 檔來設定每⼀一列的⼤大⼩小、樣式等。

HTML  

CSS  

介紹區塊 「區域」主要是⽤用來做網⾴頁空間的安排。「區塊」則可以產⽣生實際的內容。 區塊的內容可以由本地端（放在 coServ 上）的 node.js 模組產⽣生，或呼叫 COIMOTION API產⽣生。 不論是本地模組或 API 回傳的內容，都會放在 value 變數中，讓 template 可以引⽤用。

區塊的組成 區塊最多可由五個檔組成

HTML，最少需要這個檔

CSS，區塊的 CSS 設定

Javascript，是區塊的 controller

Include，如果區塊需要引⽤用其他的 css 或 js 檔

Lang，多國語系的語⾔言檔

區塊HTML 其實是⼀一個 template，可以⽤用來套⽤用執⾏行結果 <%  if  (value.list.length  >  0)  {  %>          <ul>  

 <%  value.list.forEach(funcJon(item)  {  %>    <li><%=  item.Jtle  %></li>    <%  });  %>  

       </ul>  <%  }  else    {  %>          <div>No  pages.</div>  <%  }  %>  

說明：先檢查有沒有資料(value.list)，如果有資料，每筆輸出成<li>。如果沒資料就顯⽰示 "No Pages"。

區塊CSS 也是⼀一個 template，所以也可以套⽤用執⾏行結果 .menu_bar  {  <%  if  (value.isGuest)  {  %>          font-­‐color:  #green;  <%  }  else    {  %>          font-­‐color:  #white;  <%  }  %>  }  

說明：如果是訪客(value.isGuest)那麼 menu bar 的字體顏⾊色⽤用綠⾊色的，已登⼊入的會員字體⽤用⽩白⾊色的。

區塊Javascript coServ 把區塊的 Javascript 包裝成⼀一個 controller 物件（類似 node.js 的 module）

ctrl.startup  =  funcJon()  {          //  區塊完全載⼊入後會呼叫此函數。可⽤用來做區塊起始的動作 };    ctrl.extFoo  =  funcJon()  {          //  這個函數在外部看的到（類似 node.js export 的效果） };    funcJon    intFoo()  {          //  這個函數只在 ctrl 內部看的到  };  

區塊lang Lang檔是 XML 格式，參考以下範例：

<?xml  version="1.0"  encoding="UTF-­‐8"?>  <phrases>          <ph  id="Jtle">                  <zh>標題</zh>                  <en>Title</en>          </ph>  </phrases>  

在 HTML 中這麼叫⽤用： <h2><%=ph.Jtle%></h2>  

coServ 會根據使⽤用者的語系輸出對應的⽂文字

參考資料 第⼀一集先到這裡，以下是參考資料： coServ 開箱⽂文 http://coimotion.github.io/coServ/zh/index.html coServ 網站的檔案結構 http://coimotion.github.io/coServ/zh/structure.html coServ 組裝網⾴頁 http://coimotion.github.io/coServ/zh/layout.html

中⽂文 README https://github.com/coimotion/coServ/blob/master/README_zh.md

Thanks