Meteor:添加用户系统

Meteor 内部实现了对用户系统的支持,可以让你的应用程序分分钟种支持多用户系统。
要开启对于Accounts 系统和UI的支持,我们需要添加相关的packages,cd 到App的目录,添加相关的包:

meteor add accounts-ui
meteor add accounts-password

一个是用户系统相关的ui包,一个是password相关的包

添加login按钮

直接在body里面添加login的模板即可:

{{> loginButtons}}

效果如下:
图片描述

点击按钮会弹出一个登录框:
图片描述

可以登录,也可以跳转到注册界面

在取用户信息

在html中可以通过currentUser这个变量获取到用户的信息

{{#if currentUser}}
    <div>
        <strong>{{currentUser.username}}</strong>
    </div>
    {{> add}}
    {{> detail}}
{{/if}}

currentUser可以判断用户是否登录,没有登录的用户该值为空,如果用户已经登录可以通过currentUser.username得到用户的名字。

数据和用户信息关联

使用add的template添加一条language数据
页面:

<template name="add">
    <form class="new-language">
        <input type="text" name="text" placeholder="add new language">
        <input type="submit" value="Submit"/>
    </form>
</template>

添加事件:

Template.add.events({
        "submit .new-language": function (event) {
            event.preventDefault();
            console.log("test");
            console.log(Meteor.user().username);
            var text = event.target.text.value;
            Languages.insert({
                text: text,
                createdAt: new Date(),
                owner: Meteor.userId(),
                username: Meteor.user().username
            });


        }
    });

在保存Lanuages的时候,额外保存了两条用户相关的数据 一个是用户的id,一个是用户的名称。owner保存的是user的 _id就是MongoDB的主键。通过Meteor.userId() 可以获得当前登录用户的id,Meteor.user()可以获得当前登录的用户,Meteor.user()在JavaScript中使用,而currentUser在html中使用。

在数据中显示用户信息

在lanuage信息中,显示出用户名

<template name="detail">
    {{#each languages}}
        <div class="text"><strong>{{username}}</strong> -{{text}}</div>
    {{/each}}
</template>

获取数据的代码:

Template.detail.helpers({
        languages: Languages.find({owner: Meteor.userId()})
   });

从保存到数据库中的用户信息中,显示用户的名称。

项目源代码地址:https://github.com/jjz/meteor/tree/master/meteor-account

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值