Meteor 初級入門 三

廢話先:

---

今天的廢話呢有些多，主要是我在學習Meteor中遇到的一些問題，待這些問題解決後咱們繼續Meteor 初級入門 三的敘述。

前幾天我就簡單的搞了一個用戶註冊的界面，這裏說明一下，Meteor中有accounts-ui這個package提供登陸註冊之類的服務，你只需在HTML中添加{{loginButtons}}就行。可是你總不能所有依賴這玩意吧。登陸界面很簡單了，username,email,password。可問題在我點擊log in按鈕時來了。個人打算就是以管理員的身份建立用戶，可當我建立用戶成功後，個人Meteor管理員帳戶盡然被server強制log out 了？what happened？

我看了一下source coder，裏面是這樣寫的:

   1:  Accounts.createUser = function (options, callback) {

   2:    options = _.clone(options); // we'll be modifying options

   3:   

   4:    if (!options.password)

   5:      throw new Error("Must set options.password");

   6:    var verifier = SRP.generateVerifier(options.password);

   7:    // strip old password, replacing with the verifier object

   8:    delete options.password;

   9:    options.srp = verifier;

  10:   

  11:    Accounts.callLoginMethod({

  12:      methodName: 'createUser',

  13:      methodArguments: [options],

  14:      userCallback: callback

  15:    });

  16:  };

其中第七行註冊的意思就是移除舊的password，以認證的對象代替。可這和個人管理員帳戶被強制下線沒有絲毫的關係啊，我們再來看看password_server.js中的source coder剛剛的是password_client.js中的source coder.:

   1:  Meteor.methods({createUser: function (options) {

   2:    // createUser() above does more checking.

   3:    check(options, Object);

   4:    options.generateLoginToken = true;

   5:    if (Accounts._options.forbidClientAccountCreation)

   6:      throw new Meteor.Error(403, "Signups forbidden");

   7:   

   8:    // Create user. result contains id and token.

   9:    var result = createUser(options);

  10:    // safety belt. createUser is supposed to throw on error. send 500 error

  11:    // instead of sending a verification email with empty userid.

  12:    if (!result.id)

  13:      throw new Error("createUser failed to insert new user");

  14:   

  15:    // If `Accounts._options.sendVerificationEmail` is set, register

  16:    // a token to verify the user's primary email, and send it to

  17:    // that address.

  18:    if (options.email && Accounts._options.sendVerificationEmail)

  19:      Accounts.sendVerificationEmail(result.id, options.email);

  20:   

  21:    // client gets logged in as the new user afterwards.

  22:    this.setUserId(result.id);

  23:    Accounts._setLoginToken(this.connection.id, result.token);

  24:    return result;

  25:  }});

咱們看21-24行的codes，看到21行的註釋，是否是知道了緣由了？他那句話的意思就是，當用戶註冊後，立馬以剛剛註冊的用戶id做爲立刻要登陸的id，

22行就是這樣設置了，這樣作有一個好處，就是省時！

嗯，好了，問題闡述了，緣由也找到了，咱們是否是總結下爲何會出現這個問題以及如何去解決它？

爲何會出現這種問題：

錯！仍是錯在我啊！我試圖用客戶端的帳戶來管理如何分派想要執行的任務，然而Meteor的accounts-password package是用來讓新用戶註冊，而且爲他們立馬登陸的。

如何解決這樣的問題：

首先呢，咱們必須牢記，在Meteor中一樣的方法運行在客戶端和服務端的效果是不一樣的！其次，解決這個問題的辦法就是：將建立用戶的method寫在server端，而且能被你客戶端的管理員模塊可以調用！

 

下面咱們開始今天的主要內容

---

在上一篇的博文 ，咱們將MongoDB中的數據呈如今網頁中，咱們能夠對這個project進一步的作得更好！

在上面的基礎之上，咱們對這個project添加用戶的管理。

具體的思路：

每一個用戶只能看到本身在CloudTel中的添加的電話號碼，或者是我的的隱私之類的信息，而別人沒有權利去看。也就是一個用戶對應一個只屬於本身的保存空間。那麼咱們如何實現這樣一個功能呢？

首先咱們如今HTML中添加這段代碼：

添加這段代碼的前提呢，就你要在這個project中添加一個package：accounts-ui;

具體的添加方法就是先暫停你這個運行的項目(CTRL+C);以後鍵入：meteor add accounts-ui、meteor add accounts-base、meteor add accounts-password和meteor add email

咱們在考慮accounts的同時也應當考慮security緊接着咱們應當還要移除insecure具體的就是 meteor remove insecure

上面這部作完後，還有一步也是很是的重要的，這一步像咱們在ASP.NET中的config；

當你完成了如上的操做後再次運行。你會在網頁上看到：

點擊以後呢咱們能夠看到這樣的ui：

好了，當你完成了上面的操做，下面幾項操做，你就再也不須要管理了,你能夠集中精力去實現你的業務。

1.用戶登陸管理

2.用戶註冊管理

3.若是用戶忘記郵箱以後的操做

4.用戶在線狀態的管理

5.MongoDB的管理

我先以上的四個步驟，若是咱們去作的話，再加上界面的設計，沒有一個鐘頭是拿不下的吧！

恩，到如今咱們有了用戶管理的這個工具，那麼咱們得把它用在更加須要的地方。

上面的這段代碼，是server端的代碼。若是讀者一直在看本系列，也許經過之前的比較能夠發現，這段代碼中比之前多了({owner:this.userId},{…}).也就是這個owner的添加讓咱們對用戶帳戶的管理變得更加的輕鬆了。

