我对前端编程非常陌生，所以请多包容。在学校里，我们学习了像Java、C#、Python、C和一些C++这样的后端编程语言。作为一种爱好，我自己尝试学习前端编程，所以我从Vue、JavaScript、HTML和CSS入手。在学校里，我们通常在终端中运行代码（用于后端编程），例如我们做了一个冒泡排序算法，然后我们提供一些用户输入（通过终端），然后调用冒泡排序来对输入进行排序。问题是，当我在后端编写程序并想要制作一个网站时，如何将我的后端与前端连接起来呢？以编写一个简单的网页为例，我编写了一个程序，用冒泡排序对我的数字进行排序，然后我希望能够让用户在网站上编写一个数组，然后点击“排序”按钮。当他/她点击时，应该调用我的后端冒泡排序函数等等。我已经在谷歌上搜索过了，但我只能找到其他网站提供的制作网站服务，我想从零开始编程后端和前端，并将它们连接在一起。有办法吗？如果有，每种语言都有其自己的方法，还是有一个共同的方法？我的意思是，也许我为一个网站使用Java编写后端，但为另一个网站使用Python编写后端。连接后端和前端的方法有区别吗？
5个回答
20
这个问题相当模糊。
现在有多种前端连接到后端的方式。让我们看看。但首先让我们回顾一下。
前端：指客户端。用户与之交互的UI。
示例框架：ReactJS（JS / TS），VueJS，Angular等
后端：指服务器端工作，如身份验证，数据获取等。
示例框架：NodeJs（JS / TS），Django，ASP.NET等
HTML，CSS和JS是网站的构建块。随着时间的推移，我们得到了像Sprint（Java），asp.net（c＃），django（python）等框架。它们可能在它们所构建的语言上有所不同。但它们都遵循相同的模式。一些常见的设计体系结构包括：
1. Model-View-ViewModel（MVVM） 2. Model-View-Controller（MVC） 3. 3层架构
有关MVC和MVVM的区别，请查看此answer 现在，开发人员根据项目选择其中任何一种模式。但这只是可以使用任何框架实现的架构。
前端和后端如何通信是另一回事。假设您和我都被要求创建学校管理系统。
您选择Angular（前端）和asp.net（后端）。另一方面，我选择了ReactJS（前端）和Nodejs（后端）。我们都可以实现相同的目标。但使用不同的语言。
API vs模板：这是我们的应用程序在前端和后端之间建立通信的两种不同方式。
1. 模板：
模板引擎使您能够在应用程序中使用静态模板文件。在运行时，模板引擎将模板文件中的变量替换为实际值，并将模板转换为发送到客户端的HTML文件。这种方法使设计HTML页面更容易。
2. API：API代表应用程序编程接口，它是允许两个应用程序彼此交谈的软件中介。
假设您学校门户网站的用户输入他的姓名和密码并点击登录。那将向后端发送一个帖子请求，您编写的后端将检查用户是否真实。如果身份验证成功，则后端将发送一条消息，用户将导航到门户网站的仪表板。
有关何时选择模板与API的更好理解，请参见此post 关于您提供的例子，即冒泡排序。实际上，您不需要后端并开发API来显示排序数据。通常，后端用于处理身份验证、授权、受保护数据等网站，如电子商务。
尽管如此，您可以为这样的项目拥有后端。您将需要将数据发送到服务器端，该服务器端将对数组进行排序并将排序结果发送回来。
请参阅有关API/模板化的部分，以选择您喜欢的方法。希望您对如何操作应用程序有一个良好的理解。
现在有多种前端连接到后端的方式。让我们看看。但首先让我们回顾一下。
前端：指客户端。用户与之交互的UI。
示例框架：ReactJS（JS / TS），VueJS，Angular等
后端：指服务器端工作，如身份验证，数据获取等。
示例框架：NodeJs（JS / TS），Django，ASP.NET等
HTML，CSS和JS是网站的构建块。随着时间的推移，我们得到了像Sprint（Java），asp.net（c＃），django（python）等框架。它们可能在它们所构建的语言上有所不同。但它们都遵循相同的模式。一些常见的设计体系结构包括：
1. Model-View-ViewModel（MVVM） 2. Model-View-Controller（MVC） 3. 3层架构
有关MVC和MVVM的区别，请查看此answer 现在，开发人员根据项目选择其中任何一种模式。但这只是可以使用任何框架实现的架构。
前端和后端如何通信是另一回事。假设您和我都被要求创建学校管理系统。
您选择Angular（前端）和asp.net（后端）。另一方面，我选择了ReactJS（前端）和Nodejs（后端）。我们都可以实现相同的目标。但使用不同的语言。
API vs模板：这是我们的应用程序在前端和后端之间建立通信的两种不同方式。
1. 模板：
模板引擎使您能够在应用程序中使用静态模板文件。在运行时，模板引擎将模板文件中的变量替换为实际值，并将模板转换为发送到客户端的HTML文件。这种方法使设计HTML页面更容易。
2. API：API代表应用程序编程接口，它是允许两个应用程序彼此交谈的软件中介。
假设您学校门户网站的用户输入他的姓名和密码并点击登录。那将向后端发送一个帖子请求，您编写的后端将检查用户是否真实。如果身份验证成功，则后端将发送一条消息，用户将导航到门户网站的仪表板。
有关何时选择模板与API的更好理解，请参见此post 关于您提供的例子，即冒泡排序。实际上，您不需要后端并开发API来显示排序数据。通常，后端用于处理身份验证、授权、受保护数据等网站，如电子商务。
尽管如此，您可以为这样的项目拥有后端。您将需要将数据发送到服务器端，该服务器端将对数组进行排序并将排序结果发送回来。
请参阅有关API/模板化的部分，以选择您喜欢的方法。希望您对如何操作应用程序有一个良好的理解。
- user14709104
1
非常感谢您的解释，现在我对此有了更好的理解。 - Mohammed
4
您所尝试实现的最常用方式是使用HTTP方法，我建议您尝试使用REST架构，您的后端将成为一个单一的Web服务，响应来自前端的HTTP请求。
例如：您的前端向后端发送一个POST请求，您的后端将处理冒泡排序函数并向前端发送响应。
尝试搜索有关REST架构的文档，您会找到很多信息。此外，如果您正在使用Java或Python，您可以轻松地使用Java的Spring Boot框架或Python的Flask实现REST API。
按照这篇指南，您可以在Java中创建一个简单的REST API，然后从前端只需要对创建的API进行HTTP请求即可。
例如：您的前端向后端发送一个POST请求，您的后端将处理冒泡排序函数并向前端发送响应。
尝试搜索有关REST架构的文档，您会找到很多信息。此外，如果您正在使用Java或Python，您可以轻松地使用Java的Spring Boot框架或Python的Flask实现REST API。
按照这篇指南，您可以在Java中创建一个简单的REST API，然后从前端只需要对创建的API进行HTTP请求即可。
- Jaime Lopez
1
谢谢，这正是我所询问的。我会尽力寻找更多信息！ :) - Mohammed
1
尝试使用MVC或ASP.NET，我曾经也面临同样的困境，不知道如何将它们结合起来。直到我接触到MVC。
MVC能够完美地将前端部分（View）和后端控制器（Controllers）实现无缝连接。在Visual Studio中搜索并开始尝试吧。
- MERLIN
1
谢谢，我会去看看的！ - Mohammed
1
通常每种编程语言都涉及到HTTP请求，它们之间有着相互联系，例如所有的编程语言都使用POST、GET和PATCH来处理HTTP请求，并且它们都使用内置方法来处理这些请求。基本上就是这样：
- 用户点击按钮（发送请求）
- 服务器接收请求
- 您处理请求
- 然后通过HTTP协议发送结果。
- 然后重复此过程，但如何发生这种情况取决于您的方法。具体如下：
- 单块应用程序：您将在同一位置拥有后端代码和前端，并且它们将通过方法和编程语言本地函数进行通信以共享数据。优点是一旦所有内容都在同一位置，更容易维护。缺点是它不太容易扩展，而且一旦代码本身太紧密，调试就很困难。
- 客户端-服务器：您将在一个服务器上拥有后端代码，在另一个服务器上拥有所有前端代码，它们通过API或gRPC进行通信。优点是每个服务器提供的服务可以独立工作，这使得调试、扩展和外包代码更容易，甚至更容易维护。但它比单块更难，因为通常您将处理两个服务器和两个存储库。
我的建议
我认为你需要决定自己想要专注于哪个方向，如果是后端开发，那么应该学习像PHP、Go、Node这样的编程语言，MySQL、PostgreSQL这样的数据库，并学习如何在所选语言中创建RESTful API。当你有足够的理解水平可以从头开始创建一个从数据库检索数据的API时，你应该开始学习一些前端知识，比如Vue、Svelte或React。我不建议你像上课一样学习HTML、CSS和JS，直接进入框架并让你的疑问引导你的路径（只搜索你不理解的内容）。
但如果你选择前端开发，那么应该先从CSS、HTML和JS的基础知识入手，但只需学习一个月左右，然后转向像React、Vue、Svelte等JS框架。重点是通过实践和研究掌握技能，然后再学习一些后端知识，比如如何创建API以便你可以使用它。
关键是要选择一个方向，学习其基本原理，至少要学到能够用来表达自己的想法，然后再补充其他部分的知识。
- Victorino Kioza
1
整合后端与前端是开发完全功能的网页应用程序中至关重要的一步。很高兴你问到这个问题，因为对于那些刚接触网页开发的人来说，这可能有点棘手。但别担心，我会给你解释清楚！
所以，要将后端与前端整合起来，首先你需要明白它们是应用程序的两个独立部分。后端负责处理所有服务器端操作，如数据存储、处理和处理用户请求，而前端则负责用户界面和用户交互。将它们连接在一起的魔法是API（应用程序编程接口）。API充当中介，允许前端和后端之间进行通信。当用户与你的网页应用程序交互时，前端通过API向后端发送请求，后端处理这些请求，并将必要的数据发送回前端以显示。就像是连接这两个部分的桥梁！
所以，要将后端与前端整合起来，首先你需要明白它们是应用程序的两个独立部分。后端负责处理所有服务器端操作，如数据存储、处理和处理用户请求，而前端则负责用户界面和用户交互。将它们连接在一起的魔法是API（应用程序编程接口）。API充当中介，允许前端和后端之间进行通信。当用户与你的网页应用程序交互时，前端通过API向后端发送请求，后端处理这些请求，并将必要的数据发送回前端以显示。就像是连接这两个部分的桥梁！
- Mayur Badkat
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接