我的第一个 Hacktoberfest 贡献！！！

一分耕耘，一分收获！既然都打开这篇《我的第一个 Hacktoberfest 贡献！！！》，就坚持看下去，学下去吧！本文主要会给大家讲到等等知识点，如果大家对本文有好的建议或者看到有不足之处，非常欢迎大家积极提出！在后续文章我会继续更新文章相关的内容，希望对大家都有所帮助！

黑客啤酒节

今天是 2024 年 10 月 1 日，标志着 Hacktoberfest 的开始。 Hacktoberfest 是为期一个月的开源项目、其维护者以及整个贡献者社区的庆祝活动。

我的第一个贡献

背景

由于 Hacktoberfest 即将开始，我决定这次也要花时间回馈开源社区，做出有意义的贡献，所以我开始研究与我技能相匹配的开源项目和经验。

第一期

当我浏览与 hacktoberfest 标签存在多个问题的项目列表时，我看到了这个存储库，它类似于用于显示 F1 统计数据的仪表板，该项目称为 F1Hub。

我发现有趣的问题是代码库用于获取 F1 数据的第三方 API 已被弃用，他们必须迁移到新的 API。我快速浏览了代码库，查看了正在使用的技术堆栈，总结了所有必须完成的操作，然后要求存储库的维护者向我分配这个问题，可以在此处找到该问题的更详细描述.

代码库设置

设置代码库非常简单，因为维护者有一个描述性的 README.md 和 CONTRIBUTING.md 文件，其中包含让代码库在本地运行的所有步骤。该代码库使用的技术堆栈主要以 Angular 和 JavaScript 为中心

（有趣的事实，在这个项目之前我从未有过使用 Angular 的经验 xD）

研究

由于我以前从未有过 Angular 的经验，所以我研究它的想法是首先看看我必须更改哪些函数/代码块来解决问题，找到有关在那里使用的 Angular 函数的文档，然后继续进行更改。

我发现我只需要理解 2 个方法/属性的用法和 1 个 Angular 的单一概念，它们是

概念
MVC - 模型、视图和控制器

Angular遵循MVC设计架构，其中模型包含所有数据和业务逻辑，控制器负责管理视图和模型之间的交互，视图向前端表示数据，视图是前端的接口。最终用户与之交互。

方法和属性

• 控制器 - 这些用于控制并向 Angular 中的视图提供数据
• $scope - 此函数提供对控制器向 Angular 中的视图提供的数据的访问

解决问题的过程

这里的直觉是将 $scope 属性的 baseUrl 方法中的值替换为仪表板将要使用的新 API，更正来自 baseUrl 的路由，并确保解析新数据并为视图正确格式化

这看起来很简单，对吧？

事实证明不是，说实话，我在进行更改时遇到了一个重大问题，新的 API 不接受来自不同来源的请求，简单来说，我遇到了 CORS 错误

我的第一个想法是上网在 Angular 中搜索相同的问题，我在 Reddit 和 StackOverflow 上找到了一些非常棒的帖子，但他们无法解决我的问题。

然后我所做的就是继续访问新 API 的存储库（Jolpica），并查明是否有其他人针对同一件事提出了问题

幸运的是，我发现另一位用户在他们的项目中使用此 API 时遇到了类似的问题。他们在 API 存储库上提出了一个问题，该问题已于两周前得到解决并关闭。

我进入了他们的存储库，找到了他们使用的解决方案，最后从中获得了灵感并对 F1Hub 进行了更改

第一次请求请求

完成代码库的制作后，我审查了更改，确保没有任何回归，并且更改是按照维护者的要求完成的。满足所有要求后，我在主存储库上做了一个 PR，描述了我所做的所有更改以及正在使用哪些新 URL，您可以在这里找到 PR

结论

这次 Hacktoberfest 体验凸显了开源贡献的回报本质。尽管面临着不熟悉的技术（Angular）和意外问题（CORS 错误）的挑战，但坚持不懈和足智多谋还是取得了成功。这个过程证明了社区支持在开源开发中的重要性，因为解决方案是通过其他用户的类似经验找到的。

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《我的第一个 Hacktoberfest 贡献！！！》文章吧，也可关注golang学习网公众号了解相关技术文章。