资讯专栏INFORMATION COLUMN

Meteor:添加用户系统

Michael_Ding / 3301人阅读

摘要:内部实现了对用户系统的支持,可以让你的应用程序分分钟种支持多用户系统。数据和用户信息关联使用的添加一条数据页面添加事件在保存的时候,额外保存了两条用户相关的数据一个是用户的,一个是用户的名称。

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

meteor add accounts-ui
meteor add accounts-password

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

添加login按钮

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

{{> loginButtons}}

效果如下:

点击按钮会弹出一个登录框:

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

在取用户信息

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

{{#if currentUser}}
    
{{currentUser.username}}
{{> add}} {{> detail}} {{/if}}

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

数据和用户信息关联

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

添加事件:

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.detail.helpers({
        languages: Languages.find({owner: Meteor.userId()})
   });

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

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

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/18829.html

相关文章

  • 翻译 Meteor React 制作 Todos - 09 - 添加用户账户

    摘要:为了开启这套账户系统和界面,我们需要去添加相关的包。使用,而不是在文件加入开始这段代码只会在客户端执行加入结束添加用户关联功能现在你已经可以创建账户并登录你的应用程序了。例如包含了已登陆用户的用户名。 添加多用户账户 Meteor带来了一套账户系统然后顺便还带了用户界面来让你可以在几分钟之内在你的应用中添加多用户功能 目前,这套UI组件使用Blaze作为默认的UI引擎,在未来,可能会以...

    levius 评论0 收藏0
  • Day 15:Meteor —— 从零开始创建一个 Web 应用

    摘要:在我的机子上,运行于端口,以避免和其他默认运行于端口的冲突。我们可以使用命令连接数据库查看定义应用层次创建的模板应用有一个问题,客户端和服务器段的代码是一样的。在中加入然后添加问题模板注意我们使用了来确保用户未登录的情况下应用。 编者注:我们发现了有趣的一系列文章《30天学习30种新技术》,正在翻译中,一天一篇更新,年终礼包。下面是第15天的内容。 到目前为止我们讨论了Bower...

    Big_fat_cat 评论0 收藏0
  • Day 15:Meteor —— 从零开始创建一个 Web 应用

    摘要:在我的机子上,运行于端口,以避免和其他默认运行于端口的冲突。我们可以使用命令连接数据库查看定义应用层次创建的模板应用有一个问题,客户端和服务器段的代码是一样的。在中加入然后添加问题模板注意我们使用了来确保用户未登录的情况下应用。 编者注:我们发现了有趣的一系列文章《30天学习30种新技术》,正在翻译中,一天一篇更新,年终礼包。下面是第15天的内容。 到目前为止我们讨论了Bower...

    lpjustdoit 评论0 收藏0
  • 翻译 Meteor React 制作 Todos - 11 - 发布订阅

    摘要:通过发布订阅模式过滤数据现在我们已经把应用中比较敏感的代码放到了一些方法里面,我们还需要学习安全故事的另一半内容了。当在客户端被调用时传入发布器名称,客户端将会从发布器订阅所有的数据。这个按钮应该只是给任务的所有者来显示。 通过发布订阅模式过滤数据 现在我们已经把应用中比较敏感的代码放到了一些方法里面,我们还需要学习Meteor安全故事的另一半内容了。到现在为止,我们一直是假设整个整个...

    用户83 评论0 收藏0
  • Meteor:发布与订阅

    摘要:发布与订阅在端使用函数注册一个的发布者,需要在客户端对进行订阅,使用订阅了现在已经添加的数据就会重新出现在页面上。利用发布订阅模式,我们也可以实现对于私有数据的访问。 我们可以使用安全的方法让用户端不直接操作数据库,但是还是可以直接读取数据库内容,如果我们还需要保护私有的数据存储,在客户端直接使用Collection.find(),这样的操作方式在实际的项目中并不会使用,这样的数据无法...

    animabear 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<