翻譯 Meteor React 制作 Todos - 09 - 添加用戶賬戶

levius 發布于2019-08-21 10:43 / 3106人閱讀

摘要：為了開啟這套賬戶系統和界面，我們需要去添加相關的包。使用，而不是在文件加入開始這段代碼只會在客戶端執行加入結束添加用戶關聯功能現在你已經可以創建賬戶并登錄你的應用程序了。例如包含了已登陸用戶的用戶名。

添加多用戶賬戶

Meteor帶來了一套賬戶系統然后順便還帶了用戶界面來讓你可以在幾分鐘之內在你的應用中添加多用戶功能

目前，這套UI組件使用Blaze作為默認的UI引擎，在未來，可能會以React的專有組件來將其替換。

為了開啟這套賬戶系統和UI界面，我們需要去添加相關的包。在你的應用目錄中，執行下面的命令：

meteor add accounts-ui accounts-password

用React來包裝一個Blaze組件

為了從accounts-ui這個包中使用Blaze UI組件，我們需要用React的組件來把他包裝一下。
來創建一個叫AccountsUIWrapper的新組件吧。

// 新文件 AccountsUIWrapper

AccountsUIWrapper = React.createClass({
  componentDidMount() {
    // Use Meteor Blaze to render login buttons
    this.view = Blaze.render(Template.loginButtons,
      React.findDOMNode(this.refs.container));
  },
  componentWillUnmount() {
    // Clean up Blaze view
    Blaze.remove(this.view);
  },
  render() {
    // Just render a placeholder container that will be filled in
    return ;
  }
});

我們只需要在App組件中定義一下就可以包含這個組件了：

  Hide Completed Tasks







  
然后，添加下面的代碼來進行賬戶界面的設定。使用username，而不是email
// 在 simple-todos-react.jsx 文件

if (Meteor.isClient) {

    // 加入開始
  // 這段代碼只會在客戶端執行
  Accounts.ui.config({
    passwordSignupFields: "USERNAME_ONLY"
  });
    // 加入結束

  Meteor.startup(function () {
添加用戶關聯功能
現在你已經可以創建賬戶并登錄你的應用程序了。這看起來挺牛B的，但是現在的用戶登錄和退出其實并不是有用的。
我們得添加下面兩條特性：

只對已登陸用戶展示新任務的輸入框

展示每個應用的創建者


為了達成這樣的效果，我們得在tasks集合中添加兩條字段

owner -- 創建任務的用戶_id

username -- 創建任務的用戶的username。我們將會把username存放在任務對象的字典中，這樣我們就不用在每次展示任務的時候從user表里面拿數據了


首先，在handleSubmit的事件監聽上添加一些代碼來保存相應的字段
Tasks.insert({
  text: text,
  createdAt: new Date(),            // 當前時間
  // 添加開始
  owner: Meteor.userId(),           // 已登陸用戶的_id
  username: Meteor.user().username  // 已登陸用戶的用戶名
  // 添加結束
});
修改getMeteorData中的return語句來獲取當前登錄用戶的個人信息
// App.jsx
    return {
      tasks: Tasks.find(query, {sort: {createdAt: -1}}).fetch(),
      // 添加開始
      incompleteCount: Tasks.find({checked: {$ne: true}}).count(),
      currentUser: Meteor.user()
      // 添加結束
    };
  },
然后，在render方法上，添加判斷語句使之只在用戶登錄后才會顯示。
// 在App.jsx文件中
  

    // 修改開始
  { this.data.currentUser ?
    
      
     : ""
  }
  // 修改結束



最后，添加語句，使之可以在每個文本之前顯示用戶名
          checked={this.props.task.checked}
          onClick={this.toggleChecked} />
 
                // 修改開始
        
          {this.props.task.username}: {this.props.task.text}
        
        // 修改結束

      
    );
  }
