2012
Apr
30

網頁好讀版


mojito 發音是「Mohito」,它是 Yahoo! 團隊開發的 node.js MVC Framework,底層還是使用 v8 engine 與 node.js,內建有多國語系、MVC、Detect Device 等等功能,mojito 本身使用 YUI3 的方式來開發,所以語法上,寫起來就跟 YUI3 沒什麼兩樣,如果你是 YUI3 愛用者的話,上手應該是非常的快,可惜我不是YUI愛用者呀!!!,使用 mojito 就等於是由 Yahoo 幫你維護一套 node.js library,加快你開發的時間,現在我們就開始安裝吧。

mojito 基本安裝

安裝 mojito 前,請先確定你的電腦已經安裝 node.js ,若是還沒安裝,請先參考「node.js 安裝方式」

mojito 已經整合到 node.js 的 npm 工具裡,所以我們得先安裝 npm ,然後再透過npm 安裝 mojito ,第一步就是在 Linux 中執行下列的指令。

curl http://npmjs.org/install.sh | sh

當你執行這個指令的時候,應該會看到一堆 error ,錯誤訊息「 Error: EACCES」 ,這是因為你沒有 sudo 的權限,所以我們只好加 sudo ,使用 root 的權限。

curl http://npmjs.org/install.sh | sudo sh

當你執行這句指令的時候,你可能又會碰到「cannot found /usr/bin/node」之類的錯誤訊息。

! 解決方式 1 : sudo ln -s /usr/local/bin/node /usr/bin/node ,因為我把 node js 裝到 /usr/local/ ,而 root 這個帳號並沒有將 /usr/local/ 的 command 設定為預設路徑,所以我只好建一個 symbolic link 連過去,最後再重新跑一次上個指令,就可以安裝 npm 成功了。

npm 預設安裝的路徑: /usr/lib/node_modules/npm

成功的安裝 npm 之後,接下來就是安裝 Yahoo! 的 mojito 軟體,安裝方式也很簡單,執行下列的語法就行了。

npm install mojito -g

最後! 我們要測試一下 mojito 是否安裝成功,可以執行下列的指令,若是沒有錯誤訊息,就是安裝成功了。

mojito test

mojito 預設安裝的路徑在 /usr/lib/node_modules/mojito ,這裡有一堆 mojito 相關的 library ,有興趣的人就自已打開來看吧。

使用 mojito 製作我的第一個 mojito 網頁

mojito 的網頁架構是,第一層先是一個 app,而每一個 app 又可以有多個 mojit ,mojit 你也可以把它簡單的想成是一個小型的 module,或是把它當成一個頁面(page) ,你可以藉由各種不同的 module ,去組成你想要的 Web 頁面。

如上圖,假設我想要寫一個 聊天室的 APP,其中可能會包含 首頁,聊天房,加好友,登入頁,註冊頁等大大小小不同的頁面,這時每一個 mojit(module) 我就可以把它當成是一個頁面來製做。

! mojito 底下有很多個 mojit ,這裡要注意的確少一個「o」。

測試 mojito ,首先第一步我們先建立一個 app ,我將新建的 app 命名為 test_app

mojito create app test_app

這時你就會看到 test_app/mojits,test_app/assets 等目錄,因為 mojit(module) 會有多個,所以命名上變成 mojits。

第二步,進入 test_app的路徑,然後我們建立一個 mojit ,這裡我就命名為 test_module

cd test_app mojito create mojit test_module

這樣預設的網頁就已經完成了,接著我們要啟動 mojito web server,在 test_app的目路下執行下列的指令。

mojito start

試著使用瀏覽器,連結這個網址: http://localhost:8666/@test_module/index ,預設 mojito 是使用 port 8666。

一切正常的話,你就可以看到上面這個頁面,index 是每一個 module 預設給的頁面,而 test_module 就是我剛剛所建立的新 module,@test_module 是 mojito 提供的一個簡捷呼叫 module 的方式,最好的方式還是必需透過 route 的方式,指定某個 url 對應的 module 名稱 ,而 route 的部分我就留到下一篇文章啦...請期待!

Mojito 更改 Port

Mojito 預設使用 8666 port ,想要更改的話,可以直接使用 command ,只要在 mojito start 的後面加上 port 的數字即可,如果 port 小於1024的話,必須要有 root 的權限,就記得要加上 「sudo」。

mojito start 8080

相關資料

網頁好讀版