搜尋

首頁 >web前端 >js教程 >使用 Node.js 和 Geddy 建立任務管理器應用程式

使用 Node.js 和 Geddy 建立任務管理器應用程式

WBOY
WBOY原創
2023-08-28 09:37:05900瀏覽

在這個由三部分組成的教程中，我們將深入研究如何使用 Node.js 和 Geddy 建立待辦事項清單管理應用程式。這是本系列的第二部分，我們將建立一個簡單的待辦事項清單管理應用程式。

#回顧

作為快速回顧，上次我們安裝了 Node 和 Geddy，產生了一個新應用程序，並學習如何啟動伺服器。在本教程中，我們將以上次所做的為基礎，因此請確保您已完成該教程，然後再繼續。

產生 Todo 資源

Geddy 有一個內建的資源產生器；這將使我們能夠自動產生特定資源的模型、控制器、視圖和路由。我們的待辦事項清單應用程式只有一個資源：todo。要產生它，只需將 cd 放入應用程式的目錄（cd path/to/your/todo_app）並執行：

geddy resource todo

您現在應該已將這些檔案新增至您的應用程式：

  • app/models/todo.js
  • #app/controllers/todos.js
    • 應用程式/視圖/todos/
    • index.html.ejs
    • show.html.ejs
    • 編輯.html.ejs
    add.html.ejs

您的

config/router.js

也應該附加以下內容：

router.resource('todos');

它的作用

如果您是 MVC 新手，這一切對您來說可能有點令人畏懼。不過別擔心，一旦你弄清楚了，事情就非常簡單了。 models/todo.js：這個檔案是我們定義 todo 模型的地方。我們將定義所有

todo

都具有的許多屬性。我們還將在這裡編寫一些數據驗證。 controllers/todos.js：此檔案是所有

/todos/

路由的最終位置。此控制器中的每個動作都有對應的路由： 

GET      /todos/            => index
POST     /todos/            => create
GET      /todos/:id         => show
PUT      /todos/:id         => update
DELETE   /todos/:id         => remove
GET      /todos/:id/add     => add
GET      /todos/:id/edit    => edit
views/todos/：這裡的每個檔案都對應到我們上面向您展示的

GET

路由之一。這些是我們用來產生應用程式前端的模板。 Geddy 使用 EJS（嵌入式 JavaScript）作為模板語言。如果您曾經使用過 PHP 或 ERB，那麼它看起來應該很熟悉。基本上，您可以在模板中使用您想要的任何 JavaScript。

感受路線 現在我們已經產生了一堆程式碼，讓我們驗證一下我們是否已經獲得了所需的所有路由。再次啟動應用程式 (

geddy使用 Node.js 和 Geddy 构建任务管理器应用程序)，並將瀏覽器指向 http://localhost:4000/todos。您應該會看到類似這樣的內容使用 Node.js 和 Geddy 构建任务管理器应用程序 使用 Node.js 和 Geddy 构建任务管理器应用程序

# 繼續嘗試其他

GET
    路由：
  • http://localhost:4000/todos/something
  • http://localhost:4000/todos/add
#http://localhost:4000/todos/something/edit

一切都好嗎？好的，我們繼續。

建立 Todo 模型 在 Geddy（以及大多數其他 MVC 框架）中，您可以使用模型來定義應用程式將使用的資料類型。我們剛剛為

todo

