Node.js MVC：Express.js + Derby.js Hello World 教程

DerbyJS — Node.js MVC 框架

Express.js 是一個流行的節點框架，它使用中間件概念來增強應用程序的功能。 Derby 是一種新的複雜模型視圖控制器 (MVC) 框架，旨在與 Express 一起使用，因為它是中間件。 Derby 還支持 Racer、數據同步引擎和 Handlebars-like 模板引擎以及許多其他功能。

Derby.js 安裝

讓我們在不使用腳手架的情況下建立一個基本的 Derby 應用程序架構。通常，當人們剛開始學習一個新的綜合框架時，項目生成器會讓人感到困惑。這是一個最低限度的“Hello World”應用程序教程，它仍然說明了 Derby 框架並演示了使用 websockets 的實時模板。

當然，我們需要 Node.js 和 NPM，可以從 nodejs.org 獲得。全局安裝 derby 運行：

$ npm install -g derby

檢查安裝：

$ derby -V

我截至 2013 年 4 月的版本是 0.3.15。我們應該很好地創建我們的第一個應用程序！

Derby.js 應用程序中的文件結構

這是項目文件夾結構：

project/
  -package.json
  -index.js
  -derby-app.js
  views/
    derby-app.html
  styles/
    derby-app.less

Derby.js 項目的依賴項

讓我們在 package.json 中包含依賴項和其他基本信息 文件：

 {
  "name": "DerbyTutorial",
  "description": "",
  "version": "0.0.0",
  "main": "./server.js",
  "dependencies": {
    "derby": "*",
    "express": "3.x"
  },
  "private": true
}

現在我們可以運行 npm install 這會將我們的依賴項下載到 node_modules 文件夾。

Derby.js 中的視圖

視圖必須在 views 中 文件夾，它們必須在 index.html 中 在與您的 derby 應用程序 JavaScript 文件同名的文件夾下，即 views/derby-app/index.html ，或者位於與您的 derby 應用 JS 文件同名的文件中，即 derby-app.html .

在這個示例“Hello World”應用程序中，我們將使用 <Body:> 模板和 {message} 多變的。 Derby 使用類似 mustach-handlebars 的語法進行反應式綁定。 index.html 看起來像這樣：

<Body:>
  <input value="{message}"><h1>{message}</h1>

與 Stylus/LESS 文件相同，在我們的示例中 index.css 只有一行：

h1 {
  color: blue;
}

要了解有關這些出色 CSS 預處理器的更多信息，請查看 Stylus 和 LESS 的文檔。

構建 Derby.js 主服務器

index.js 是我們的主服務器文件，我們從包含 require() 的依賴項開始 功能：

var http = require('http'),
  express = require('express'),
  derby = require('derby'),
  derbyApp = require('./derby-app');

最後一行是我們的 derby 應用程序文件 derby-app.js .

現在我們正在創建 Express.js 應用程序（v3.x 與 2.x 有顯著差異）和一個 HTTP 服務器：

[旁注]

閱讀博客文章很好，但觀看視頻課程更好，因為它們更具吸引力。

許多開發人員抱怨 Node.js 上缺乏負擔得起的高質量視頻材料。觀看 YouTube 視頻會讓人分心，花 500 美元購買 Node 視頻課程很瘋狂！

去看看 Node University，它有關於 Node 的免費視頻課程：node.university。

[旁注結束]

var expressApp = new express(),
  server = http.createServer(expressApp);

Derby 使用我們這樣創建的 Racer 數據同步庫：

var store = derby.createStore({
  listen: server
});

為了從後端獲取一些數據到前端，我們實例化模型對象：

var model = store.createModel();

最重要的是，我們需要將模型和路由作為中間件傳遞給 Express.js 應用程序。我們需要公開 public 文件夾，socket.io 才能正常工作。

expressApp.
  use(store.modelMiddleware()).
  use(express.static(__dirname + '/public')).
  use(derbyApp.router()).
  use(expressApp.router);

現在我們可以在端口 3001（或任何其他）上啟動服務器：

server.listen(3001, function(){
  model.set('message', 'Hello World!');
});

index.js 的完整代碼 文件：

