meteor 创建启动_使用Meteor创建自定义登录和注册表单

最新推荐文章于 2020-05-29 23:15:52 发布

dingshi7798

最新推荐文章于 2020-05-29 23:15:52 发布

阅读量162

点赞数

文章标签： java python vue javascript php ViewUI

原文链接：https://www.sitepoint.com/creating-custom-login-registration-form-with-meteor/

版权

meteor 创建启动

开箱即用，使用Meteor JavaScript框架可以做的最简单的事情之一就是创建用户帐户系统。只需安装一对软件包（ accounts-password和accounts-ui ），您将获得以下功能齐全的界面：

登录按钮模板

但是，尽管这种简单性很方便，但是依靠此样板接口并不能提供很大的灵活性。那么，如果我们想为用户创建一个自定义界面来注册并登录我们的网站怎么办？

幸运的是，这一点都不困难。在本文中，我将向您展示如何使用Meteor创建自定义登录和注册表单。但是，本文假设您知道自己如何使用此框架来建立项目。

要使用本文开发的代码，请看一下我建立的GitHub存储库。

基本设定

在一个新的Meteor项目中，通过执行以下命令来添加accounts-password包：

meteor add accounts-password

通过将此包添加到项目中，将创建Meteor.users集合来存储我们的用户数据，而我们不必为与用户相关的功能编写自定义逻辑。

因此，尽管创建自定义界面意味着我们将失去accounts-ui软件包的便利性，但这并不意味着我们必须失去Meteor可以提供的后端“魔术”的便利性。

开发界面

对于完整的登录和注册系统，我们必须为其创建界面的功能很多，包括：

注册
登录
忘记密码
“确认您的电子邮件”页面
“已确认电子邮件”页面

但是目前，我们将讨论列出的前两点（注册和登录）表格。原因是，一旦掌握了基础知识，您将不难发现如何创建其他接口。

以下代码段显示了注册表格的代码：

<template name="register">
    <form>
        <input type="email" name="registerEmail">
        <input type="password" name="registerPassword">
        <input type="submit" value="Register">
    </form>
</template>

下一个代码段显示登录表单的代码：

<template name="login">
    <form>
        <input type="email" name="loginEmail">
        <input type="password" name="loginPassword">
        <input type="submit" value="Login">
    </form>
</template>

如您所见，模板非常相似。它们包含一个表单，电子邮件和密码字段以及“提交”按钮。唯一的区别是输入字段和模板的name属性的值。（我们将很快引用这些值，因此请确保它们是唯一的。）

我们只希望为尚未登录的用户显示这些模板。因此，我们可以在打开和关闭body标签之间引用currentUser对象：

<head>
    <title>Custom Registration Tutorial</title>
