賽拉維的秋天

Node.js 是最近很火的技術，
最近柯南的公司興起了一股 Node.js 風，
所以這個週末宅在家練習 Node.js。
由於網路上介紹 Node.js 的文章已經不少，
所以柯南只會介紹一下本週練習的內容與發現，
當然還有問題，歡迎知道解答的朋友可以留言回答。

Node.js

Node.js 最白話的介紹，我認為它是一個在 Server 與 Client 端都可以使用 Javascript的技術來開發服務的架構，
它在 2009 年被 Ryan Dahi 釋出，
所以它是一個很年輕的語言。
Node.js的官方網址為 http://nodejs.org/

柯南在我的 Mac 上安裝的方法，
採用最簡單的方式，
直接下載官方網頁的 pkg 檔後，安裝之。
若屬於事事都要動手做的朋友，
可以到 https://github.com/joyent/node 去下載原始檔手動安裝。

NPM

npm 是Node.js 套件的安裝管理軟體，
透過它可以較容易安裝套件，
例如本次要練習的 express, mustache 與 jquery。
它的官方網址為 http://npmjs.org/
由於這個軟體也是不斷更新，
要注意安裝的位置是否有改變，
可能要移除舊的安裝路徑，
例如從 /usr/bin/npm 換到 /usr/local/bin/npm 。
附帶一提要更新 npm ，
可以下以下指令：

npm update npm -g

express

express 我認為是 Node.js 的 MVC framework，
在這次練習，
我利用 express為主體進行 routing, controller, template, ajax 的操作。
express的官方網站為 http://expressjs.com
可以使用 npm 來安裝。

上圖是我這次練習的檔案架構，
app.js 是 express最主要的設定檔，
它定義了  express 要使用哪些套件，
它的 template 系統是什麼，
還有它的路徑設定與port。

由於我不喜歡把 路徑設定與裡面的邏輯都塞到 app.js ，
所以在 app.js 我寫了以下的檔案，

//routing setting
var routes = require('./routes')  , routes2 = require('./routes2');
app.get('/jquery', routes2.jquery);
app.get('/hello/:name', routes2.hello);
app.get('/', routes.index);

然後在 routes 與 routes2 中的 index.js 就可以寫對應的邏輯了！例如：

exports.index = function(req, res){ 
res.render('index', { title: 'Express' })
};

mustache

這是一個 template 的語言，
express 目前並沒有內建支援。
但是可以先用 npm 安裝 stache 套件，（npm install -g express stache）
並在 app.js 中的 view engine 設定為 mustache，
就可以使用。

app.configure(function(){  
app.set('view engine', 'mustache');  
app.register(".mustache", require('stache')); 
...
});

mustache 的官方網址為 http://mustache.github.com/
會選擇它的原因很簡單，
為了工作上的需求XD

jquery

這個應該不用多介紹，
是個好用的 javascript framework，
它也有 nodejs 版本，
當然本公司也有好用的的 framework YUI3，
如何使用 YUI3 nodejs 版，
之後柯南也會進行練習與介紹，
不過各位朋友也可以先參考 clay 大大的文章 :)
http://clayliao.blogspot.com/2011/08/using-npm-manage-nodejs-pkg.html

要安裝 jquery nodejs版，
可以用 npm指令安裝 npm install jquery

本次柯南想要練習 server 端 jquery的 ajax功能，
不過網路上一時之間好像也找不到，
所以只好硬上，
以下為程式碼：

var $ = require('jquery'); 
$.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?", {   
tags: "cat",   
tagmode: "any",   
format: "json"}, function(data) {
var imgs = '{imgs:[';
$.each(data.items, function(i,item) {   
imgs += '{img:"' + item.media.m + '"}';   
if ( i == 3 ) {     
imgs += ']}';
return false;     
} else {
imgs += ',';
}   
});
... 

只不過，
目前柯南遇到一個問題，
那就是不知道如何將變數傳入 mustache 的template？

res.render('jquery', {imgs:[{img:"http://farm8.staticflickr.com/7008/6529916751_0581617361_m.jpg"},{img:"http://farm8.staticflickr.com/7160/6529913429_d29e5b7c8b_m.jpg"},{img:"http://farm8.staticflickr.com/7005/6529892381_3bae14c52c_m.jpg"},{img:"http://farm8.staticflickr.com/7164/6529891385_5c1bc9be0e_m.jpg"}]}); 

上面的 hard code 的程式搭配以下 mustache template

{#imgs}}<img src="{{img}}" />{{/imgs}}

是會產生正確網頁結果


不過如果用
imgsdata = '{imgs:[{img:"http://farm8.staticflickr.com/7008/6529916751_0581617361_m.jpg"},{img:"http://farm8.staticflickr.com/7160/6529913429_d29e5b7c8b_m.jpg"},{img:"http://farm8.staticflickr.com/7005/6529892381_3bae14c52c_m.jpg"},{img:"http://farm8.staticflickr.com/7164/6529891385_5c1bc9be0e_m.jpg"}]}';
res.render('nodetube', {imgs : imgsdata});
就沒有辦法  render 出圖片

如果知道方法的朋友歡迎跟柯南說喔!

總而言之，
這次練習收獲還蠻多的，
也希望本篇文章對 nodejs 有興趣的朋友有幫助 ^^