钥匙要点
- >用流星创建自定义登录和注册表格涉及安装帐户通信软件包,该软件包将自动创建Meteor.users Collection来存储用户数据,消除了为用户相关功能编写自定义逻辑的需要。 >可以使用简单的HTML表单来开发登录和注册系统的用户界面。这些表格的模板包含电子邮件和密码的字段,以及提交按钮。
- >事件处理程序可以设置以响应用户与表格的交互。例如,可以创建“提交表单”事件,以防止表格的默认行为并在提交表单时输出确认消息。 >流星的内置方法,例如counders.createuser()和Meteor.loginwithpassword(),可用于注册新用户并分别登录现有用户。这些方法在注册后自动加密密码并登录用户,减少需要编写的代码数量。
- 开箱即用,您可以使用流星JavaScript框架可以做的最简单的事情之一就是创建一个用户帐户系统。只需安装一对软件包 - 帐户通信和Account-ui-您最终都会获得以下功能功能的界面: 但是,尽管这种简单性很方便,但依靠此样板接口并不能完全具有灵活性。那么,如果我们想创建一个自定义界面供用户注册并登录到我们的网站? 幸运的是,这根本不太困难。在本文中,我将向您展示如何使用流星创建自定义登录和注册表格。但是,本文假设您知道如何使用自己的框架来设置项目。 要播放本文中开发的代码,请查看我设置的GitHub存储库。
- 基本设置 在一个新的流星项目中,通过执行命令来添加帐户通信包:

