成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

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

levius / 3126人閱讀

摘要：為了開啟這套賬戶系統(tǒng)和界面，我們需要去添加相關(guān)的包。使用，而不是在文件加入開始這段代碼只會在客戶端執(zhí)行加入結(jié)束添加用戶關(guān)聯(lián)功能現(xiàn)在你已經(jīng)可以創(chuàng)建賬戶并登錄你的應(yīng)用程序了。例如包含了已登陸用戶的用戶名。

添加多用戶賬戶

Meteor帶來了一套賬戶系統(tǒng)然后順便還帶了用戶界面來讓你可以在幾分鐘之內(nèi)在你的應(yīng)用中添加多用戶功能

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

為了開啟這套賬戶系統(tǒng)和UI界面，我們需要去添加相關(guān)的包。在你的應(yīng)用目錄中，執(zhí)行下面的命令：

meteor add accounts-ui accounts-password
用React來包裝一個Blaze組件

為了從accounts-ui這個包中使用Blaze UI組件，我們需要用React的組件來把他包裝一下。
來創(chuàng)建一個叫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








  

然后，添加下面的代碼來進行賬戶界面的設(shè)定。使用username，而不是email


// 在 simple-todos-react.jsx 文件

if (Meteor.isClient) {

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

  Meteor.startup(function () {

添加用戶關(guān)聯(lián)功能

現(xiàn)在你已經(jīng)可以創(chuàng)建賬戶并登錄你的應(yīng)用程序了。這看起來挺牛B的，但是現(xiàn)在的用戶登錄和退出其實并不是有用的。
我們得添加下面兩條特性：



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


展示每個應(yīng)用的創(chuàng)建者



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



owner -- 創(chuàng)建任務(wù)的用戶_id


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



首先，在handleSubmit的事件監(jiān)聽上添加一些代碼來保存相應(yīng)的字段


Tasks.insert({
  text: text,
  createdAt: new Date(),            // 當前時間
  // 添加開始
  owner: Meteor.userId(),           // 已登陸用戶的_id
  username: Meteor.user().username  // 已登陸用戶的用戶名
  // 添加結(jié)束
});


修改getMeteorData中的return語句來獲取當前登錄用戶的個人信息


// App.jsx
    return {
      tasks: Tasks.find(query, {sort: {createdAt: -1}}).fetch(),
      // 添加開始
      incompleteCount: Tasks.find({checked: {$ne: true}}).count(),
      currentUser: Meteor.user()
      // 添加結(jié)束
    };
  },


然后，在render方法上，添加判斷語句使之只在用戶登錄后才會顯示。


// 在App.jsx文件中
  

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



    

    最后，添加語句，使之可以在每個文本之前顯示用戶名
    

              checked={this.props.task.checked}
          onClick={this.toggleChecked} />
 
                // 修改開始
        
          {this.props.task.username}: {this.props.task.text}
        
        // 修改結(jié)束

      
    );
  }
    

    在你的瀏覽器中，添加一些任務(wù)，然后你會看到你的用戶名出現(xiàn)了。那些這一步驟之前的老任務(wù)并不會有附上名字。盡管刪掉就是了
    

    現(xiàn)在，用戶可以登陸，我們也可以跟蹤每一個任務(wù)的所屬用戶。讓我們來更深層次的思考一下我們剛剛發(fā)現(xiàn)的概念。
    
自動的賬戶界面

    這段翻譯的不好，最好看原版：https://www.meteor.com/tutorials/react/adding-user-accounts
    

    如果我們的應(yīng)用有accounts-ui包，我們必須去做的是通過渲染被包含的UI組件來添加登陸下拉框。這個下拉框會檢測登陸方法是否被加入到了app中，并適當?shù)恼故究刂?界面)。在我們這一部分，開啟了login方法的只有accounts-password，因此，下拉框展示了password字段。如果你比較喜歡更進一步，你也可以添加accounts-facebook包，這樣就可以在你的應(yīng)用中開啟Facebook登陸方式 -- Facebook按鈕將會自動的在你的下拉框中出現(xiàn)。
    
從已登陸用戶中獲取信息

    在你的getMeteorData方法中，你可以使用Meteor.user()來確認用戶是否已登陸，你也可以通過這個來獲取信息。例如：Meteor.user().username包含了已登陸用戶的用戶名。你也可以用Meteor.userId()來調(diào)整當前用戶的_id
    

    在下一個步驟，我們將學習如何在服務(wù)器端通過數(shù)據(jù)驗證來使我們的應(yīng)用更加安全

    文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

    轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/86081.html

    相關(guān)文章

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

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

      Jacendfeng 評論0 收藏0

    • 翻譯 Meteor React 制作 Todos - 11 - 發(fā)布訂閱

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

      用戶83 評論0 收藏0

    • 翻譯 Meteor React 制作 Todos - 10 - 方法的安全性

      摘要：在上，最好的方法就是通過聲明方法。這些方法叫做還有，這將會替換執(zhí)行的方法。我們做這些是為了開啟一個我們稱之為樂觀的的特性?？蛻舳讼蚍?wù)器端發(fā)送一個在安全環(huán)境下的請求。 方法的安全性 在這個步驟之前，這款應(yīng)用的任何用戶都可以修改數(shù)據(jù)庫的任何部分，在一個非常有意思的小項目或者演示項目中可能已經(jīng)不錯了，但是任何一個真實的應(yīng)用都需要對這些數(shù)據(jù)進行權(quán)限控制。在Meteor上，最好的方法就是通過聲...

      Steven 評論0 收藏0

    • 翻譯 Meteor React 制作 Todos - 06 - 部署應(yīng)用

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

      xiaochao 評論0 收藏0

    • 翻譯 Meteor React 制作 Todos - 04 - 表單與事件

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

      Hujiawei 評論0 收藏0

    發(fā)表評論

    0條評論

    最新活動
    閱讀需要支付1元查看
    <