</head>
<body>
    {{#if currentUser}}
        <p>You're logged in.</p>
    {{else}}
        {{> register}}
        {{> login}}
    {{/if}}
</body>

如果当前用户已登录，则此代码显示“您已登录”消息，否则显示“注册”和“登录”模板。

创建事件

目前，我们的表格是静态的。为了让他们做一些事情，我们需要他们的Reactsubmit事件。让我们通过关注“注册”模板来演示这一点。

在项目JavaScript文件中，编写以下内容：

if (Meteor.isClient) {
    Template.register.events({
        'submit form': function(event) {
            event.preventDefault();
            console.log("Form submitted.");
        }
    });
}

在这里，我们编写了代码，以便“注册”模板中的表单：

响应submit事件
没有任何默认行为
在控制台上输出确认消息

我们也将此代码放在有条件的isClient因为我们不希望此代码在服务器上运行（因为它仅用于接口）。

免费学习PHP！

全面介绍PHP和MySQL，从而实现服务器端编程的飞跃。

~~原价$ 11.95~~ 您的完全免费

在事件内部，我们将要获取电子邮件和密码字段的值，并将它们存储在一对变量中。因此，让我们修改前面的代码：

Template.register.events({
    'submit form': function(event){
        event.preventDefault();
        var emailVar = event.target.registerEmail.value;
        var passwordVar = event.target.registerPassword.value;
        console.log("Form submitted.");
    }
});

对于“登录”模板，代码几乎相同：

Template.login.events({
    'submit form': function(event) {
        event.preventDefault();
        var emailVar = event.target.loginEmail.value;
        var passwordVar = event.target.loginPassword.value;
        console.log("Form submitted.");
    }
});

钩在一起

在将accounts-password包添加到项目后，我们可以使用多种方法：

Accounts.createUser()
Accounts.changePassword()
Accounts.forgotPassword()
Accounts.resetPassword()
Accounts.setPassword()
Accounts.verifyEmail()

我们将重点介绍createUser方法，但是基于方法名称，不难发现其他方法的用途。

在“注册”模板的submit事件的底部，输入：

Accounts.createUser({
    // options go here
});

这是我们可以用来创建新用户的代码，默认情况下，它需要两个选项：电子邮件和密码。

要通过它们，请输入：

Accounts.createUser({
    email: emailVar,
    password: passwordVar
});

该事件的最终代码应类似于：

Template.register.events({
    'submit form': function(event) {
        event.preventDefault();
        var emailVar = event.target.registerEmail.value;
        var passwordVar = event.target.registerPassword.value;
        Accounts.createUser({
            email: emailVar,
            password: passwordVar
        });
    }
});

通过使用此代码而不是通用insert功能，我们具有密码自动加密的优点。此外，用户在注册后即可登录，我们无需编写太多代码。

我们还可以在“ login”事件中使用loginWithPassword()方法：

Meteor.loginWithPassword();

它还接受电子邮件和密码值：

Meteor.loginWithPassword(emailVar, passwordVar);

在上下文中，代码应如下所示：

Template.login.events({
    'submit form': function(event){
        event.preventDefault();
        var emailVar = event.target.loginEmail.value;
        var passwordVar = event.target.loginPassword.value;
        Meteor.loginWithPassword(emailVar, passwordVar);
    }
});

注销

用户现在可以注册并登录，但是要允许他们注销，我们首先创建一个新的“仪表盘”模板，该模板将在登录时显示：

<template name="dashboard">
    <p>You're logged in.</p>
    <p><a href="#" class="logout">Logout</a></p>
</template>

然后在我们在本文前面编写的if语句中包含以下代码：

<body>
    {{#if currentUser}}
        {{> dashboard}}
    {{else}}
        {{> register}}
        {{> login}}
    {{/if}}
</body>

现在，我们可以创建一个附加到“仪表盘”模板内“注销”链接的事件：

Template.dashboard.events({
    'click .logout': function(event){
        event.preventDefault();
    }
});

要执行注销过程，我们只需要使用如下logout方法：

Template.dashboard.events({
    'click .logout': function(event){
        event.preventDefault();
        Meteor.logout();
    }
});

现在，注册，登录和注销应该可以正常工作。

结论

我们已经用少量的代码取得了很大的进步，但是如果我们想为会计系统创建一个完整的界面，还有很多事情要做。

这是我的建议：

可能需要花费一个下午的时间来弄清楚如何实现这些功能的细节，但是根据我们在本教程中介绍的内容，所有这些都不在您的范围之内。流星为我们做了艰苦的工作。

如果您想使用本文开发的代码，请看一下我设置的GitHub存储库。

翻译自: https://www.sitepoint.com/creating-custom-login-registration-form-with-meteor/

meteor 创建启动

dingshi7798

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
meteor 创建启动_使用Meteor创建自定义登录和注册表单

meteor 创建启动开箱即用，使用Meteor JavaScript框架可以做的最简单的事情之一就是创建用户帐户系统。只需安装一对软件包（ accounts-password和accounts-ui ），您将获得以下功能齐全的界面：但是，尽管这种简单性很方便，但是依靠此样板接口并不能提供很大的灵活性。那么，如果我们想为用户创建一个自定义界面来注册并登录我们的网站怎么办？幸运...
复制链接

扫一扫