溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
最近學習nodejs，剛看完BYVoid大大的《Node.js開發指南》，有點手癢，擺弄了一番express，但還是覺得有些復雜，剛好看到百度也出了一個node的web框架clouda，號稱開發簡單，本著學習的態度，上手試用了一下，下面就把試用的過程給大家分享分享。
clouda使用的是MongoDB數據庫，它的數據存儲的形式是bjson，是json的一種擴展，操作命令也和javascript函數挺像，有js基礎的可以直接上手。
要使用clouda需要下載node.js和MongoDB，并且把兩者運行起來，目前clouda官方還沒有一個集成環境，它自己的包也是在npm里面，包名叫做sumeru，我是在win7下面安裝，要run起來，準備工作還是不少的。
安裝和啟動
下載node.js：http://nodejs.org/download/
下載MongoDB：http://www.mongodb.org/downloads
安裝npm包管理器：可參考 http://www.cnblogs.com/seanlv/archive/2011/11/22/2258716.html
安裝clouda：nodejs和npm都安裝好后，在命令行里輸入如下命令
npm install -g sumeru
創建clouda工程：這里就創建一個名為“study01”的工程
sumeru init ./study01
啟動MongoDB：首先在MongoDB目錄下建立data文件夾，然后在data文件夾里建立db文件夾，然后另開一個命令行窗口，進入MongoDB下的bin目錄，輸入命令
mongod.exe -dbpath ../data/db
運行Clouda：在命令行進入study01目標，輸入命令
sumeru start
上面的每一步都需要保證無誤，特別是npm的安裝，安裝完成后務必用npm -v命令測試一下。
如果沒有錯誤的話，會得到如下圖：
這時候，可以在瀏覽器里輸入：
localhost:8080/debug.html/itworks
如果出現“Welcome to sumeru!”則說明我們的clouda工程已經安裝成功。
第一個項目
關于clouda項目下面的目錄和文件都有什么作用，大家可以上官網http://cloudajs.org/ 上去查文檔，這里就不多說了。
下面我們開始建立一個項目試試，這個項目的目的是抓取一個網站的一部分內容，并且將其顯示出來。
clouda使用pubsub的事件處理方式來實現雙向數據綁定，在前端則用js模板引擎handlebars來實時刷新UI，這就是clouda實時性的由來，當然其內還有很多的技術細節來實現云到端的數據統一。
clouda是按照MVC模式來運作的，所以每一個項目都必須分別定義M、V、C，對于我們的這個小項目，分別定義如下：
Model：在study01目錄下的app/model里，建立news.js：
Model.news = function(exports){
exports.config = {
fields : [
{name: 'news', type: 'text'}
]
};
};即定義數據模型為text類型的content，然后修改同目錄下面的package.js：
sumeru.packages(
'news.js'
)Controller：這里我們要建立pubsub模型，然后還要管理場景的生命周期：
首先建立pub，在app/publish/下，建立pubnews.js：
module.exports = function(fw){
fw.publish('news','pubnews',function(callback){
var collection = this;
collection.extfind('pubnews',callback);
});
}我們還需要抓取第三方網站內容，然后將其保存到model中，這里利用clouda提供的external方法，相當于其他環境中的curl或者fetchurl，抓什么網站呢？就抓51cto移動開發首頁吧，不過這里遇到一個問題，抓取出來的內容是亂碼，原來nodejs只支持utf-8，而目標網頁是gb2312編碼的，幸好npm里有轉碼插件，那么趕緊裝上吧：
npm install iconv-lite
然后在同目錄下建立externalConfig.js：
/**
* 獲取第三方數據信息，由開發者自定義
*/
function runnable(){
//使用轉碼插件iconv-lite
var iconv = require('iconv-lite');
//{Object} config是所有三方publish配置的容器
var config = {};
config['pubnews'] = {
//{String} uniqueColumn為三方數據唯一標識
uniqueColumn : "mobile51CTO",
//method:GET/POST,暫不支持PUT和DELETE方法，默認請求方式為GET
method:"POST",
//{Function} fetchUrl的參數就是訂閱時發起的參數，返回值為pubext所抓取的url地址
fetchUrl : function(/** arg1, arg2, arg3 */){
return 'http://mobile.51cto.com';
},
//{Function} resolve方法作用是將抓取回來的原始數據(originData)轉化成為符合Model定義的數據(resolved)
resolve : function(originData){
decodeData = iconv.decode(originData,'gb2312');
var hotnewsRegex = /<ul class="list01">([\W\w]*?)<\/div>/;
var hotnews = decodeData.match(hotnewsRegex)[1];
var resolved = {
hotnews: hotnews
}
return resolved;
},
//{Number} fetchInterval為可選參數，用來指定抓取時間間隔，單位為ms
fetchInterval : 15 * 60 * 1000,
//{Boolean} buffer為可選參數，值為true時表示獲取原始Buffer，否則獲取原始數據字符串
buffer : true
}
//最后需要聲明此模塊為歸屬為'external'
return {
type : 'external',
config : config
}
}
module.exports = runnable;然后建立subscribe，并進行場景控制的生命周期管理，都在app/controller/下面，建立news.js：
sumeru.router.add(
{
pattern: '/news',
action: 'App.news'
}
);
sumeru.router.setDefault('App.news');
App.news = sumeru.controller.create(function(env, session){
var view = 'news';
var getNews = function(){
session.news = env.subscribe('pubnews', function(newsCollection){
var obj = newsCollection.getData()[0];
session.bind('newsBlock', {
'hotNews' : obj['hotnews']
});
});
};
env.onload = function(){
return [getNews];
}
env.onrender = function(doRender){
doRender(view, ['push','left']);
};
});然后同樣修改同目錄下的package.js：
sumeru.packages( 'itworks.js', 'news.js' )
View：這里就是顯示了，在app/view/下建立news.html：
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta http-equiv="content-type" content="text/html; charset=gb2312" />
<title>51CTO移動開發熱點新聞</title>
</head>
<body>
<h2>Top news</h2>
<block tpl-id="newsBlock">
<div>
{`hotNews`}
</div>
</block>
</body>
</html>代碼部分到這里就完成了，然后重新啟動MongoDB和Clouda，然后在瀏覽器中輸入
localhost:8080/debug.html/news
如果出現如下畫面，則說明這個小項目已經成功了。
總結：
clouda的確是比較簡單的，不過門檻也還存在，零基礎來玩這個東西是不可能的，另外因為javascript至今沒有一個好的開發調試環境，特別在node.js中調試難度更是倍增，因此用clouda開發主要要克服這些方面的困難。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