s 產生了一個模型，所以讓我們看看它給了我們什麼： <pre class="brush:javascript;toolbal:false;">var Todo = function () { // Some commented out code }; // Some more commented out code Todo = geddy.model.register('Todo', Todo); </pre> Geddy 中的模型非常簡單。我們只是為 todos 建立一個新的建構函數，並將其註冊為 geddy 中的模型。讓我們為

todo

s 定義一些屬性。刪除所有註解掉的程式碼並將其新增至建構函式： <pre class="brush:javascript;toolbal:false;">var Todo = function () { this.defineProperties({ title: {type: 'string', required: true} , id: {type: 'string', required: true} , status: {type: 'string', required: true} }); }; </pre> 我們的 todos 將有一個標題、一個 id 和一個狀態，這三個都是必要的。現在讓我們為

todo

s 設定一些驗證。 <pre class="brush:javascript;toolbal:false;">var Todo = function () { this.defineProperties({ title: {type: 'string', required: true} , id: {type: 'string', required: true} , status: {type: 'string', required: true} }); this.validatesPresent('title'); this.validatesLength('title', {min: 5}); this.validatesWithFunction('status', function (status) { return status == 'open' || status == 'done'; }); }; </pre> 我們正在驗證標題是否存在，標題的最小長度為 5 個字符，我們正在使用函數來驗證狀態是否為 open 或

done
。有很多內建的驗證函數，請繼續在 http://github.com/mde/geddy 上查看該專案以了解有關它們的更多資訊。

建立 Todo 模型適配器 現在我們已經設定了待辦事項模型，我們可以建立一個地方來儲存我們的模型。出於本教程的目的，我們只是將資料保存在記憶體中。我們將在全域

geddy

物件上掛起一個 todos 陣列來保存資料。在本系列的下一部分中，我們將開始將這些資料保存在資料庫中。

編輯您的 init.js 檔案 開啟

config/init.js### 檔案。現在應該有一個全域未捕獲的例外處理程序：### 
// Add uncaught-exception handler in prod-like environments
if (geddy.config.environment != 'development') {
  process.addListener('uncaughtException', function (err) {
    geddy.log.error(JSON.stringify(err));
  });
}

在该代码块之后，让我们将数组挂在 geddy 全局上：

geddy.todos = [];

现在我们有了一个地方来存储 todos。请记住，它位于您的应用程序内存中，因此当您重新启动服务器时它将消失。

创建模型适配器

模型适配器提供模型所需的基本 save、remove、load 和 all 方法。我们的数据源非常简单（只是一个数组！），因此编写模型适配器也应该非常简单。

在 lib 中创建一个名为 model_adapters 的目录，并在 lib/model_adapters 中创建一个名为 todo.js 的文件。让我们打开该文件并添加一些样板代码：

var Todo = new (function () {
})();
exports.Todo = Todo;

我们在这里所做的就是设置一个新的空白对象，将其导出到最终需要此文件的任何地方。如果您想更多地了解 Node 的 require 方法是如何工作的，这篇文章有一个很好的概述。在这种情况下，我们的 init.js 文件将满足要求。

需要 init.js 中的模型适配器

因此我们设置了一个新的 Todo 模型适配器对象。现在还很贫瘠，但我们很快就会做到这一点。现在，我们必须返回 init.js 并添加一些代码，以便在启动时将其加载到我们的应用程序中。在 config/init.js 中的 geddy.todos = []; 之后添加这两行：

geddy.model.adapter = {};
geddy.model.adapter.Todo = require(process.cwd() + '/lib/model_adapters/todo').Todo;

我们创建了一个空白的模型适配器对象，并向其添加了 Todo 模型适配器。

保存待办事项

现在我们已经有了模型和模型适配器，我们可以开始应用程序逻辑了。让我们首先将待办事项添加到我们的待办事项列表中。

编辑适配器上的保存方法以保存待办事项实例

处理数据时，首先应该去的地方是模型适配器。我们需要能够将 Todo 模型的实例保存到 geddy.todos 数组中。因此，打开 lib/model_adapters/todo.js 并添加保存方法：

var Todo = new (function () {
  this.save = function (todo, opts, callback) {

    if (typeof callback != 'function') {
      callback = function(){};
    }

    todo.saved = true;
    geddy.todos.push(todo);
    return callback(null, todo);

  }
})();

我们所要做的就是将实例的保存属性设置为 true 并将项目推送到 geddy.todos 数组中。在 Node 中，最好以非阻塞方式执行所有 I/O，因此养成使用回调传递数据的习惯是个好主意。对于本教程来说，这并不重要，但稍后当我们开始持久化事物时，它会派上用场。您会注意到我们确保回调是一个函数。如果我们不这样做并在没有回调的情况下使用 save，我们会收到错误。现在让我们继续控制器创建操作。

编辑创建操作以保存待办事项实例

继续看一下 app/controllers/todos.js 中的 create 操作：

this.create = function (req, resp, params) {
  // Save the resource, then display index page
  this.redirect({controller: this.name});
};

很简单，对吧？盖迪已经帮你把它记下来了。那么我们来稍微修改一下：

this.create = function (req, resp, params) {
  var self = this
    , todo = geddy.model.Todo.create({
        title: params.title
      , id: geddy.string.uuid(10)
      , status: 'open'
      });
  todo.save(function (err, data) {
    if (err) {
      params.errors = err;
      self.transfer('add');
    }
    else {
      self.redirect({controller: self.name});
    }
  });
};

首先，我们使用 geddy.model.Todo.create 创建一个 Todo 模型的新实例，传入表单将发布给我们的标题，并设置 id 和状态的默认值。

然后我们调用在模型适配器上创建的 save 方法并将用户重定向回 /todos 路由。如果它没有通过验证，或者我们收到错误，我们使用控制器的 transfer 方法将请求传输回 add 操作。

编辑add.html.js

现在是我们设置添加模板的时候了。看一下 app/views/todos/add.html.ejs，它应该看起来像这样：

<div class="hero-unit">
  <h3>Params</h3>
  <ul>
  <% for (var p in params) { %>
    <li><%= p + ': ' + params[p]; %></li>
  <% } %>
  </ul>
</div>

我们不需要 <ul></ul> 对于我们的用例来说，所以让我们暂时摆脱它。让你的 add.html.ejs 看起来像这样：

<div class="hero-unit">
  <%= partial('_form', {params: params}); %>
</div>

分音简介

Partials 为您提供了一种在模板之间共享代码的简单方法。

您会注意到我们在此模板中使用了部分内容。部分为您提供了一种在模板之间共享代码的简单方法。我们的添加和编辑模板都将使用相同的表单，所以现在让我们创建这个表单部分。在 views/todos/ 目录中创建一个名为 _form.html.ejs 的新文件。我们使用下划线来轻松判断该模板是否是部分模板。打开它并添加以下代码：

<%
  var isUpdate = params.action == 'edit'
    , formTitle = isUpdate ? 'Update this To Do Item' : 'Create a new To Do Item'
    , action = isUpdate ? '/todos/' + todo.id + '?_method=PUT' : '/todos'
    , deleteAction = isUpdate ? '/todos/' + todo.id + '?_method=DELETE' : ''
    , btnText = isUpdate ? 'Update' : 'Add'
    , doneStatus = isUpdate ? 'checked' : ''
    , titleValue = isUpdate ? todo.title : ''
    , errors = params.errors;
%>
<form id="todo-form" class="form-horizontal" action="<%= action %>" method="POST">
  <fieldset>
    <legend><%= formTitle %></legend>
    <div class="control-group">
      <label for="title" class="control-label">Title</label>
      <div class="controls">
        <input type="text" class="span6" placeholder="enter title" name="title" value='<%= titleValue %>'/>
        <%  if (errors) { %>
          <p>
          <% for (var p in errors) { %>
            <div><%=  errors[p];  %></div>
          <% } %>
          </p>
        <% } %>
      </div>
    </div>
    <% if (isUpdate) { %>
      <div class="control-group">
        <label for="status">Status</label>
        <div class="controls">
          <select name="status">
            <option>open</option>
            <option>done</option>
          </select>
        </div>
      </div>
    <% } %>
    <div class="form-actions">
      <input type="submit" class="btn btn-primary" value="<%= btnText %>"/>
      <% if (isUpdate) { %>
        <button type="submit" formaction="<%= deleteAction %>" formmethod="POST" class="btn btn-danger">Remove</button>
      <% } %>
    </div>
  </fieldset>
</form>

哇，那里有很多代码！让我们看看是否可以通过它。由于两个不同的模板将使用此部分，因此我们必须确保表单在两个模板中看起来都正确。大部分代码实际上是来自 Twitter Bootstrap 的样板。这就是让这个应用程序立即看起来如此出色的原因（在移动设备上也是如此！）。

为了使此应用程序看起来更好，您可以使用演示应用程序下载中提供的 CSS 文件。

我们做的第一件事是设置一些变量供我们使用。在 add 操作中，我们将 params 对象传递给 respond 方法调用中的模板。这给了我们一些信息——它告诉我们这个请求被路由到哪个控制器和操作，并给我们提供了在 url 中传递的任何查询参数。我们设置 isUpdate 变量来查看当前是否正在进行更新操作，然后我们设置更多变量来帮助清理视图代码。

从那里，我们所做的就是制作一个表格。如果我们执行添加操作，我们只需按原样渲染表单即可。如果我们正在进行编辑操作，我们会填写表单以让用户更新字段。

请注意，该表单将使用 _method=PUT 参数向 /todos/ 发送 POST 请求。 Geddy 使用标准方法覆盖参数，允许您从浏览器发送 PUT 和 DELETE 请求，而无需使用 JavaScript。 （至少在前端！）

我们需要看的最后一个小细节是“删除”按钮。我们使用 html5 的 formaction 属性来更改此表单的操作。您会注意到此按钮的 formaction 将 POST 请求发送到 /todos/:id 路由，并带有 _method=DELETE 参数。这将在控制器上执行 remove 操作，我们稍后会介绍。

重新启动服务器 (geddy) 并访问 http://localhost:4000/todos/add 以查看正在运行的模板。创建一个待办事项。

列出所有待办事项

现在我们已经将用户输入的待办事项添加到了 geddy.todos 数组中，我们可能应该将它们列出在某个地方。让我们从模型适配器中的 all 方法开始。

编辑适配器上的 all 方法以列出所有待办事项

让我们再次打开 lib/model_adapters/todo.js 并在 save` 方法上方添加一个 all 方法：

this.all = function (callback) {
  callback(null, geddy.todos);
}

这可能是我们今天要创建的最简单的模型适配器方法，它所做的就是接受回调并调用它并返回错误（目前始终为 null，我们将在下一个版本中升级此方法）教程）和 geddy.todos。

编辑索引操作以显示所有待办事项

再次打开 /app/controllers/todos.js 并查看 index 操作。它应该看起来像这样：

this.index = function (req, resp, params) {
  this.respond({params: params});
};

这部分非常简单，我们只需使用我们刚刚在模型适配器上定义的 all 方法来获取所有 todo 并渲染它们：

this.index = function (req, resp, params) {
  var self = this;
  geddy.model.adapter.Todo.all(function(err, todos){
    self.respond({params: params, todos: todos});
  });
};

这就是控制器的内容，现在进入视图。

编辑index.html.ejs

看一下 /app/views/todos/index.html.ejs，它应该如下所示：

<div class="hero-unit">
  <h3>Params</h3>
  <ul>
  <% for (var p in params) { %>
    <li><%= p + ': ' + params[p]; %></li>
  <% } %>
  </ul>
</div>

看起来很像 add.html.ejs 模板，不是吗？同样，我们在这里不需要 params 样板，因此将其取出，并使您的 index.html.ejs 模板如下所示：

<div class="hero-unit">
  <h2>To Do List</h2>
  <a href="/todos/add" class="btn pull-right">Create a new To Do</a></p>
</div>
<% if (todos &amp;&amp; todos.length) { %>
  <% for (var i in todos) { %>
  <div class="row todo-item">
    <div class="span8"><h3><a href="/todos/<%= todos[i].id; %>/edit"><%= todos[i].title; %></a></h3></div>
    <div class="span4"><h3><i class="icon-list-alt"></i><%= todos[i].status; %></h3></div>
  </div>
  <% } %>
<% } %>

这个也非常简单，但是这次我们的模板中有一个循环。在标题中，我们添加了一个按钮来添加新的待办事项。在循环内，我们为每个 todo 生成一行，显示其标题（作为指向 edit 页面的链接）及其状态。

要查看它，请访问 http://localhost:4000/todos。

编辑全部

现在我们有了 edit 页面的链接，我们应该可以让它工作了！

在模型适配器中创建加载方法

再次打开模型适配器 (/lib/model_adapters/todo.js)。我们将添加 load 方法，以便我们可以加载特定的 todo 并在我们的编辑页面中使用它。添加到哪里并不重要，但现在让我们将其放在 all 方法和 save 方法之间：

this.load = function (id, callback) {
  for (var i in geddy.todos) {
    if (geddy.todos[i].id == id) {
      return callback(null, geddy.todos[i]);
    }
  }
  callback({message: "To Do not found"}, null);
};

此加载方法需要一个 id 和一个回调。它循环遍历 geddy.todos 中的项目，并检查当前项目的 id 是否与传入的 id 匹配。如果是，则调用回调，并将 todo 项传回。如果找不到匹配项，则会调用回调并返回错误。现在我们需要在 todos 控制器的 show 操作中使用此方法。

编辑编辑操作以查找待办事项

再次打开 todos 控制器并查看它的 edit 操作。它应该看起来像这样：

this.edit = function (req, resp, params) {
  this.respond({params: params});
};

让我们使用刚刚创建的加载方法：

this.edit = function (req, resp, params) {
  var self = this;
  geddy.model.Todo.load(params.id, function(err, todo){
    self.respond({params: params, todo: todo});
  });
};

我们在这里所做的就是加载待办事项并将其发送到要渲染的模板。那么让我们看一下模板。

编辑edit.html.ejs

打开/app/views/todos/edit.html.ejs。我们再次不需要 params 样板，所以让我们删除它。让你的 edit.html.ejs 看起来像这样：

<div class="hero-unit">
  <%= partial('_form', {params: params, todo: todo}); %>
</div>

这应该与我们刚刚编辑的 add.html.ejs 文件非常相似。您会注意到，这次我们将 todo 对象发送到部分以及参数。很酷的是，由于我们已经编写了部分内容，因此这就是我们所要做的以使编辑页面正确显示。

重新启动服务器，创建一个新的 todo 并单击链接以查看其工作原理。现在让我们让更新按钮起作用！

编辑模型适配器中的保存方法

再次打开模型适配器并找到 save 方法。我们将添加一些内容，以便我们可以保存现有的 todos。让它看起来像这样：

this.save = function (todo, opts, callback) {
  if (typeof callback != 'function') {
    callback = function(){};
  }
  var todoErrors = null;
  for (var i in geddy.todos) {
    // if it's already there, save it
    if (geddy.todos[i].id == todo.id) {
      geddy.todos[i] = todo;
      todoErrors = geddy.model.Todo.create(todo).errors;
      return callback(todoErrors, todo);
    }
  }
  todo.saved = true;
  geddy.todos.push(todo);
  return callback(null, todo);
}

这会循环 geddy.todos 中的所有待办事项，如果 id 已经存在，它将用新的 todo 实例替换 todo 。我们在这里做了一些事情，以确保我们的验证在更新和创建时都有效 - 为了做到这一点，我们必须从新模型实例中提取 errors 属性，并将其传递回回调中。如果它通过了验证，它只是未定义的，我们的代码将忽略它。如果没有通过，todoErrors 将是一个验证错误数组。

现在我们已经完成了，让我们来处理控制器的 update 操作。

编辑更新操作以查找待办事项、更改状态并保存

继续再次打开控制器并找到“更新”操作，它应该如下所示：

this.update = function (req, resp, params) {
  // Save the resource, then display the item page
  this.redirect({controller: this.name, id: params.id});
};

您需要对其进行编辑，使其看起来像这样：

this.update = function (req, resp, params) {
  var self = this;
  geddy.model.adapter.Todo.load(params.id, function (err, todo) {
    todo.status = params.status;
    todo.title = params.title;
    todo.save(function (err, data) {
      if (err) {
        params.errors = err;
        self.transfer('edit');
      }
      else {
        self.redirect({controller: self.name});
      }
    });
  });
};

我们在这里所做的是加载请求的 todo，编辑它的一些属性，然后再次保存 todo。我们刚刚在模型适配器中编写的代码应该处理其余的事情。如果我们收到错误，则意味着新属性未通过验证，因此我们会将请求传输回 edit 操作。如果我们没有收到错误，我们将把请求重定向回 index 操作。

来吧，尝试一下。重新启动服务器，创建一个新的todo，点击它的编辑链接，将状态更改为done，并在index中看到它已更新。如果您想验证验证是否有效，请尝试将 title 更改为少于 5 个字符的内容。

现在让“删除”按钮发挥作用。

删除待办事项

现在我们已经有了一个待办事项列表应用程序，但是如果您开始使用它一段时间，那么在该索引页面上找到您要查找的 todo 项目将会变得很困难。让我们让“删除”按钮起作用，这样我们就可以保持列表简洁明了。

在模型适配器中创建删除方法

让我们再次打开模型适配器，这次我们要在其中添加 remove 方法。在 save 方法之后添加此内容：

this.remove = function(id, callback) {
  if (typeof callback != 'function') {
    callback = function(){};
  }
  for (var i in geddy.todos) {
    if (geddy.todos[i].id == id) {
      geddy.todos.splice(i, 1);
      return callback(null);
    }
  }
  return callback({message: "To Do not found"});
}

这个非常简单，它应该看起来很像 load 方法。它循环遍历 geddy.todos 中的所有 todo 以找到我们要查找的 id。然后，它将该项目从数组中拼接出来并调用回调。如果在数组中找不到它，则会调用回调并返回错误。

现在让我们在控制器中使用它。

编辑删除操作

再次打开控制器并执行 remove 操作。它应该看起来像这样：

this.remove = function (req, resp, params) {
  this.respond({params: params});
};

编辑它，使其看起来像这样：

this.remove = function (req, resp, params) {
  var self = this;
  geddy.model.adapter.Todo.remove(params.id, function(err){
    if (err) {
      params.errors = err;
      self.transfer('edit');
    }
    else {
      self.redirect({controller: self.name});
    }
  });
}

我们将从表单 post 中的参数中获取的 id 传递到我们刚刚创建的 remove 方法中。如果返回错误，我们将重定向回 edit 操作（我们假设表单发布了错误的信息）。如果我们没有收到错误，只需将请求发送到 index 操作。

就是这样！我们完成了。

您可以通过重新启动服务器，创建一个新的 todo 项目，单击它的链接，然后单击“删除”按钮来测试删除功能。如果您做得正确，您应该会返回索引页并删除该项目。

后续步骤

在下一个教程中，我们将使用 http://i.tv 很棒的 mongodb-wrapper 模块将 todo 持久保存到 MongoDB 中。有了 Geddy，这一切就会很容易；我们需要改变的只是模型适配器。

如果您有任何疑問，請在此處發表評論，或在 github 上提出問題。

以上是使用 Node.js 和 Geddy 建立任務管理器應用程式的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
上一篇：如何使用 FabricJS 禁用橢圓的居中旋轉？下一篇：如何使用 FabricJS 禁用橢圓的居中旋轉？

相關文章

看更多