nodejs

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 來安裝。

expressDir

上圖是我這次練習的檔案架構,
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}}

是會產生正確網頁結果
jquey-nodejs

不過如果用
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 有興趣的朋友有幫助 ^^

arrow
arrow
    創作者介紹
    創作者 賽拉維‧柯南 的頭像
    賽拉維‧柯南

    賽拉維的秋天

    賽拉維‧柯南 發表在 痞客邦 留言(0) 人氣()