炫意html5
最早CSS3和HTML5移动技术网站之一

Meteor ToDo App实例

在本章中,我们将创建一个简单的待办事项应用程序。

第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
可以看到下面的图片所显示的应用程序结构 –

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:\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

以下是纠正/补充内容:

有4个地方要补充第一:运行 meteor add session 安装session第二:在client/todo-app.js的开始处添加如下内容:引入这些文件import ‘./todo-app.html’import ‘../collections/task-collection.js’import { Session } from ‘meteor/session’第三:在server/server.js的开始处添加如下内容:引入这些文件import ‘../collections/task-collection.js’第四:要修改package.json文件中的内容,将meteor部分的内容修改成如下:”meteor”: { “mainModule”: { “client”: “client/todo-app.js” “server”: “server/server.js” } “testModule”: “tests/main.js” }最后祝您顺利,运行meteor 启动项目  提交时间:2019-09-05

炫意HTML5 » Meteor ToDo App实例

Java基础教程Android基础教程