我是如何创建我的第一个 Web 应用程序的

柔光的暖阳◎ 2024-03-16 19:05 63阅读 0赞

我正在学习成为一名全栈 Web 开发人员。但！我不会超越自己——我仍处于 Web 开发的初级阶段，到目前为止，我只接触过 HTML、[CSS][]和 JS。在这篇博文中，我将记录使用 [HTML、][HTML]CSS 和 JS 创建我的第一个 [Web][CSS] 应用程序的过程。

动图

![aed4b9fe658071027f08e9880f0770ae.gif][]

**让球滚动**

我相信任何艰巨任务中最困难的部分是开始 - 这里没有担心或自我怀疑的余地！因为我正在创建此应用程序作为我课程的作业，所以我必须遵守某些标准。简而言之，我需要创建一个单页 Web 应用程序，它将从 API 或模拟服务器获取数据并输出动态数据。

我首先创建了一个我的网站应该能够实现的目标列表。我决定制作一个待办事项列表应用程序，允许用户创建待办事项列表并检查已完成的任务。我的网站应该：

*  允许用户将文本写入输入表单并提交他们的任务
 *  允许用户勾选已完成的任务
 *  允许用户删除任务（完成或未完成）
 *  确保数据保存在网站上，以便在刷新时任何已选中或未选中的任务仍在页面上，并且已删除的任务不会出现

这些目标使我能够在脑海中清晰地描绘出我想要实现的目标，并让我开始思考我可以做些什么来实现这些目标。

动图

![7705cbc2fa9984c28fcd9242fd109332.gif][]

**初始代码**

编码的第一天是用 HTML 为我的网站创建一个框架，并使用 CSS 使其 ✨ 漂亮 ✨。由于我的网站是一个待办事项列表应用程序，因此最重要的功能是一个输入字段，用户可以在其中输入他们的任务：

我将输入字段和“添加”按钮放在同一个 div 中，以便轻松地在 CSS 中编辑它们的外观。

**满足项目要求**

接下来的几天用于确保我的 Web 应用程序满足项目要求。由于我正在为一项任务创建此 Web 应用程序，因此必须满足某些条件。这些是：

*  该应用程序必须是可以访问公共 API 或模拟服务器的 HTML/CSS/JS 前端
 *  整个应用程序必须在单个页面上运行
 *  它必须至少使用 3 个唯一的事件监听器
 *  它必须至少包含一个数组迭代实例
 *  它必须遵循良好的编码习惯

这是该项目最艰难的几天，因为我正在试验获取请求和方法，以确保我的数据保存到模拟服务器，并在网站刷新时将其加载到我的 Web 应用程序中。在这部分工作很头疼，因为在我让一切按我想要的方式工作之前，我必须进行大量的研究和反复试验。

例如获取请求：

<span style="color:var(--syntax-text-color)"><span style="color:var(--syntax-text-color)"><code>fetch('http://localhost:3000/tasks')
    .then(response => response.json())
    .then(json => {
        json.forEach(task => {
            let li = document.createElement("li");
            li.innerHTML = task.task;
    
            if (task.checked) {
                li.classList.add("checked");
            }
    
            listContainer.appendChild(li);
    
            let span = document.createElement("span");
            span.innerHTML = "\u00d7";
    
            li.appendChild(span);
        });
    })
    .catch(error => {
        alert('Failed to fetch tasks from the server.');
    }); 
    </code></span></span>

上面的代码确保如果用户刷新待办事项列表应用程序，Web 应用程序将从服务器获取数据，以确保在重新加载之前页面上的任何任务都将在重新加载之后的页面上。我花了很多时间进行研究，向朋友寻求帮助，并重新阅读笔记，以便让我所有的获取请求按照我希望的方式工作。当我搜索教程时，有时会感到非常沮丧，但没有任何内容可以完美地解释这个概念！只有当我利用许多不同的资源并将它们全部应用在一起时，我才能成功。

然而，这对我来说是一个很好的学习机会，因为我能够应用我在课堂上学到的概念，并且能够更好地理解我正在编写的代码——所有这些曾经让我感到困惑的概念开始变得更多感觉！

动图

![f8ee164154d8208457e966b7a667802b.gif][]

**下次我会做些什么**

下次我决定编写网站代码时，我想集中精力应用尽可能多的概念。例如，如果我在学习期间发现某个概念很困难，我会尝试在我的项目中实现它，这样我就可以把弱点变成优势，更好地理解这个概念以及如何使用它。

**我的主要收获**

我从这个项目中得到的主要收获是，是的，研究概念很重要，但是，尝试在您的代码中应用并实际实现它们更为重要，因为这是您理解它们的唯一途径！

[CSS]: https://zhifj.com
[HTML]: http://telegeram1.com
[aed4b9fe658071027f08e9880f0770ae.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/15/795e84ccf0a6484287ca61196b057fbb.png
[7705cbc2fa9984c28fcd9242fd109332.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/15/42d85c2d5d8449068c79cca06913f156.png
[f8ee164154d8208457e966b7a667802b.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/15/955a77cf4ae3432581d37e84aa51084b.png