最近在看node.js的web開發(fā)框架Clouda，目前的版本為0.9，看來第一個(gè)大版本1.0的功能應(yīng)該基本齊全了。

那么這里就試著開發(fā)出一個(gè)簡單的留言板系統(tǒng)實(shí)例，和大家分享一下。

安裝配置什么的就不說了，留言板也比較簡單，一個(gè)輸入框，一個(gè)留言列表。下面就直接上代碼了。

建立一個(gè)messageboard的項(xiàng)目。

首先是model，數(shù)據(jù)模型包括用戶名、時(shí)間、留言內(nèi)容。

Model.messageboard = function(exports){exports.config = {fields: [{name:'name', type:'string'},{name:'message', type:'string'},{name:'time', type:'datetime',defaultValue:'now()'}]}; };

然后是controller，包括PubSub模型和場景的生命周期管理。

publish下的：

module.exports = function(fw){fw.publish('messageModel', 'pub-messageboard', function(callback){var collection = this;collection.find({}, {sort:[['time',1]]}, function(err, items){callback(items);});},{beforeInsert : function(serverCollection, structData, userinfo, callback){structData.time = (new Date()).valueOf(); // 以服務(wù)器時(shí)間為準(zhǔn) callback(structData); }}); };

controller下的：

sumeru.router.add({pattern: '/messageboard',action: 'App.messageboard'}); sumeru.router.setDefault('App.messageboard'); App.messageboard = sumeru.controller.create(function(env, session){var getMsgs = function(){session.messages = env.subscribe('pub-messageboard', function(msgCollection){session.bind('messageboard_container', {data : msgCollection.find(),});});};//onready is respond for event binding and data manipulateenv.onready = function(){session.event('messageboard_container', function(){document.getElementById("messages").style.height = document.body.clientHeight - 80 + "px";document.getElementById('messages').scrollTop = document.getElementById('messages').scrollHeight;});window.onresize = function(){document.getElementById("messages").style.height = document.body.clientHeight - 80 + "px";document.getElementById('messages').scrollTop = document.getElementById('messages').scrollHeight;};session.eventMap('#inputMessage', {'keydown' : function(e){if(e.keyCode == 13){sendMessage();}}});//send messagedocument.getElementById("send").addEventListener('click',sendMessage);};var sendMessage = function(){var input = document.getElementById('inputMessage'),inputVal = input.value.trim();var inputName = document.getElementById('inputName'),inputValName = inputName.value.trim();if (inputVal == '' || inputValName == '') {alert("用戶名和消息不能為空！");return false;};session.messages.add({name: inputValName,message : inputVal,time : (new Date()).valueOf()});session.messages.save();input.value = '';input.focus(); };//onload is respond for handle all data subscriptionenv.onload = function(){ return [getMsgs]; };//sceneRender is respond for handle view render and transitionenv.onrender = function(doRender){doRender('messageboard', ['push', 'left']);};});

然后是view，顯示一個(gè)輸入框和所有的留言。

<div style="width:800px;margin:auto;"><h1>留言板</h1> <div><label for="inputName">昵稱：</label><input id="inputName" placeholder="Name" /><br /><input id="inputMessage" placeholder="請(qǐng)?jiān)诖颂幜粞?" style="height:80px;width:700px;" /><br /><button id="send">提交</button></div> <block tpl-id="messageboard_container"><div id="messages" style="border-top:1px solid #333;margin:15px;">{{#each data}}<div class="username" style="border-top:1px dotted #333;margin-top:15px;">`this`.`username`<span class="time" style="padding-left:20px;">{{$Library.getChatTime.getTime(this.time)}}</span></div><div class="content">`this`.`message`</div> {{/each}}</div></block></div>

然后在瀏覽器中輸入：

http://localhost:8080/debug.html/messageboard

出現(xiàn)

大功告成~

轉(zhuǎn)載于:https://blog.51cto.com/jiaming/1354376

總結(jié)

以上是生活随笔為你收集整理的Clouda框架开发留言板实例的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。