每个 Web 开发人员都应该学习的 7 件事

目录

Web 基础知识（html + css + javascript）

API（应用程序编程接口）

Git 和 Github

数据库

网络基础知识

MVC

Chrome 开发者工具

结论

如果你正在学习 SQL 或 MySQL，请查看我在udemy上的 SQL 课程

在这篇博文中，我将探讨一些你作为一名开发者在开发过程中需要了解或运用的知识。这些只是我个人的理解。如果你是一位高级开发者，你可能有自己的一套清单，或者有自己的偏好，这完全没问题。简而言之，在本文中，我将简要介绍 Web 的构建模块（前端、后端、网络……等等），以及它们为何如此重要。

那么，让我们开始吧：）

目录

• Web 基础知识（html + css + javascript）

• 蜜蜂

• Git 和 Github

• 数据库

• 网络基础知识

• MVC

• Chrome 开发者工具

Web 基础知识（html + css + javascript）

这些都是你 Web 开发者生涯中的朋友，与其说是兄弟姐妹，不如说是挚友。几乎每个网站都会用到它们。当然，很多网站可能都会用到“模板引擎”，比如“jinja”、“blade”之类的。这些模板引擎和 HTML 非常相似，好像都是从 HTML 实例化的。如果你不熟悉模板引擎，它们本质上和 HTML 类似，但更加动态。后端开发人员主要使用它们来构建动态后端应用程序。所以 HTML 只是一种标记语言，并不具备动态性，所以它不是一种编程语言。CSS 是 HTML 的魅力所在，赋予了它更美观的外观。CSS 不仅仅关乎颜色，还关乎定位、样式、动画等等。你可以只用 HTML 和 CSS 来制作互动游戏。说到互动性，JavaScript 就派上用场了。JavaScript 是浏览器的语言，它的主要功能是创建交互式 UI，但如今它的功能远不止于此。现在，你可以用它做任何事情。您可以创建移动、网络、桌面、机器学习应用程序。

API（应用程序编程接口）

作为一名 Web 开发者，掌握 API 至关重要。即使您是前端开发者，您也需要了解 API 是什么、它们如何工作以及我们为什么使用它们。以下简要介绍一下您需要了解的内容。您可以把“API”想象成餐厅里的服务员。您点餐、取餐、享用，而无需询问菜谱和食材，或者更准确地说，无需询问厨房里正在做什么。对这个解释还不满意？API 代表应用程序编程接口 (API)。它使您的应用程序能够轻松地与其他应用程序（应用程序、服务器、数据库）连接并进行通信。API 种类繁多。您的冰箱里可能就有一个！

这是一个真实的例子，假设你想构建一个天气应用。它的主要功能是显示天气，如果在输入框中输入一个城市，该城市的天气就会弹出。所以你可能会问自己，我该如何获取这些天气数据？在哪里获取？如果天气一直在变化，我该如何扩展我的应用以获取实时数据？嗯，这就是 API 的作用。它可以让你获取实时数据并将其包含在你的应用中，而无需担心任何事情或从头开始编写代码。一个类似的例子是股票市场、比特币价格和货币兑换。如果你想深入了解，请参阅这篇文章。

API 简介

Vikram Sharma ・ 2020 年 3 月 15 日 ・ 阅读时长 6 分钟

#api

Git 和 Github

Git 是一款非常便捷易学的工具。那么它到底是什么呢？Git 只是一个命令行工具，但它比普通枯燥的 Windows 终端功能更强大。你可以将源代码上传、更新、版本控制、维护和管理到像 GitHub 这样的托管网站。而且，托管代码的网站不止 Github。还有很多网站可以托管你的代码，比如 GitLab（被公认为 GitHub 的最佳替代品）、bitbucket、beanstalk、SourceForge、GitKraken 和 AWS CodeCommit。所以，Git 不仅仅与 Github 相关。

数据库

