Meteor初級入門一

時間 2019-11-12

標籤 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}})

再次運行，剛剛咱們插入的數據就會顯示到瀏覽器當中了。

恩，今天我就先說這麼多吧。在下一篇博文中讓咱們更進一步的完善這個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。特此聲明！