javascript - 如何将localhost(任何端口)与前端语言或框架一起使用？

Question

我正在用HTML，CSS，前端JS和后端Java（我不知道Java，我的朋友会做Java的一部分）创建一个新网站，并且我需要使用前端技术（语言/框架）来使用< cc>

我找不到用于此目的的前端技术。我已经尝试过localhost和node.js，但是由于它们是后端，因此无法使用它们。另外，我无法更改后端语言

Answer 1

这里重要的是您需要了解术语“后端”和“前端”。

根据定义，网站是可以使用HTTP从服务器上加载的网站，它由HTML以及CSS和/或Javscript组成。

现在，根据定义，在该服务器上运行的每个代码都是后端。在用户浏览器中运行的所有代码均被视为前端。如果网站仅包含由服务器生成的HTML和CSS，则执行此分隔没有多大意义。这意味着我们只有同时讨论前端和后端。

这也意味着在浏览器中运行的前端代码必须由后端交付。没有后端的前端将不存在。

让我们看一个小例子。如果用户在浏览器中输入example.com，浏览器将向HTTP GET发出example.com请求。服务器（以及后端）将使用HTML文件进行响应。现在，该文件可以使用<script src="/code.js">嵌入javascript文件。现在，浏览器对HTTP GET执行另一个example.com/code.js，服务器（以及后端）返回该文件。该文件中可能包含一些在浏览器中执行的前端代码。
现在，也许此文件想要从后端加载一些数据。因此它会执行fetch('/api/data）. The browser does another HTTP GET to example.com / api / data`，后端必须响应。现在，虽然后端相对笨拙，只传送文件，但实际上它可以执行一些逻辑。也许从数据库之类的数据库中加载数据。然后，它将数据发送到前端，然后前端可以使用该数据执行某些操作。

这意味着在生产中，您的后端必须交付前端代码。在此示例中，初始HTML文件和code.js文件。

因此，根据定义，您想要的是不可能的。前端在浏览器中运行，因此无法在本地主机上传递代码。如果可以的话，它将成为后端。

现在，尽管真正的后端在生产中提供前端代码是很常见的，但对于开发却不常见。具有单独的仅用于开发的简约服务器是很常见的。 python -m SimpleHTTPServer是这样的工具，因此可以完成工作。

有时，这也可以在生产中完成。然后，您的后端位于例如example2.com上，而前端则由example.com传递。但这很重要，这意味着要运行另一个后端只是为了交付前端。通常用于生产时，这是功能完善的Web服务器，例如nginx，apache或IIS（您需要CORS，请参见下文）。与之相反，不应将python -m SimpleHTTPServer之类的工具用于生产。

现在，这意味着您基本上可以使用任何种类的后端来交付用于开发的前端。稍后，您将把代码提供给您的后端开发人员，然后他将与后端一起部署它。但是，有一个悬而未决的问题：

您的前端和后端将如何通信？

在生产中，您的前端只能fetch某项，并且如果您的后端提供了前端，它将可以正常工作。但是对于开发（以及测试）而言，您可能已经想要使用后端而无需在计算机上实际启动它。为此，基本上有两种方法。

首先，您的开发后端可以将未知请求代理到后端。这意味着，如果您的真实后端在example.com上运行，并且在localhost上启动开发服务器，则该服务器会将所有不是现有文件的请求代理到example.com。因此，如果您请求localhost/code.js并且文件code.js确实存在，则服务器将使用该文件进行响应。如果请求localhost/data并且没有名为data的文件，则服务器应向example.com/data发出请求并返回该响应。这是很常见的。根据用于前端开发的工具，库和框架，它们具有具有该功能的集成开发服务器。例如，如果您使用ember.js开发，则可以执行ember server --proxy=http://example.com。它将以完全相同的行为在localhost:4200上运行服务器。其他工具，例如create-react-app允许相同。

其次，您可以使用CORS。这必须由后端实现，并允许来自其他服务器的前端访问后端。如果您像我之前描述的那样从两个不同的服务器运行前端和后端，也需要这样做。
如果后端正确实现了CORS，则只需执行fetch('example.com/data）即可获取数据，并且example.com不得传递此Javascript，它将可以正常工作。但是，CORS使安全性复杂化。