对于完整的登录和注册系统,我们必须为其中创建许多功能,包括:
meteor <span>add accounts-password</span>注册
登录
- >忘记密码
- “确认您的电子邮件”页面
- “已确认电子邮件”页
meteor <span>add accounts-password</span>下一个片段改为显示登录表单的代码:
<span><span><span><template> name<span>="register"</span>></template></span> </span> <span><span><span><form>></form></span> </span> <span><span><span><input> type<span>="email"</span> name<span>="registerEmail"</span>></span> </span> <span><span><span><input> type<span>="password"</span> name<span>="registerPassword"</span>></span> </span> <span><span><span><input> type<span>="submit"</span> value<span>="Register"</span>></span> </span> <span><span><span></span>></span> </span><span><span><span></span>></span></span></span></span></span></span></span>如您所见,模板非常相似。它们包含表单,电子邮件和密码的字段以及提交按钮。唯一的区别是输入字段和模板的名称属性的值。 (我们将尽快参考这些值,因此请确保它们是独一无二的。) 我们只希望这些模板为尚未熟悉的用户显示。因此,我们可以参考开口和关闭主体之间的当前使用者对象 标签:
<span><span><span><template> name<span>="login"</span>></template></span> </span> <span><span><span><form>></form></span> </span> <span><span><span><input> type<span>="email"</span> name<span>="loginEmail"</span>></span> </span> <span><span><span><input> type<span>="password"</span> name<span>="loginPassword"</span>></span> </span> <span><span><span><input> type<span>="submit"</span> value<span>="Login"</span>></span> </span> <span><span><span></span>></span> </span><span><span><span></span>></span></span></span></span></span></span></span>如果当前用户已登录,则此代码显示“您登录”消息,否则“注册”和“登录”模板。
创建事件
目前,我们的形式是静态的。为了使他们做某事,我们需要他们对提交事件做出反应。让我们通过关注“寄存器”模板来证明这一点。 在项目的JavaScript文件中,编写以下内容:<span><span><span>></span> </span> <span><span><span><title>></title></span>Custom Registration Tutorial<span><span></span>></span> </span><span><span><span></span>></span> </span><span><span><span>></span> </span> {{#if currentUser}} <span><span><span><p>></p></span>You're logged in.<span><span></span>></span> </span> {{else}} {{> register}} {{> login}} {{/if}} <span><span><span></span>></span></span></span></span></span></span>在这里,我们编写了代码,以便“寄存器”模板中的形式:
- 响应提交事件
- 没有任何默认行为
- >在控制台上输出确认消息
<span>if (Meteor.isClient) { </span> <span>Template.register.events({ </span> <span>'submit form': function(event) { </span> event<span>.preventDefault(); </span> <span>console.log("Form submitted."); </span> <span>} </span> <span>}); </span><span>}</span>对于“登录”模板,代码几乎相同:
<span>Template.register.events({ </span> <span>'submit form': function(event){ </span> event<span>.preventDefault(); </span> <span>var emailVar = event.target.registerEmail.value; </span> <span>var passwordVar = event.target.registerPassword.value; </span> <span>console.log("Form submitted."); </span> <span>} </span><span>});</span>
>将事物钩在一起
将帐户通信软件包添加到项目后,我们可以使用许多方法:-
>
meteor <span>add accounts-password</span>这是我们可以用来创建新用户的代码,默认情况下,它需要两个选项:电子邮件和密码。 要通过它们,写信:
<span><span><span><template> name<span>="register"</span>></template></span> </span> <span><span><span><form>></form></span> </span> <span><span><span><input> type<span>="email"</span> name<span>="registerEmail"</span>></span> </span> <span><span><span><input> type<span>="password"</span> name<span>="registerPassword"</span>></span> </span> <span><span><span><input> type<span>="submit"</span> value<span>="Register"</span>></span> </span> <span><span><span></span>></span> </span><span><span><span></span>></span></span></span></span></span></span></span>活动的最终代码应该类似:
<span><span><span><template> name<span>="login"</span>></template></span> </span> <span><span><span><form>></form></span> </span> <span><span><span><input> type<span>="email"</span> name<span>="loginEmail"</span>></span> </span> <span><span><span><input> type<span>="password"</span> name<span>="loginPassword"</span>></span> </span> <span><span><span><input> type<span>="submit"</span> value<span>="Login"</span>></span> </span> <span><span><span></span>></span> </span><span><span><span></span>></span></span></span></span></span></span></span>通过使用此代码而不是通用插入 函数我们的优势是密码会自动加密。此外,注册后登录了用户,我们不必编写太多代码。 还有一个loginwithpassword()方法,我们可以在“登录”事件中使用:
<span><span><span>></span> </span> <span><span><span><title>></title></span>Custom Registration Tutorial<span><span></span>></span> </span><span><span><span></span>></span> </span><span><span><span>></span> </span> {{#if currentUser}} <span><span><span><p>></p></span>You're logged in.<span><span></span>></span> </span> {{else}} {{> register}} {{> login}} {{/if}} <span><span><span></span>></span></span></span></span></span></span>它还接受电子邮件和密码值:
<span>if (Meteor.isClient) { </span> <span>Template.register.events({ </span> <span>'submit form': function(event) { </span> event<span>.preventDefault(); </span> <span>console.log("Form submitted."); </span> <span>} </span> <span>}); </span><span>}</span>在上下文中,这就是代码应该的样子:
<span>Template.register.events({ </span> <span>'submit form': function(event){ </span> event<span>.preventDefault(); </span> <span>var emailVar = event.target.registerEmail.value; </span> <span>var passwordVar = event.target.registerPassword.value; </span> <span>console.log("Form submitted."); </span> <span>} </span><span>});</span>
登录
现在,用户可以注册并登录,但是,要允许他们登录,让我们首先制作一个新的“仪表板”模板,该模板将在登录时显示:<span>Template.login.events({ </span> <span>'submit form': function(event) { </span> event<span>.preventDefault(); </span> <span>var emailVar = event.target.loginEmail.value; </span> <span>var passwordVar = event.target.loginPassword.value; </span> <span>console.log("Form submitted."); </span> <span>} </span><span>});</span>然后将以下代码包含在我们本文之前写的IF语句中:
<span>Accounts.createUser({ </span> <span>// options go here </span><span>});</span>现在,我们可以创建一个事件,该事件附加到“仪表板”模板中的“注销”链接:
<span>Accounts.createUser({ </span> <span>email: emailVar, </span> <span>password: passwordVar </span><span>});</span>要执行登录过程,我们只需要使用注销方法:
<span>Template.register.events({ </span> <span>'submit form': function(event) { </span> event<span>.preventDefault(); </span> <span>var emailVar = event.target.registerEmail.value; </span> <span>var passwordVar = event.target.registerPassword.value; </span> <span>Accounts.createUser({ </span> <span>email: emailVar, </span> <span>password: passwordVar </span> <span>}); </span> <span>} </span><span>});</span>现在应按预期工作,注册,登录和登录。
结论
我们的代码很少,我们取得了很大的进步,但是如果我们想为帐户系统创建一个完整的接口,那么还有很多事情要做。 这是我建议的:- 启用验证新用户的电子邮件。
- 验证用户的创建(并登录)。
> >将视觉验证添加到“寄存器”和“登录”表单中。
- 登录尝试失败时要做一些事情。
- 允许用户更改其密码。
- 可能需要一个下午才能找出有关如何实现这些功能的细节,但是根据我们在本教程中涵盖的内容,这都不是您无法触及的。流星为我们付出了艰苦的工作。 如果您想使用本文开发的代码,请查看我设置的GitHub存储库。 经常询问的问题(常见问题解答)关于使用流星
>如何将其他字段添加到流星中的注册形式?
>在流星中的注册表格中添加其他字段非常简单。您可以通过在accounts.createuser方法中添加更多字段来扩展用户配置文件。例如,如果要为用户的全名添加一个字段,则可以这样做: accounts.createuser({用户名:'tastuser',
密码:'密码:' ',
profile:{
fullname:'test用户'
}
});
在此示例中,“ FullName”是添加到用户配置文件中的附加字段。您可以稍后使用Meteor.user()。profile.fullname。
>我如何自定义流星中的登录/注册表格的外观?
Meteor不提供一个内置方式来自定义登录/注册表格的外观。但是,您可以根据需要使用CSS对表格进行样式。您可以将类分配给表单元素,然后在CSS文件中使用这些类以应用样式。另外,您可以使用Bootstrap或Material-ui等UI库来样式表单。如何在Meteor中实现电子邮件验证?
Meteor为电子邮件验证提供内置支持。您可以使用帐户。sendverificiencemail方法向用户发送验证电子邮件。此方法将用户的ID作为参数,并发送带有链接的电子邮件,用户可以单击以验证其电子邮件地址。创建这样的新用户之后,您可以调用此方法:
accounts.createuser({
电子邮件:'test@example.com',
密码:'password'
}, function(err,userId){
> if(err){
//处理错误
} else {
accounts.sendverificitionEmail(userId);
> }
在使用accounts.createuser创建新用户时,您可以提供一个被调用的回调函数如果发生错误,则使用错误对象。此错误对象包含有关出了什么问题的信息。您可以使用此信息向用户显示适当的错误消息。以下是一个示例:
accounts.createuser({
>用户名:'tastuser',
密码:'password'
},function(err){
if(err)if(err){
> console.log('注册期间的错误:',err);
}
>
>我如何将社交登录添加到我的流星应用程序中?>我如何根据流星中的用户身份验证限制对某些路由的访问?
>您可以使用Meteor的内置帐户包以及诸如FlowRouter或Iron Router之类的路由套件来限制基于某些路由的路由器关于用户身份验证。您可以在使用Meteor.userid()或Meteor.user()中检查用户是否已登录。 ?
在流星中,您可以将其他用户数据存储在Meteor.users Collection中的用户文档中。您可以在使用accounts.createuser创建新用户时将其他字段添加到本文档中,也可以使用Meteor.users.update。流星中的控制?
流星无法为基于角色的访问控制提供内置支持,但是您可以使用诸如Alanning:角色之类的软件包将此功能添加到您的应用程序中。此软件包允许您将角色分配给用户,然后在确定是否允许用户执行某个操作时检查这些角色。
>>如何在Meteor中注销用户?可以使用Meteor.logout方法在流星中注销用户。此方法将在客户端上注销当前用户,并使服务器上的登录令牌无效。它还采用一个回调函数,当注销过程完成时,它将在没有参数的情况下被调用。
>以上是用流星创建自定义登录和注册表格的详细内容。更多信息请关注PHP中文网其他相关文章!

JavaScript在现实世界中的应用包括前端和后端开发。1)通过构建TODO列表应用展示前端应用,涉及DOM操作和事件处理。2)通过Node.js和Express构建RESTfulAPI展示后端应用。

JavaScript在Web开发中的主要用途包括客户端交互、表单验证和异步通信。1)通过DOM操作实现动态内容更新和用户交互;2)在用户提交数据前进行客户端验证,提高用户体验;3)通过AJAX技术实现与服务器的无刷新通信。

理解JavaScript引擎内部工作原理对开发者重要,因为它能帮助编写更高效的代码并理解性能瓶颈和优化策略。1)引擎的工作流程包括解析、编译和执行三个阶段;2)执行过程中,引擎会进行动态优化,如内联缓存和隐藏类;3)最佳实践包括避免全局变量、优化循环、使用const和let,以及避免过度使用闭包。

Python更适合初学者,学习曲线平缓,语法简洁;JavaScript适合前端开发,学习曲线较陡,语法灵活。1.Python语法直观,适用于数据科学和后端开发。2.JavaScript灵活,广泛用于前端和服务器端编程。

Python和JavaScript在社区、库和资源方面的对比各有优劣。1)Python社区友好,适合初学者,但前端开发资源不如JavaScript丰富。2)Python在数据科学和机器学习库方面强大,JavaScript则在前端开发库和框架上更胜一筹。3)两者的学习资源都丰富,但Python适合从官方文档开始,JavaScript则以MDNWebDocs为佳。选择应基于项目需求和个人兴趣。

