即兴登录表单
即兴登录表单
当我开始参加 Flatiron 软件工程训练营时，我知道我想利用我在教育和语言方面的背景作为我每个编码项目的起点。所以，对于 我的第一个项目 我开发了一个单页应用程序，学习中文的学生可以练习匹配他们的拼音读法（拼音是中国大陆使用的标准罗马化发音指南）。他们可以使用内置的学习列表，也可以创建自己的学习列表，通过练习和正确回答，他们可以获得积分。在排行榜上显示积分和高分增加了健康的竞争，以帮助激励学生练习。
这个项目实际上是从 35,000 英尺开始的，我的双臂伸向熟睡的 5 岁女儿，伸手够到我的笔记本电脑，笔记本电脑在托盘桌上摇摇欲坠。我突然对用户登录的工作原理产生了好奇，并且确定缺乏互联网资源来找到答案（无需向曼联支付 8 美元的高昂费用（我要考虑训练营的学费！）！）。我傲慢地想：“好吧，我知道怎么做 ** 我** 会做的！”到飞行结束时，我实际上已经想出了一个功能齐全、完全不安全的登录系统！我还没有研究过现代登录是如何完成的，但即使我很遥远，这段经历也帮助我练习了重要的技能，是通过代码解决问题的练习，并且给了我极大的满足感和成就感（a成就感）！
登录系统有：
-
初始化阶段——所有用户数据从 json 数据库加载到本地存储的对象中。是的，我知道这对于大量用户来说是不切实际的，而且完全不安全（我可以在控制台中查找任何用户的密码 用户[用户名].密码 ...），但它适用于我需要的东西。每个用户在 用户 对象存储他们的用户名和密码（用于检查登录凭据）、任何用户创建的学习列表和点数。一个例子：
{ “用户名”：“psherman”， “点”：10， “密码”：“达拉”， “用户研究列表”：{ “数字”：[ [“一”, “yī”], [“二”, “èr”], [“三”, “sān”], [“四”, “sì”], ... ] }, “身份证”：5 }
-
一种在之间切换的形式 创建账户 和 登录 基于布尔值的状态 已登录 （注意：表单可以设置为默认值，具体取决于偏好，通过设置在页面加载时登录或创建帐户 有帐户， 当它被初始化时， 真的 或者 错误的 分别）。
让 hasAccount = true 函数句柄LogInForm(){ 如果（hasAccount === 假）{ document.getElementById('signInHeading').textContent = '登录'; 有帐户=真； haveAccountLink.textContent = '没有账号？在此注册！'; }别的{ document.getElementById('signInHeading').textContent = '创建
一个帐户'; 有帐户=假； haveAccountLink.textContent = '已经有账号了？在这里登录。'; } } -
表单中的链接在两个选项之间切换：
haveAccountLink.addEventListener('click', () => handleLogInForm());
-
创建用户函数获取新的用户信息，检查以确保给定的用户名不存在于数据库中，然后创建一个新的用户对象，然后将其发布到 用户 目的。
函数句柄创建用户（用户名，密码）{ if (用户名 === '' || 密码 === '') { alert('请选择用户名和密码以继续。') }else if (users[
${username}] === undefined){ 获取（http://localhost:3000/users, { 方法：“POST”， 标题：{ “内容类型”：“应用程序/json”， “接受”：“应用程序/json” }, 正文： JSON.stringify({ “用户名”：用户名， “点”：0， “密码”：密码， “userStudyLists”：{} }) }) .then(() => alert(账号创建成功)) }别的{
alert('用户名已存在。请尝试其他名称或登录
如果你已经有一个帐户'） } } -
登录功能将输入的登录信息与本地登录信息进行比较 用户 目的：
函数句柄登录（用户名，密码）{ if (users[
${username}] !== undefined &&
用户[${username}].password === 密码）{ isLoggedIn = true; 登录用户 = 用户名； document.getElementById('createAccount').style.display = 'none' document.getElementById('welcome').textContent =欢迎， ${用户名}document.getElementById('points').textContent =你有 ${users[username].points} 积分document.getElementById('chooseList').style.display = 'inline' }别的{ alert('此用户名和密码组合无法识别。
请重试或创建一个帐户。'） } } -
点击时 提交 ，然后表单上的事件侦听器将它们联系在一起，创建一个新帐户或登录并使用问候语、内置和用户创建的研究列表的列表以及创建新研究的选项填充页面列表。成功登录还通过设置删除登录表单 style.display = '无'
form.addEventListener('提交', e => { 常量用户名 =
document.getElementById('username').value.toLowerCase(); 常量密码 = document.getElementById('password').value; 如果（hasAccount === 假）{ handleCreateUser（用户名，密码） }别的{ e.preventDefault() 处理登录（用户名，密码） 如果（isLoggedIn）{ showStudyLists() } } })
任务完成了，还有整个游戏要做，所以我不得不继续前进。毕竟我的目标是
“……以我在教育和语言方面的背景作为我每个编码项目的起点。” -我
有更多的时间，我会添加一个注销按钮，也许会用一些 CSS 样式让它变得活泼一点，但最后我对最终产品非常满意。
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明
