2012
May
02

網頁好讀版


要使用 mojito ,最重要的一點是,它提供了一套 mvc 架構,當然 mvc 這種東西非常的常見與普通,不過對於 node.js 這種新的程式語言來說,node.js 支援的 library 目前還很少,接來下就開始使用 mojito mvc吧。

MVC 分成三個部分,controller , model ,view ,這三個在 mojito 分別的檔案是 controller.server.js , models/ , views/ ,這三個是 mojito module 中預設就會有的資料。

「models」 這個部分最主要的功能是抓 data ,並把 data 存成 json 格式,然後回傳,「views」 這個部分最主要的功能是樣版功能,最後「controller.server.js」就是用來控制讀取哪一個 model 與 view。

models 與 views 的資料格式

因為 javascript 的關系,所以 models的資料格式,我們都使用 json format 來回傳,從上面可以看出,model 與 view 都可以有很多個,再由一個 controller 來控制。

Example
  1. {
  2. "title":"mojito title"
  3. "data":{
  4. "status":"true"
  5. }
  6. }

在 view 中,如果想要抓 title 的值,可以這樣寫 {{title}},而若是想要抓 status 的值,要這樣寫 {{#data}} {{status}} {{/data}} ,必須要用 data 把 status 包起來,就像是巢狀結構一樣。

Example
  1. <title>{{title}}</title>
  2. <div>{{#data}} {{status}} {{/data}}</div>

HTMLFrameMojit

這是 mojito 提供的一個樣版,它分成三個部分,第一塊是 {{top}} ,這裡是用來輸出 css 連結,第二塊是 {{child}},這是用來顯示最重要的網頁內容,第三塊是 {{botom}} ,這裡是用來顯示 javascript 連結。

  • /usr/lib/node_modules/mojito/lib/app/mojits/HTMLFrameMojit/ : HTMLFrameMojito 的原始碼都可以在這個路徑中找到。

/usr/lib/node_modules/mojito/lib/app/mojits/HTMLFrameMojit/views/index.mu.html : 這是 HTMLFrameMojit 的樣版內容,從這個檔案裡,就可以清楚的看到 top, child , bottom , 「top 與 bottom」 都是用來顯示 css , js 的,所以這二個塊區是由 assets.addCss() , assets.addJs() 這兩個 function來産生, 「child」 這個塊區為主內容,必須自已建立一個 mojito module 來輸出你的網頁畫面。

現在就來使用 HTMLFrameMojit 吧,首先要打開 app 的 application.json ( test_app/application.json ),並在 specs 這個 field 中加入以下內容,child.type 是指 module 的名稱,「frame」是我給 HTMLFrameMojit的一個名稱,title 就是網頁的標題名稱。

Example
  1. "specs": {
  2. "frame":{
  3. "type":"HTMLFrameMojit",
  4. "config":{
  5. "title":"我的第一個網頁",
  6. "child":{
  7. "type":"test_module"
  8. }
  9. }
  10. }
  11. },

接著我們在 routes.json 中加入網址路徑設定,首先我先給他一個名稱叫 "main_content" ,接著指定使用的 protocol 方式為 [get],網址路徑「/」(http://localhost:8666/),執行的 module 為 mojito 的內建功能 HTMLFrameMojit,在 application.json的設定中,我們已經指定他的名稱為 frame,這裡就可以直接指定我要執行 frame 的 index。

Example
  1. "settings": [ "master" ],
  2. "main_content":{
  3. "verbs":["get"],
  4. "path":"/",
  5. "call":"frame.index"
  6. }
  • mojito start 最後在 test_app 的目錄下執行,就可以啟動 web server 了。

網頁好讀版