2023使用 Node.js 和 Geddy 构建任务管理器应用程序

在这个由三部分组成的教程中，我们将深入研究如何使用 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)，并将浏览器指向 http://localhost:4000/todos。您应该看到类似这样的内容

继续尝试其他 GET 路由：

• http://localhost:4000/todos/something
• http://localhost:4000/todos/add
• http://localhost:4000/todos/something/edit

一切都好吗？好的，我们继续。

创建 Todo 模型

在 Geddy（以及大多数其他 MVC 框架）中，您可以使用模型来定义应用程序将使用的数据类型。我们刚刚为 todos 生成了一个模型，所以让我们看看它给了我们什么：

var Todo = function () {
  // Some commented out code
};

// Some more commented out code

Todo = geddy.model.register('Todo', Todo);

Geddy 中的模型非常简单。我们只是为 todos 创建一个新的构造函数，并将其注册为 geddy 中的模型。让我们为 todos 定义一些属性。删除所有注释掉的代码并将其添加到构造函数中：

var Todo = function () {
  this.defineProperties({
    title: {type: 'string', required: true}
  , id: {type: 'string', required: true}
  , status: {type: 'string', required: true}
  });
};

我们的 todos 将有一个标题、一个 id 和一个状态，这三个都是必需的。现在让我们为 todos 设置一些验证。

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';
  });

};

我们正在验证标题是否存在，标题的最小长度为 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 和状态的默认值。< /p>

然后我们调用在模型适配器上创建的 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>

我们不需要

<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);
}

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

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

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

<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>
  <% } %>
<% } %>

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);
};

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});
  });
};

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

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);
}

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});
      }
    });
  });
};

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"});
}

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});
    }
  });
}