• Meteor ToDo App实例


      在本章中,我们将创建一个简单的待办事项应用程序。
    第1步 - 创建应用程序
    打开命令提示符,运行以下命令 -
    C:UsersAdministratorDesktop>meteor create todo-app 

    创建成功后生成目录结构如下所示(看网络情况,可能需要好几分钟才能完成):

    要查看应用程序,需要运行的命令 meteor 应用程序,然后在浏览器中打开URL:http://localhost:3000

    C:UsersAdministratorDesktop	odo-app>meteor
    
    第2步 - 创建文件夹和文件

    取而代之默认的文件结构,我们将重构它。让我们创建 client 文件夹,并创建 todo-app.html, todo-app.css和todo-app.js。

    创建项目时程序自动创建了 client 和 server 这两个目录,这里我们先要把 client 和 server 这两个目录中的文件内容清空,接着再创建以下所需的文件,执行如下命令:

    C:UsersAdministratorDesktop	odo-appclient>touch todo-app.html
    
    C:UsersAdministratorDesktop	odo-appclient>touch todo-app.js
    
    我们还将在 server 文件夹里创建 server.js(原来有则无需再创建)。
    C:UsersAdministratorDesktop	odo-appserver>touch server.js
    
    最后,让我们创建 collections 一个和一个 task-collection.js 文件夹里面。
    C:UsersAdministratorDesktop	odo-app>mkdir server
    
    C:UsersAdministratorDesktop	odo-appcollections>touch task-collection.js
    
    可以看到下面的图片所显示的应用程序结构 -
    Meteor Todo App Structure

    步骤 3 - client/todo-app.html

    我们开发的第一个开发步骤是为应用程序创建HTML。我们需要输入字段,来添加新的任务。任务将有删除和检查功能列表的形式。我们也将显示或隐藏已完成的任务的功能。

    <head>
       <title>Todo App</title>
    </head>
    
    <body>
       <h1>Todo List ({{incompleteCount}})</h1>
    
       <label class = "hide-completed">
          <input type = "checkbox" checked = "{{hideCompleted}}" />
          Hide Completed Tasks
       </label>
    
       <form class = "new-task">
          <input type = "text" name = "text" placeholder = "Add new tasks" />
       </form>
    
       <ul>
          {{#each tasks}}
             {{> task}}
          {{/each}}
       </ul>
    	
    </body>
    
    <template name = "task">
       <li class = "{{#if checked}}checked{{/if}}">
          <button class = "delete">x</button>
          <input type = "checkbox" checked = "{{checked}}" class = "toggle-checked" />
          <span>{{username}} - {{text}}</span>
       </li>
    </template>
    

    步骤4 - collections/task-collection.js

    在这里,我们只是创建新的 MongoDB 集合,所以我们可以在服务器和客户端使用它。
    Tasks = new Mongo.Collection("tasks");
    

    步骤5 - server/server.js

    我们将在服务器端定义应用程序的方法。这些方法将来自客户端的调用。在这个文件中,我们还将发布数据库查询功能。

    //Publishing tasks from the server...
    Meteor.publish("tasks", function () {
       return Tasks.find({});
    });
    
    //Methods for handling MongoDb Tasks collection data...
    Meteor.methods({
       addTask: function (text) {
          Tasks.insert({
             text: text,
             createdAt: new Date(),
          });
       },
    	
       deleteTask: function (taskId) {
          var task = Tasks.findOne(taskId);
          Tasks.remove(taskId);
       },
    	
       setChecked: function (taskId, setChecked) {
          var task = Tasks.findOne(taskId);
          Tasks.update(taskId, { $set: { checked: setChecked} });
       }
    });
    

    步骤 6 - client/todo-app.js

    这是主要的客户端JavaScript文件。该文件也可以被重构,但我们会在这里编写所有的客户端代码。首先,我们订阅在服务器上发布的任务集合。然后,我们在创建助手能够处理应用程序逻辑,最后我们定义调用来自服务器的方法事件。

    // Subscribing to the published tasks
    Meteor.subscribe("tasks");
    
    // Show/Hide functionality
    Template.body.helpers({
       tasks: function () {
          if (Session.get("hideCompleted")) {
             // If hide completed is checked, filter tasks
             return Tasks.find({checked: {$ne: true}}, {sort: {createdAt: -1}});
          } else {
             // Otherwise, return all of the tasks
             return Tasks.find({}, {sort: {createdAt: -1}});
          }
       },
    	
       hideCompleted: function () {
          return Session.get("hideCompleted");
       },
    	
       incompleteCount: function () {
          return Tasks.find({checked: {$ne: true}}).count();
       }
    	
    });
    
    // Events for creating new tasks and Show/Hide functionality. Calling methods from the server
    
    Template.body.events({
       "submit .new-task": function (event) {
          event.preventDefault();
          var text = event.target.text.value;
    		
          Meteor.call("addTask", text);
          event.target.text.value = "";
       },
    	
       "change .hide-completed input": function (event) {
          Session.set("hideCompleted", event.target.checked);
       }
    	
    });
    
    // Events for Deleting and Check/Uncheck functionality
    Template.task.events({
       "click .toggle-checked": function () {
          // Set the checked property to the opposite of its current value
          Meteor.call("setChecked", this._id, ! this.checked);
       },
    	
       "click .delete": function () {
          Meteor.call("deleteTask", this._id);
       }
    	
    });
    
    第7步 - 部署

    我们正在开发完成后,我们可以在命令提示符窗口中部署应用程序。应用程序的部署名称是 my-first-todo-app。

    C:UsersAdministratorDesktop	odo-app>meteor deploy my-first-todo-app
    
    我们可以打开 http://my-first-todo-app.meteor.com/ 开始使用我们的应用程序(可能需要使用到 Meteor 开发者帐号)。
    或直接打 http://localhost:3000/ 访问,如下结果:
    出错:
    1、Exception in template helper: ReferenceError: Session is not defined ...

    解决方法 - 执行以下命令添加插件:
    C:UsersAdministratorDesktop	odo-app>meteor add session
  • 相关阅读:
    Poj 3318 Matrix Multiplication( 矩阵压缩)
    Altium Designer PCB的时候 高亮显示引脚连线
    历次PCB板修改意见汇总
    贴片电阻有哪几类封装尺寸?
    AD10中创建材料清单(BOM表)
    深度优先搜索(2)
    AD中测量两点之间的距离
    AD中的library中有些文件的后缀有.intlib .schlib .pcblib 这些都是库文件,但有什么区别呢?
    1.TwoSum
    深度优先搜索
  • 原文地址:https://www.cnblogs.com/h2zZhou/p/7390112.html
Copyright © 2020-2023  润新知