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

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

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

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

// 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:\Users\Administrator\Desktop\todo-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:\Users\Administrator\Desktop\todo-app>meteor add session

Meteor ToDo App实例的更多相关文章

  1. Lumen开发:lumen源码解读之初始化(1)——app实例

    版权声明:本文为博主原创文章,未经博主允许不得转载. 有些注释来着原文的百度翻译,可以有些难理解或者奇怪,我后面会根据自己的理解做调整的哈!!!不喜勿喷,层主英语不过关... 先来看看入口文件publ ...

  2. 写一个TODO App学习Flutter本地存储工具Moor

    写一个TODO App学习Flutter本地存储工具Moor Flutter的数据库存储, 官方文档: https://flutter.dev/docs/cookbook/persistence/sq ...

  3. [转]使用Xcode 4发布App 实例操作

    使用xcode 4发布app 实例操作是本文介绍的内容,不多说,我们直接进入话题. 1.iOS Provisioning Portal 和iTunes Connect 没有变,下载与安装.mobile ...

  4. Swift 书面 ToDo App

    下面的代码是使用的全部Xcode Version 6.0.1 (6A317)书面. 因为当使用团队开发stroyboard在并购的诸多不便的时间,所有或使用.xib该文件准备ToDo App. 想要实 ...

  5. Flask之app实例的参数配置

    说是app实例的配置, 实际也就是flask程序的配置 Flask 是一个非常灵活且短小精干的web框架 , 那么灵活性从什么地方体现呢? 有一个神奇的东西叫 Flask配置 , 这个东西怎么用呢? ...

  6. 小程序中关于获取app实例与当前组件

    1.getApp()来获取 App 实例 2.getCurrentPages()获取前页面栈

  7. Android经典项目开发之天气APP实例分享

    原文:Android经典项目开发之天气APP实例分享 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/mzc186/article/details/5 ...

  8. react native 实现TODO APP

    前端有一个todo app非常适合入门练手 react-native 实现todo app:https://github.com/nwgdegitHub/TODO_RN.git

  9. .NET 跨平台应用开发动手教程 |用 Uno Platform 构建一个 Kanban-style Todo App

    作者:Steven Giesel 翻译:Alan Wang 校对:李卫涵 – 微软 MVP 排版:Rani Sun 有什么比参考包含分步说明和代码示例的动手教程更好的学习新技术的方式呢?当你完成或 f ...

随机推荐

  1. 版本号对比方案及参考代码(Objective-C,Java,JavaScript)

    常用版本号 如 2.0.1 与 2.0.2 相比  2.0.2是比2.0.1要新的 那么该如何对这个版本号进行对比 这里有一个比较简单的实现方案 2.0.1 这种格式可以拆分为多个部分 如这里的2是大 ...

  2. uva1336 Fixing the Great Wall

    用到了kase避免memset超时 #include<cstdio> #include<cstring> #include<cmath> #include<a ...

  3. iview modal 弹框 模板

    iview modal 弹框 模板 <!-- * @description 上传图片 * @fileName camera.vue * @author 彭成刚 * @date // :: * @ ...

  4. python基础一 day3 列表方法

    ls=['a','b','c','d','a','b','c','d']lst=['e','f','g','h']# 增加# ls.append('a') 将元素a添加至列表ls的尾部# ls.ext ...

  5. 把txt格式数据制作成xml数据

    txt格式数据: 代码: s1=""" <object> <name>{0}</name> <pose>Unspecifi ...

  6. GetForgroundWindow函数的不确定性——BUG笔记

    HWND GetForgoundWindows() 获取当前前置窗口在windows 7和windows 10下虚拟桌面切换后表现不同. 所以强烈不建议使用此函数!

  7. spoj-TSUM Triple Sums

    题目描述 题解: 很吊的容斥+$FFT$,但是并不难. 首先,由于有重复,我们要容斥. 怎么办? 记录三个多项式, 只取一个:$w1$; 相同物体拿两个:$w2$; 相同物体拿三个:$w3$; 然后答 ...

  8. float 和 clear

    float 特性1:可以为行内浮动元素设置宽高 <!DOCTYPE html> <html> <head> <meta charset="UTF-8 ...

  9. springMVC中处理静态资源的几种方案

    处理静态资源方案一:在web.xml文件中配置如下: <!-- <!–解决静态资源方案–> <servlet-mapping> <servlet-name>d ...

  10. oo的一些概念

    http://docs.kissyui.com/5.0/guides/base/oo.html JavaScript 语言自成体系,自有一套代码重用的模式,这些常见的代码重用模式可以在<Java ...