从C/C 转向JavaScript需要适应动态类型、垃圾回收和异步编程等特点。1)C/C 是静态类型语言,需手动管理内存,而JavaScript是动态类型,垃圾回收自动处理。2)C/C 需编译成机器码,JavaScript则为解释型语言。3)JavaScript引入闭包、原型链和Promise等概念,增强了灵活性和异步编程能力。

不同JavaScript引擎在解析和执行JavaScript代码时,效果会有所不同,因为每个引擎的实现原理和优化策略各有差异。1.词法分析:将源码转换为词法单元。2.语法分析:生成抽象语法树。3.优化和编译:通过JIT编译器生成机器码。4.执行:运行机器码。V8引擎通过即时编译和隐藏类优化,SpiderMonkey使用类型推断系统,导致在相同代码上的性能表现不同。

JavaScript在现实世界中的应用包括服务器端编程、移动应用开发和物联网控制:1.通过Node.js实现服务器端编程,适用于高并发请求处理。2.通过ReactNative进行移动应用开发,支持跨平台部署。3.通过Johnny-Five库用于物联网设备控制,适用于硬件交互。


热AI工具

Undresser.AI Undress
人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool
免费脱衣服图片

Clothoff.io
AI脱衣机

AI Hentai Generator
免费生成ai无尽的。

热门文章

热工具

Dreamweaver Mac版
视觉化网页开发工具

mPDF
mPDF是一个PHP库,可以从UTF-8编码的HTML生成PDF文件。原作者Ian Back编写mPDF以从他的网站上“即时”输出PDF文件,并处理不同的语言。与原始脚本如HTML2FPDF相比,它的速度较慢,并且在使用Unicode字体时生成的文件较大,但支持CSS样式等,并进行了大量增强。支持几乎所有语言,包括RTL(阿拉伯语和希伯来语)和CJK(中日韩)。支持嵌套的块级元素(如P、DIV),

SublimeText3汉化版
中文版,非常好用

WebStorm Mac版
好用的JavaScript开发工具

MinGW - 适用于 Windows 的极简 GNU
这个项目正在迁移到osdn.net/projects/mingw的过程中,你可以继续在那里关注我们。MinGW:GNU编译器集合(GCC)的本地Windows移植版本,可自由分发的导入库和用于构建本地Windows应用程序的头文件;包括对MSVC运行时的扩展,以支持C99功能。MinGW的所有软件都可以在64位Windows平台上运行。