如何连接后端和前端

Question

我对前端编程还很陌生，所以请多多指教。在学校，我们学习了后端编程语言，如 Java、C#、Python、C 和一些 C++。作为一个爱好，我自己尝试学习前端，所以我从 Vue、JavaScript、HTML 和 CSS 开始。在学校，我们通常在终端运行我们的代码（用于后端编程），例如我们做了一个冒泡排序算法，然后我们提供一些用户输入（通过终端），然后调用冒泡排序对输入进行排序。问题是当我在后端编写程序并想为其创建网站时，如何将后端连接到前端？让我们以一个简单的 webpge 为例，我编写了一个程序，用冒泡排序对我的数字进行排序，然后我希望能够让用户在网站上编写一个数组，然后单击“排序”按钮。当他/她点击它时，我的后端冒泡排序函数应该被调用等等。我在谷歌上搜索过，但我能找到的是其他提供网站服务的网站，我想从头开始对后端和前端进行编程并将它们连接在一起。有办法吗？如果是，是每种语言都有自己的方式还是有共同的方式？我的意思是也许我用 Java 为一个网站编写后端，但另一个网站我用 Python 编写它。那么如何连接后端和前端有区别吗？ 提前致谢。

Answer 1

最常用的方法是使用 HTTP 方法， 我建议您尝试使用 REST 架构，您的后端将是一个响应来自前端的 HTTP 请求的单一 Web 服务。

例如：您的前端向您的后端发送 POST 请求，您的后端将处理冒泡排序功能并将响应发送回您的前端。

尝试谷歌搜索有关 REST 架构的文档，您会发现很多信息，如果您使用的是 Java 或 Python，您也可以使用 Spring Boot 框架和 Java 或 Flask 和 Python 轻松实现 REST API。

按照 this guide，您可以在 Java 中创建一个简单的 REST API，然后从前端您只需要向您创建的那个 API 发出 HTTP 请求。

Answer 2

尝试 MVC 或 ASP.NET，我有同样的挣扎，我知道两者，但不知道在哪里组合它们。直到我遇到了 MVC。

它结合了完美的同化，其中您拥有前端部分（视图）和作为后端的控制器。在 Visual Studio 上搜索并开始试用。

Answer 3

问题很模糊

现在前端连接后端有多种方式。让我们来看看。但首先让我们回顾一下。

前端：指客户端。用户与之交互的 UI。

示例框架：ReactJS(JS/TS)、VueJS、Angular 等

后端：指服务器端的工作，如身份验证、数据获取等。

示例框架：NodeJs(JS/TS)、Django、ASP.NET 等

HTML、CSS 和 JS 是网站的基石。随着时间的推移，我们得到了 Sprint(Java)、asp.net(c#)、django(python) 等框架。它们可能在构建的语言上有所不同。但它们都遵循相同的模式。一些常见的设计架构是：

1. 模型–视图–视图模型 (MVVM)
2. 模型-视图-控制器 (MVC)
3. 3 层架构

有关 MVC 和 MVVM 的差异，请检查此 answer

现在开发人员根据项目选择任何一种模式。但这只是可以使用任何现有框架实现的架构。

前端和后端的通信方式是另一回事。假设你和我都负责创建学校管理系统。

您选择了 Angular（前端）和 asp.net（后端）。另一方面，我选择了 ReactJS（前端）和 Nodejs（后端）。我们都可以实现相同的目标。但使用不同的语言。

API 与模板：这是让我们的应用程序在前端和后端之间建立通信的两种不同方式。

1. 模板：

<块引用>

模板引擎使您能够在应用程序中使用静态模板文件。在运行时，模板引擎用实际值替换模板文件中的变量，并将模板转换为发送给客户端的 HTML 文件。这种方法可以更轻松地设计 HTML 页面。

2. API： API 代表应用程序编程接口，它是一种软件中介，允许两个应用程序相互通信。 假设您学校门户中的用户输入他的姓名和密码并点击登录。这将向后端发送一个发布请求，您编写的后端将检查用户是否真实。如果身份验证成功，后端将发送一条消息，用户将导航到门户的仪表板。

要更好地了解何时选择模板与 API，请参阅此 post

现在关于您提供的示例，即冒泡排序。您实际上不需要后端并开发 API 来显示已排序的数据。通常，处理身份验证、授权、受保护数据等的网站（如电子商务）需要后端。

也就是说，您可以为这样的项目设置一个后端。您必须将数据发送到服务器端，服务器端将对数组进行排序并将排序后的结果发回。

请参阅 API/模板部分以选择您的首选方法。希望您对如何使用您的应用程序有一个很好的理解。