那麼有了server端，咱們的client端若是執行諸如update，insert之類的操做那怎麼辦呢？我想聰明的你必定想到了。

或許讀者已經在《Meteor 初級入門二》中已經發現了。

 

其實這個也就是多加一句owner：Meteor.userId();

恩？等等，爲何這裏咱們不用this.userId呢？我在meteor的官方文檔中看到的也是能夠用this.userId;來獲取目前的用戶，我可我試了好多遍，都試不通，我也很納悶，我用console.log(this.userId);來查看頁沒有結果。最後我在官方文檔中繼續查閱。看到了Meteor.userId();我就用它在client端試了一下，okay。經過。具體的什麼緣由，如今的我暫時也沒有搞清楚，文檔也是English的，因此也有些晦澀難懂。可無論怎麼樣，如今程序調試經過了就好，這就是咱們的目的。

恩，到了如今咱們將最基本的一個用戶對應一個view的管理已經完成了。若是讀者正確操做的話，這是你應該成功的看到以下的界面：

讀者在這裏可能看到個人註冊名爲DzhangAdmin。顧名思義就是我是這個project的最終的管理員，我又最高的權利去管理每一個使用這個project的用戶的行爲，那麼咱們怎麼樣去實現這樣一個管理的功能呢？

首先咱們應該看Meteor的官方文檔，裏面提供瞭解決這個問題的API，具體的介紹，我在這邊就再也不說了。請看下面這段代碼（此時請忽略lists.allow({})）的右半邊代碼，稍後將會解答：

上面的這段代碼也就是容許管理員對這個project的管理，固然在《Getting Started with Meteor.js javascript Framework》這本書中是這麼說的。我我的在學習這個項目的這一步的時候，以爲，這樣作很差，爲何呢？你這個project是對用戶而開發的，而不只是一我的。那是的我帶着這樣的疑問往下看了下去。恩，那麼如今書中所闡述的實現就是我在上圖貼出的lists.allow({});的右半邊的代碼，這樣只要有人註冊就會有對數據操做的權限了。

 

好了到了如今咱們的這個project的已經快要結束了，還有一步也是相當重要的。請接着往下看吧。

packaging and Deploying.

---

其實在Meteor中呢，有不少的third-party packages。其實說到這裏不得不提下Node.js了，在之前javascript並無什麼包管理，模塊之類的規範，所以javascript也被不少程序員抱怨。不久commonJS就來規範javascript。要求其獲得相應的規範。畢竟Meteor是基於Node.js而開發的因此少不了包，模塊之類的。固然讀者如今沒有看到。等下我將闡述。

咱們能夠經過如下的命令查看在如今讀者的電腦裏有哪些能夠獲取到的包：Meteor list。在執行上面的命令後你將會看到一串包名呈如今CMD窗口中。

在Meteor 初級入門 二中咱們在網上下了關於Bootstrap。如今咱們能夠不要它了，讀者如今能夠刪除你添加進來的Bootstrap的兩個文件。爲何這樣作。由於meteor有自帶的bootstrap。可是可能版本不同。讀者執行下面的指令：Meteor add bootstrap.添加成功後會後提示。

若是你想更新你的meteor的包，能夠在命令行中鍵入：Meteor update;

好了，如今咱們能夠打包咱們的這個項目了。

當你確保你這個project都已經完成後將目錄定位到你這個項目的根目錄。執行Meteor bundle CloudTel.tgz

稍等片刻後讀者會在其根目錄中看到一個已經打包好的壓縮文件。

恩，到了如今咱們就能夠發佈了。(注意：此時仍是保持在你打包的根目錄下面)

執行meteor deploy yourAppName.meteor.com

過了一會後讀者就能夠看到 Now Servering at yourAppName.meteor.com這樣的成功提示。緊接着讀者就能夠在 yourAppName.meteor.com這個域名裏看到本身發佈的這個項目了。由於我不是發佈的這個項目，因此這裏我就不在截圖了。基本的和你作的項目運行在電腦上的同樣，只不過地址欄裏不是localhost:xxxx。

如今說說爲何Meteor基於Node.js開發的具體「蛛絲馬跡」。如今讀者能夠解壓剛剛打包的壓縮包。裏面的內容我就再也不貼圖了。裏面的基本上都符合Node.js的應用開發的規範。

恩，到了如今咱這個meteor這個項目已經作完了。若是您還有什麼疑問歡迎email，具體的郵件個人博客的左上方有。只要有問題我一一回答。

這個項目的源代碼我已經在百度雲盤上共享：點擊。有疑問的能夠看一下。

同時我也作了一個相似於微博的小應用。若是您這個CloudTel的項目已經掌握，能夠看看我那微博的小應用。獲取代碼點擊這：點擊；

同時你們可點擊 http://dzhangblog.meteor.com

進行訪問。        

聲明：

---

本系列也是本人在學習過程當中的記錄，與其藏在腦子裏，不如寫出來與你們分享，同時也爲剛剛學習Meteor的同窗們一個好的開始，而不是讀蛋疼的Meteor的英文Docs，也爲剛剛學習Meteor的同窗們省去了不少時間。此外，就目前而言國內關於Meteor的中文文檔甚少！此係列，也是本人閱讀《Getting Started with Meteor.js JavaScript Framework》以後將此書的小項目拿出來做爲本入門系列的project。特此聲明！