Meteor初级入门一

废话先：

我自己也是一次偶然的机会在CSDN上面看到了Web开发的前端技术(这句话对我而言吧)Meteor，之后Google了解关于Meteor的信息。网上面关于Meteor的资料很少，有的也是英文版本的，少数中文版的也是English->Chinese。之所以自己抽出时间学这个，因为我看到了Meteor开发Web的好处，具体的请看正文部分的阐述。当然了Meteor是基于Node.js应用开发的。关于Node，我个人感觉也是一个神奇的东西，让我感到amazing！

Meteor背景：

1.Meteor 是一个新的 Web 应用程序开发平台，正在国际上得到广泛采用。Meteor 不仅仅是一个 JavaScript 编码框架，它还提供了一种创新方式来构建可伸缩、交互式的富 Web 应用程序。通过简化编码模型和减少开发人员必须编写的代码量，Meteor 具有加速开发周期的潜力。使用 Meteor，经验丰富的 Web 应用程序架构师和开发人员只需花费几天或几星期的时间，就可以完成从概念到全面部署的整个过程，而不像平常一样需要几个月或更长的时间。

2.Meteor 默认使用的模板引擎是Handlebars，当然了你也可以使用其他的模板引擎；

3.Meteor目前使用的是MongoDB。现在不支持其他的数据库，我个人觉得MongoDB是一款很不错的NoSql。尽管我不是学数据库的。用了你就知道！：）

Meteor –> Let‘s Begin！

关于Meteor的安装呢，本篇就不再多说。我在这里要说的是：在Meteor安装目录/mongodb/bin下有mongod & mongo的.exe文件，这也就表示在平时调试程序时，不需要额外下载MongoDB 这个Document-Oriented Storage数据库，当然了，如果你需要学习MongoDB我建议还是下载，毕竟这也不是个麻烦的事。如何安装本篇就不再介绍。官网上面有，这里的我要补充的就是：安装64位的，这样的话对内存的使用没有什么限制。

1.快速创建一个程序，Hello World。在你的为Meteor而建立的目录下创建项目，这样的话方面管理，我这边使用的是F:/MeteorSpace/.所以在一下的篇幅里我就用我的目录作为工作目录了。

打开你的CMD窗口：

   1:  meteor create firstDemo

之后键入：

   1:  cd FirstDemo

最后：

   1:  meteor

最后你打开浏览器，将会在localhost:3000看到你创建的程序。这里说明几个小问题，在最后一步键入meteor时，它是默认的3000端口，如果你运行几个meteor程序，你可以这样写：meteor run –-port here is your define port。我就这样，因为要学这门技术你必须学会看它的API文档。

下面呢，我们在来看一个列子，也是meteor提供的一个好的范例。这个范例并不像Hello World这门简单了。

在CMD中依次键入以下命令，步骤和上面的差不多：

   1:  meteor create --example todos

   2:  cd todos

   3:  meteor

效果如图：

最后我们将看到这样的画面：

下面我要说一说meteor神奇的地方，读者不妨再打开一个浏览器，两个浏览器大小调一下，保证你看到两个浏览器显示的主要内容，神奇的时刻到了，读者你在其中一个浏览器中添加一天新的记录，另一个浏览器也会随之而变，几乎几乎是瞬时的。这也是meteor强大的地方！那么这个功能使你想到了什么呢？

关于Meteor的project的编写，我使用的是sublime 2这也是一款强大的文本编辑器，收费，但是网上有key。

最后再这个todos中在补充一句：在你编写其项目的.HTML or .js or .css 后保存。meteor实现了 page automatically refresh也就是页面的自动刷新，当有错误时，CMD窗口会有提示。

以上呢就是带着读者了解下meteor，下面我会给读者一个具体的Project，如果是刚刚学习meteor的话，请跟着楼主一步步做出这个project。如果你是meteor开发的高手大牛的话，还请多提宝贵意见，您的建议和意见是我认清自己的动力！

Let’s create CloudTel project:

CDM键入的指令【步骤】和上面的一样。

   1:  meteor create CloudTel

   2:  cd CloudTel

   3:  meteor

接着在文本编辑器里把Hello World 改为 CloudTel保存，之后页面自动刷新！

是个应用程序，咱总得有数据库的支持吧，好，我们现在就做。在我们的CloudTel.js中更改成如下第一行代码：

   1:  lists = new Meteor.Collection("Lists");

   2:  if(Meteor.isClient){

   3:  ...

这也就是声明了一个Collection，这个集合当然是到MongoDB中去了，在这里我们声明了lists集合，Meteor的Client和Server都运行到。

我们怎么发现有没有存到MongoDB中呢？首先保持你的程序还在运行，打开你运行程序的浏览器，这里我是用的谷歌的Chrome，按下F12，之后点击Console。在控制台中输入lists，是不是返回结果了？恩，这就说明我们声明的这个Collection已经在MongoDB中了！

我们还在这Chrome的控制台里想MongoDB里插入几条数据吧。键入：

   1: lists.insert({Category:"Friends",items:{Name:"David Zhang",owner:"me",LentTo:"13148783467"}});

   1: lists.insert({Category:"Family",items:{Name:"Dad",owner:"me",LentTo:"13673457893"}});

控制台会返回保存的信息，之后我们再键入：

   1:  lists.find({}).count();

正确按照上面的步骤走的话会显示 2；也就说明数据库里面存在了我们刚刚插入的两条记录；

但是我们怎么在这HTML上显示呢？

我们接着往下看，修改HTML文件中的代码变成如下：

   1:  <body>

   2:  {{>hello}}

   3:  <div id="lendlib">

   4:          <div id="categories-container">

   5:                {{>categories}}

   6:            </div>

   7:  </body>

与之对应的也就是：

<template name="categories">

   <div class="title">My CloudTel</div>

   <div id = "categories">

       {{#each lists}}

       <div class="category">

          {{Category}}

        </div>

        {{/each}}

    </div>

</template>

好了，当我们保存以上代码后，浏览器自动刷新，嗯？怎么回事？页面怎么没有什么变化，代码问题？no，no，我们还少了一段代码。

Template.categories.lists = function(){

      return lists.find({},{sort:{Categoty:1}})

再次运行，刚刚我们插入的数据就会显示到浏览器当中了。

恩，今天我就先说这么多吧。在下一篇博文中让我们更进一步的完善这个project。

我写完这篇博文的时间是：2014年1月31号凌晨0:30了！再次祝大家Happy new Year!

Good Night！

声明：

本人也是学习Meteor不久，本系列也是本人在学习过程中的记录，与其藏在脑子里，不如写出来与大家分享，同时也为刚刚学习Meteor的同学们一个好的开始，而不是读蛋疼的Meteor的英文Docs，也为刚刚学习Meteor的同学们省去了很多时间。此外，就目前而言国内关于Meteor的中文文档甚少！此系列，也是本人阅读《Getting Started with Meteor.js JavaScript Framework》之后将此书的小项目拿出来作为本入门系列的project。特此声明！

Meteor初级入门 一

Meteor初级入门一