在你的瀏覽器中，添加一些任務，然后你會看到你的用戶名出現了。那些這一步驟之前的老任務并不會有附上名字。盡管刪掉就是了
現在，用戶可以登陸，我們也可以跟蹤每一個任務的所屬用戶。讓我們來更深層次的思考一下我們剛剛發現的概念。
自動的賬戶界面
這段翻譯的不好，最好看原版：https://www.meteor.com/tutorials/react/adding-user-accounts
如果我們的應用有accounts-ui包，我們必須去做的是通過渲染被包含的UI組件來添加登陸下拉框。這個下拉框會檢測登陸方法是否被加入到了app中，并適當的展示控制(界面)。在我們這一部分，開啟了login方法的只有accounts-password，因此，下拉框展示了password字段。如果你比較喜歡更進一步，你也可以添加accounts-facebook包，這樣就可以在你的應用中開啟Facebook登陸方式 -- Facebook按鈕將會自動的在你的下拉框中出現。
從已登陸用戶中獲取信息
在你的getMeteorData方法中，你可以使用Meteor.user()來確認用戶是否已登陸，你也可以通過這個來獲取信息。例如：Meteor.user().username包含了已登陸用戶的用戶名。你也可以用Meteor.userId()來調整當前用戶的_id
在下一個步驟，我們將學習如何在服務器端通過數據驗證來使我們的應用更加安全

GPU云服務器云服務器用戶賬戶用戶賬戶控制一個賬戶可添加多少域名為服務器建立用戶賬戶

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/86081.html

翻譯 Meteor React 制作 Todos - 07 - 在移動端運行

摘要：在安卓設備上運行安卓應用首先，把上面關于安卓的部分都走完，以確保你的電腦上安裝了所有的安卓工具。還有一件事你在真實設備上運行之前，必須得退出安卓模擬器。在安卓和蘋果上運行你的應用目前Windows平臺的Meteor并不支持移動應用的構建，如果你正在使用Windows平臺的Meteor，你得跳過這一步了。現在來看，我們編寫我們的應用，測試我們的應用都是在瀏覽器上，其實Meteor早...

Jacendfeng 2019-08-22 10:58 評論0 收藏0
翻譯 Meteor React 制作 Todos - 11 - 發布訂閱

摘要：通過發布訂閱模式過濾數據現在我們已經把應用中比較敏感的代碼放到了一些方法里面，我們還需要學習安全故事的另一半內容了。當在客戶端被調用時傳入發布器名稱，客戶端將會從發布器訂閱所有的數據。這個按鈕應該只是給任務的所有者來顯示。通過發布訂閱模式過濾數據現在我們已經把應用中比較敏感的代碼放到了一些方法里面，我們還需要學習Meteor安全故事的另一半內容了。到現在為止，我們一直是假設整個整個...

用戶83 2019-08-22 10:58 評論0 收藏0
翻譯 Meteor React 制作 Todos - 10 - 方法的安全性

摘要：在上，最好的方法就是通過聲明方法。這些方法叫做還有，這將會替換執行的方法。我們做這些是為了開啟一個我們稱之為樂觀的的特性。客戶端向服務器端發送一個在安全環境下的請求。方法的安全性在這個步驟之前，這款應用的任何用戶都可以修改數據庫的任何部分，在一個非常有意思的小項目或者演示項目中可能已經不錯了，但是任何一個真實的應用都需要對這些數據進行權限控制。在Meteor上，最好的方法就是通過聲...

Steven 2019-08-21 10:43 評論0 收藏0
翻譯 Meteor React 制作 Todos - 06 - 部署應用

摘要：添加，刪除，確認完成這些操作，你將會看到你的應用的界面響應非常的快。。這是因為并不會在更新用戶界面之前等著服務端的響應數據。部署你的應用現在你有了一個可以運行的待辦事宜的應用，你可以分享給你的朋友們！Meteor使得發布你的應用到其他人可以使用的互聯網變得非常的簡單。同樣是在你的應用文件夾的命令行中輸入： meteor deploy my_app_name.meteor.com ...

xiaochao 2019-08-22 10:58 評論0 收藏0
翻譯 Meteor React 制作 Todos - 04 - 表單與事件

摘要：通過表單添加任務在這個步驟，我們將為用戶在列表上添加輸入框。在中，這是一種監聽瀏覽器事件的方式，就像是在表單上有提交事件一樣。這對一個任務列表來說并不是非常好。在下一步，我們將給待辦事宜的列表添加一個非常重要的功能已完成功能和刪除功能通過表單(form)添加任務在這個步驟，我們將為用戶在列表上添加輸入框。首先，在App.jsx文件中App組件上添加表單吧。 Tod...

Hujiawei 2019-08-21 10:43 評論0 收藏0