Meteor ToDo App實例

時間 2019-12-20

標籤 meteor todo app 實例简体版

原文原文鏈接

在本章中，咱們將建立一個簡單的待辦事項應用程序。

第1步 - 建立應用程序

打開命令提示符，運行如下命令 -

C:\Users\Administrator\Desktop>meteor create todo-app

建立成功後生成目錄結構以下所示(看網絡狀況，可能須要好幾分鐘才能完成)：
css

要查看應用程序，須要運行的命令 meteor 應用程序，而後在瀏覽器中打開URL：http://localhost:3000 html

C:\Users\Administrator\Desktop\todo-app>meteor

第2步 - 建立文件夾和文件

取而代之默認的文件結構，咱們將重構它。讓咱們建立 client 文件夾，並建立 todo-app.html, todo-app.css和todo-app.js。數據庫

建立項目時程序自動建立了 client 和 server 這兩個目錄，這裏咱們先要把 client 和 server 這兩個目錄中的文件內容清空，接着再建立如下所需的文件，執行以下命令：瀏覽器

C:\Users\Administrator\Desktop\todo-app\client>touch todo-app.html

C:\Users\Administrator\Desktop\todo-app\client>touch todo-app.js

咱們還將在 server 文件夾裏建立 server.js(原來有則無需再建立)。

C:\Users\Administrator\Desktop\todo-app\server>touch server.js

最後，讓咱們建立 collections 一個和一個 task-collection.js 文件夾裏面。

C:\Users\Administrator\Desktop\todo-app>mkdir server

C:\Users\Administrator\Desktop\todo-app\collections>touch task-collection.js

能夠看到下面的圖片所顯示的應用程序結構 -

步驟 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文件。該文件也能夠被重構，但咱們會在這裏編寫全部的客戶端代碼。首先，咱們訂閱在服務器上發佈的任務集合。而後，咱們在建立助手可以處理應用程序邏輯，最後咱們定義調用來自服務器的方法事件。 session

// 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。 app

C:\Users\Administrator\Desktop\todo-app>meteor deploy my-first-todo-app

咱們能夠打開 http://my-first-todo-app.meteor.com/ 開始使用咱們的應用程序(可能須要使用到 Meteor 開發者賬號)。

或直接打 http://localhost:3000/ 訪問，以下結果：

出錯：

一、Exception in template helper: ReferenceError: Session is not defined ...

解決方法 - 執行如下命令添加插件：

C:\Users\Administrator\Desktop\todo-app>meteor add session

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。