var http = require('http'),
  express = require('express'),
  derby = require('derby'),
  derbyApp = require('./derby-app');

var expressApp = new express(),
  server = http.createServer(expressApp);

var store = derby.createStore({
  listen: server
});

var model = store.createModel();

expressApp.
  use(store.modelMiddleware()).
  use(express.static(__dirname + '/public')).
  use(derbyApp.router()).
  use(expressApp.router);

server.listen(3001, function(){
  model.set('message', 'Hello World!');
});

Derby.js 應用程序

最後，包含前端和後端代碼的 Derby 應用程序文件。僅前端代碼在 app.ready() 內 打回來。首先，讓我們要求並創建一個應用程序。 Derby 使用不同尋常的結構（與熟悉的舊 module.exports = app ):

var derby = require('derby'),
  app = derby.createApp(module);

為了讓 socket.io 神奇地工作，我們需要訂閱模型屬性到它的可視化表示，換句話說，綁定數據和視圖。我們可以在根路由中做，這就是我們定義它的方式（patter is / ，又名根）：

app.get('/', function(page, model, params) {
  model.subscribe('message', function() {
    page.render();  
  })  
});

derby-app.js的完整代碼 文件：

var derby = require('derby'),
  app = derby.createApp(module);

app.get('/', function(page, model, params) {
  model.subscribe('message', function() {
    page.render();  
  })  
});  

啟動 Hello World 應用程序

現在一切都應該準備好啟動我們的服務器了。執行 node . 或 node index.js 並在 http://localhost:3001 打開瀏覽器。您應該可以看到類似這樣的內容：http://cl.ly/image/3J1O0I3n1T46。

在 Derby.js 中向後端傳遞值

當然靜態數據不多，所以我們可以稍微修改一下我們的應用程序，讓後端和前端可以互相對話。

在服務器文件 index.js 添加 store.afterDb 收聽set message 上的事件 屬性：

server.listen(3001, function(){
  model.set('message', 'Hello World!');
  store.afterDb('set','message', function(txn, doc, prevDoc, done){
    console.log(txn)
    done();
  }) 
});

index.js 的完整代碼 修改後：

var http = require('http'),
  express = require('express'),
  derby = require('derby'),
  derbyApp = require('./derby-app');

var expressApp = new express(),
  server = http.createServer(expressApp);

var store = derby.createStore({
  listen: server
});

var model = store.createModel();

expressApp.
  use(store.modelMiddleware()).
  use(express.static(__dirname + '/public')).
  use(derbyApp.router()).
  use(expressApp.router);

server.listen(3001, function(){
  model.set('message', 'Hello World!');
  store.afterDb('set','message', function(txn, doc, prevDoc, done){
    console.log(txn)
    done();
  })   
});

在 Derby 應用程序文件 derby-app.js 中 添加 model.on() 到 app.ready() ：

  app.ready(function(model){
	    model.on('set', 'message',function(path, object){
	    console.log('message has been changed: '+ object);
	  })
  });

完整的 derby-app.js 修改後的文件：

var derby = require('derby'),
  app = derby.createApp(module);

app.get('/', function(page, model, params) {
  model.subscribe('message', function() {
    page.render();
  })
});

app.ready(function(model) {
  model.on('set', 'message', function(path, object) {
    console.log('message has been changed: ' + object);
  })
});

現在我們將在終端窗口和瀏覽器開發者工具控制台中看到日誌。最終結果在瀏覽器中應該是這樣的：http://cl.ly/image/0p3z1G3M1E2c，在終端中應該是這樣的：http://cl.ly/image/322I1u002n38。

有關持久性領域的更多魔力，請查看 Racer 的 db 屬性。有了它，您可以在視圖和數據庫之間設置自動同步！

如果您對未來博文的任何特定主題感興趣，請告訴我，別忘了查看我的 JavaScript 書籍：

• 使用 JS 進行快速原型設計：敏捷 JavaScript 開發
• Oh My JS：最好的 JavaScript 文章

此 Express.js + Derby Hello World 應用程序中所有文件的完整代碼可在 https://gist.github.com/azat-co/5530311 作為要點獲得。