【问题标题】:How to use localhost (any port) with frontend languages or frameworks?如何将 localhost(任何端口)与前端语言或框架一起使用?
【发布时间】:2019-06-22 14:18:01
【问题描述】:

我正在创建一个新网站,前端使用 HTML、CSS、js,后端使用 Java(我不懂 Java,我的朋友会做 java 部分),我需要使用前端技术(语言/框架)使用localhost

我找不到用于此目的的前端技术。我已经尝试过python -m SimpleHTTPServer 和 node.js,但由于这些是后端,我无法使用它们。另外,我无法更改我的后端语言

【问题讨论】:

  • 开始here 并阅读指南中的所有内容。
  • 您可以使用任何后端进行开发。对于生产,真正的后端必须交付您的应用程序
  • 我正在用 html、css、js 制作一个新网站我找不到为此目的的前端技术:我想你已经找到了前端技术,因为您的浏览器肯定支持所有这些。 localhost 作为 URL 的一部分并没有什么特别之处。它只是一个主机名。
  • @Pointy 我需要本地主机来测试和运行
  • 这完全没有意义。您可以在您有权访问的任何计算机上运行服务器。术语“前端”是指客户端(浏览器)中的代码。

标签: javascript html css localhost


【解决方案1】:

这里重要的是你需要理解backendfrontend这两个术语。

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

现在,根据定义,在该服务器上运行的每个代码都是后端。在用户浏览器中运行的所有代码都被视为前端。如果网站只包含服务器生成的 HTML 和 CSS,那么进行这种分离就没有多大意义。这意味着如果我们同时拥有前端和后端,我们只会讨论它们。

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

让我们看一个小例子。如果用户在浏览器中输入example.com,浏览器将向example.com 发出HTTP GET 请求。服务器(以及后端)将响应一个 HTML 文件。该文件现在可以嵌入带有<script src="/code.js"> 的javascript 文件。现在浏览器对example.com/code.js 执行另一个HTTP GET 并且服务器(以及后端)返回该文件。在该文件中可能有一些在浏览器中执行的前端代码。 现在也许这个文件想要从后端加载一些数据。所以它做了一个fetch('/api/data). The browser does anotherHTTP GETtoexample.com/api/data` 并且后端必须响应。现在,虽然后端相对而言是愚蠢的,并且只交付了文件,但它现在实际上可以执行一些逻辑。也许从数据库等加载数据。然后它将数据发送到前端,然后前端可以使用该数据做一些事情。

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

因此,根据定义,您想要的是不可能的。前端在浏览器中运行,因此无法在 localhost 上交付代码。如果可以,它将成为后端。

现在,虽然真正的后端在生产环境中交付前端代码很常见,但在开发中并不常见。拥有一个仅用于开发的单独的简约服务器是很常见的。 python -m SimpleHTTPServer 就是这样一个工具,因此可以完成这项工作。

有时这也在生产中完成。然后你的后端是example2.com,你的前端是example.com。但这必不可少意味着运行第二个后端只是为了交付前端。通常对于生产来说,这是一个成熟的 Web 服务器,例如 nginxapacheIIS(你需要 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) 即可获取您的数据,并且此 Javascript 不得由 example.com 交付,它会正常工作。但是 CORS 使安全性复杂化。

【讨论】:

    猜你喜欢
    • 2011-11-25
    • 1970-01-01
    • 2015-07-12
    • 2021-08-06
    • 2019-11-25
    • 1970-01-01
    • 2014-08-26
    • 2015-04-07
    • 1970-01-01
    相关资源
    最近更新 更多