Meteor初级入门 一
废话先：css
我本身也是一次偶然的机会在CSDN上面看到了Web开发的前端技术(这句话对我而言吧)Meteor，以后Google了解关于Meteor的信息。网上面关于Meteor的资料不多，有的也是英文版本的，少数中文版的也是English->Chinese。之因此本身抽出时间学这个，由于我看到了Meteor开发Web的好处，具体的请看正文部分的阐述。固然了Meteor是基于Node.js应用开发的。关于Node，我我的感受也是一个神奇的东西，让我感到amazing！html
Meteor背景：前端
1.Meteor 是一个新的 Web 应用程序开发平台，正在国际上获得普遍采用。Meteor 不只仅是一个 JavaScript 编码框架，它还提供了一种创新方式来构建可伸缩、交互式的富 Web 应用程序。经过简化编码模型和减小开发人员必须编写的代码量，Meteor 具备加速开发周期的潜力。使用 Meteor，经验丰富的 Web 应用程序架构师和开发人员只需花费几天或几星期的时间，就能够完成从概念到全面部署的整个过程，而不像日常同样须要几个月或更长的时间。mongodb
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位的，这样的话对内存的使用没有什么限制。app
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}})
}
本人也是学习Meteor不久，本系列也是本人在学习过程当中的记录，与其藏在脑子里，不如写出来与你们分享，同时也为刚刚学习Meteor的同窗们一个好的开始，而不是读蛋疼的Meteor的英文Docs，也为刚刚学习Meteor的同窗们省去了不少时间。此外，就目前而言国内关于Meteor的中文文档甚少！此系列，也是本人阅读《Getting Started with Meteor.js JavaScript Framework》以后将此书的小项目拿出来做为本入门系列的project。特此声明！
- 1. Meteor 初级入门 三
- 2. Meteor入门介绍
- 3. Vue初级入门(一)
- 4. MongoDB初级入门（一）
- 5. MySql初级入门
- 6. 初级React入门
- 7. parallax初级入门
- 8. Jeecg 初级入门
- 9. markdown初级入门
- 10. Linux初级入门（第一次做业）
- 更多相关文章...
- • Memcached入门教程 - NoSQL教程
- • Hibernate的一级缓存 - Hibernate教程
- • YAML 入门教程
- • Java Agent入门实战（一）-Instrumentation介绍与使用
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. Meteor 初级入门 三
- 2. Meteor入门介绍
- 3. Vue初级入门(一)
- 4. MongoDB初级入门（一）
- 5. MySql初级入门
- 6. 初级React入门
- 7. parallax初级入门
- 8. Jeecg 初级入门
- 9. markdown初级入门
- 10. Linux初级入门（第一次做业）