Meteor为您提供了一个快速的开发工作流程，该工作流程将创建可“正常工作”的同构Web应用程序。 流星架构真正美丽，因为它可以立即更新连接到您应用程序的所有客户端。 这对于创建响应式Web应用程序具有巨大的意义。
安装流星
流星的构建考虑了易用性，值得庆幸的是，这一理念从一开始就贯彻始终。
安装就像在Linux / Mac OS X系统上运行以下命令一样简单：
curl https://install.meteor.com/ | shWindows用户可以下载官方安装程序 。
创建您的应用
这是通过meteor工具在命令行完成的。 要在您的主目录中创建一个名为my_meteor_app的新应用，请执行以下操作：
$ meteor create ~/my_meteor_app
$ cd ~/my_meteor_app
$ meteor现在，您将能够通过https：// localhost：3000访问流星应用程序-端口3000是默认端口。
档案结构
默认情况下，您将创建以下文件：
~/my_meteor_app:
├── my_meteor_app.css
├── my_meteor_app.html
└── my_meteor_app.js my_meteor_app.html文件包含显示页面所需的标记-流星使用车把大括号样式的语法。 HTML文件中的所有代码都是使用Meteor的Spacebars编译器进行编译的。 空格键使用由{{#each}}和{{#if}}类的双花括号包围的语句，使您可以向视图中添加逻辑和数据。
您可以通过定义帮助程序将数据从JavaScript代码传递到模板中，并使用{{#each items}}来迭代数组。
my_meteor_app.js文件包含启动客户端所需JavaScript和服务器。 可以在此文件中指定客户机或指令的任何事件。
css文件用于样式化您的应用程序，默认情况下为空白。
HTML文件如何工作
Meteor解析您的应用文件夹中的所有HTML文件，并标识三个顶级标签： <head> ， <body>和<template> 。
就像在常规HTML文件中一样，任何<head>标记内的所有内容都添加到发送给客户端HTML的head部分，而<body>标记内的所有内容都添加到body部分。
<template>标记内的所有内容都被编译成Meteor模板，可以将其包含在HTML中并带有{{> templateName}}或在JavaScript中使用Template.templateName引用。
一个有效的例子
用以下内容替换默认HTML：
My Todo List
My Todo List
Built Using Meteor Framework!
-
{{#each tasks}}
{{> task}}
{{/each}}
- {{文本}}
在这里，我们指定template和{{#each}}循环以创建项目符号列表。 通过添加到my_meteor_app.js来完成示例：
if (Meteor.isClient) {
// Code here only runs on the client
// Assign some tasks to populate your data
Template.body.helpers({
tasks: [
{ text: "Plant cucumbers in fresh manure" },
{ text: "Move avocados to larger pots" },
{ text: "Go Fishing with Ben" },
{ text: "Take the wife to yoga" },
{ text: "Cancel tv subscription" }
]
});
}在浏览器中查看完成的结果。 现在，我们可以通过使用MongoDB集合实现持久性数据来进一步发展。
使用MongoDB的持久数据
流星使处理数据变得容易。 对于集合，数据可以在代码的任何部分使用，因为客户端和服务器都可以访问它们。 这使得编写一些视图逻辑并使页面自动更新变得非常容易。
在Meteor中，任何链接到数据集合的视图组件都将自动显示对数据的最新更改，因此它是实时的。
更改my_meteor_app.js文件以通过以下方式使用MongoDB：
Tasks = new Mongo.Collection("tasks");
if (Meteor.isClient) {
// This code only runs on the client
Template.body.helpers({
tasks: function () {
return Tasks.find({});
}
});
} 行Tasks = new Mongo.Collection("tasks"); 告诉Meteor建立一个名为tasks的MongoDB集合。 在Meteor中，这样做的结果是在客户端上它创建了到服务器集合的缓存连接。
要插入数据，我们可以使用服务器控制台。 要从新的终端窗口启动它，请在应用程序的目录中cd并运行（必须在流星在单独的选项卡中运行时完成此操作）：
$ meteor mongo现在，在应用程序的Mongo DB的控制台内，添加一条记录，其中：
db.tasks.insert({ text: "New task from mongo!", createdAt: new Date() });现在，在浏览器内部看一下更新。 打开开发人员工具，然后在控制台中运行以下命令：
Tasks.insert({ text: "straight to mongo from console", createdAt: new Date() });您的列表现在将在屏幕上动态更新。 在桌面上的新实例中打开一个单独的浏览器窗口。 在控制台中运行另一个插入。
您将看到两个实例都实时更新，而无需刷新页面。 想象一下现在更新数据库和Meteor更新所有客户端的含义。
这就是为什么Meteor易于创建真正的反应式应用程序体验的原因。 用户将能够在浏览器中实时查看数据更新。
流星包
流星项目具有isobuild软件包的公共软件包服务器。 这使您只需通过meteor add <package name>语法安装软件包，即可快速将功能添加到您的Meteor应用程序。
添加npm软件包
流星还可以通过meteor add <package name>语法添加npm包。 让我们在前面的示例中使显示效果更好一些，方法是添加moments包以简化日期格式。
$ meteor add momentjs:moment现在，您的应用程序中有可用的时间，您可以使用它。 您不需要做任何事情，包括自己在内。
像这样编辑模板HTML：
My Todo List
My Todo List
{{> todo}}
-
{{#each tasks}}
- {{text}} {{createdAt}}
-
{{/each}}
现在，我们在my_meteor_app.js文件中更新我们的辅助函数：
Tasks = new Mongo.Collection("tasks");
if (Meteor.isClient) {
// This code only runs on the client
Template.todo.helpers({
tasks: function () {
return Tasks.find({});
},
createdAt: function () {
return moment(this.createdAt).fromNow();
}
});
} 切换到浏览器窗口，只要在终端上仍运行meteor命令，您将看到更新的列表，其中包含提供时间测量的时间。 真好！
OAuth
现在，向您的应用添加OAuth身份验证非常简单。 只需通过以下命令添加两个软件包即可实现：
$ meteor add accounts-google
$ meteor add accounts-ui 将这些软件包添加到您的应用程序之后，您只需将{{> loginButtons}}内置模板添加到my_meteor_app.html文件中即可。 在浏览器中重新加载时，您会看到一个用于配置Google登录功能的按钮。 按照提供的步骤操作，您就可以准备就绪-就是这么简单。
结论
Meteor是一个奇妙的框架，正越来越受到人们的欢迎，并且由于软件包的简单设计和实现，我相信很容易理解为什么。 当工具箱中装有Meteor时，一周之内就可以对应用进行快速原型制作就没什么了。
如果您想了解有关Meteor的更多信息，请继续在线阅读其出色的文档 。
翻译自: https://code.tutsplus.com/tutorials/rapid-web-application-development-with-meteor--cms-25130
931
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