在这个时代，世界运转依赖于数据。可以说，数据就是虚拟的黄金。因此，数据库是任何包含数据的容器。你的手机、电脑，甚至你的购物清单，都只是数据库的另一种形式。有些数据库是关系型的，这些显然被称为关系数据库，例如 MYSQL、MS SQL SERVER、IBM、ORACLE、POSTGRESQL；有些则是非关系型的，例如 MONGOBD、FIREBASE 等。它们在结构、操作、规模和功能方面各不相同。即使你是一名前端开发人员，我仍然认为掌握一些数据库知识将非常有益。

网络基础知识

这是必须的，尤其是如果你在后端工作，因为你以后的职业生涯中可能会接触到类似 DevOps 的东西。你需要了解什么是 IP、TCP、UDP、DNS、NAT、路由器，以及 HTTP 和 HTTPS 之间的区别。互联网是如何工作的？在搜索栏上输入域名会发生什么？什么是端口？如果这些名称和缩写让你感到害怕，没关系。每个人都经历过。当然，你不需要急于求成，因为这个领域非常庞大。它是一个完整的领域。这是我在 Medium 上找到的最好的文章。

开发人员需要学习基础网络工程 | 作者：Tate Galbraith | Better Programming | Medium

泰特·加尔布雷斯・2020年2月9日・阅读时间：5分钟

中等的

MVC

MVC 代表模型视图控制器 (Model View Controller)。它用于构建、管理和组织您的 Web 应用。它是一种设计模式。如果您不熟悉“设计模式”这个术语，可以将其视为软件设计中常见问题的常用解决方案。您可能会问还有其他设计模式吗？当然，请记住，它不是代码。它只是一种创建应用程序的方式。设计模式通常用于面向对象编程 (OOP) 语言，例如 Java、C#、PHP 等。那么，什么是模型、视图和控制器呢？

模型：处理数据、数据库和迁移，基本上是数据业务。

视图：处理界面（HTML + CSS + Javascript）以用户可以轻松处理的友好方式显示数据。

控制器：可以将其视为中间件。它指示在哪个界面显示哪些数据。它处理 HTTP 响应（POST-GET-UPDATE-DELETE）。它处理请求和 URL。

让我们用一个简单的例子来总结一下：如果你想点赞这篇文章（我觉得你应该点赞 :)），你会点击那个心形按钮。接下来会发生什么呢？你会通过一个控制器向服务器发送一个“POST”请求，这会将数据库（模型）中我这篇文章的点赞数加 1，并且图标会变成红色（视图）。你可能会问为什么页面加载不出来？嗯，这是因为（AJAX：一种与 JavaScript 相关的技术，它向页面发出异步请求，以在不刷新页面的情况下执行某些操作）。至少现在你不需要担心 AJAX。

Chrome 开发者工具

您可能喜欢 Mozilla，但说到开发，您更倾向于使用 Chrome。您知道 Chrome 的用户大多是开发者吗？它或许有一些缺点，比如占用内存，但它仍然是您的首选。Chrome 的强大之处在于它提供了一系列便捷的工具，可以加快开发流程、轻松调试、测试网站的响应速度以及实时编辑（HTML 或 CSS）。要打开 Chrome 开发者工具，请按 CTRL+SHIFT+I。

这里有一些技巧。

使用 (CTRL+P) 通过项目访问任何文件。

使用 (CTRL+SHIFT+F) 搜索当前页面的源代码。

使用 (CTRL+CLICK) 添加多个光标。

使用 (CTRL+SHIFT+M) 测试响应式设计。

清单很长。还想了解更多？点击这里。

结论

如果你能走到这一步，你应该为自己感到自豪。好了，以上就是我对这个问题的反思，记住，无论你是初级还是高级开发人员，你都需要学习很多东西。你将不断学习和成长。如果这篇文章有点无聊，我很抱歉。祝你事业有成，感谢阅读 :)