如何更改 javascript [客户端] 中不同阶段的端点？

Question

我想之前可能有人问过。但我无法根据我的搜索关键字找到任何结果。

在我的用例中，我根据阶段信息 [桌面、预生产、生产] 配置端点。我在后端使用 golang。在后端，我使用 APP_STAGE 环境变量来读取相应的配置。例如，

fileName =  APP_STAGE + "-endpoints.cfg"

并且我在启动服务器之前导出变量。

$export APP_STAGE="desktop"

桌面-endpoints.cfg看起来像这样，

{
    "featured" : {
        "httpendpoint": {
            "url": "http://localhost:8081/api/services/featured/"
        }

    },
    "latest" : {
        "httpendpoint": {
            "url": "http://localhost:8081/api/services/latest/"
        }

    }
}

但是我怎样才能在客户端实现这个 [javascript]？我有以下结构的文件，

app/
    view.js
    featured.js
    home.js

每个文件使用不同的端点进行 ajax 调用。如何根据 javascript 中的某些变量 [if not env variable] 读取阶段配置？

有人可以帮我解决这个问题吗？我是 javascript.

的新手

谢谢。

Answer 1

JavaScript 文件由浏览器在客户端执行。浏览器无法访问服务器配置文件，因此服务器有责任 read/get 正确的配置值并使它们对客户端可用。有多种方法可以解决这个问题。我将概述一些可能的解决方案。

1。在 HTML 文件

中包含正确的端点

您可以选择在 HTML 文件中包含正确的端点，这些文件引用将在其中使用它们的 javascript 文件。

HTML 文件是模板而不是静态文件，您可以使用 html/template 包来执行这些模板以包含必要的 URL 和您需要的所有其他内容，并生成最终文件HTML 将发送给客户。

HTML 模板可能包含一个 <script> 标签初始化某些 JavaScript 变量，然后可以从包含的 JavaScript 文件中使用。

这是一个传递精选 httpendpoint.

的简单示例

HTML 模板 ("home.html"):

<html>
<head>
    <script>
        var featuredHttpEndpoint = "{{.FeaturedHttpEndpoint}}";
    </script>
    <script src="view.js"></script>
    <script src="featured.js"></script>
    <script src="home.js"></script>
</head>
<body>Your body</body>
</html>

以及将为该 HTML 模板提供服务的处理程序：

var homeTempl = template.Must(template.New("").ParseFiles("home.html"))

func homeHandler(w http.ResponseWriter, r *http.Request) {
    m := map[string]interface{}{
        // Insert the value of endpoint from your config
        "FeaturedHttpEndpoint": "http://localhost:8081/api/services/featured/",
    }
    if err := homeTempl.Execute(w, m); err != nil {
        // Handle error
    }
}

映射主处理程序，例如：

http.HandleFunc("/index.html", homeHandler)

并确保主页未被缓存，这样浏览器将始终请求一个新的副本，您的服务器可以在其中插入实际的配置值。

2。从 JavaScript 个文件

执行 AJAX 请求

您可以选择从 JavaScript 文件执行 AJAX 请求以查询必要的信息。可以在这个问题中找到一个简单的例子：Dynamically refresh a part of the template when a variable is updated golang

在现实生活中的例子中，您将通过一个请求传输客户端需要的所有配置值（例如 JSON 格式），这里我只传输一个值。

仅获取/发送特色httpendpoint:

在JavaScript中：

var featuredHttpEndpoint = "";
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
    if (xhr.readyState == 4 && xhr.status == 200) {
        var config = JSON.parse(xhr.responseText);
        featuredHttpEndpoint = config.FeaturedHttpEndpoint;
    }
}
xhr.open("GET", "/config.json", true);
try {
    xhr.send();
} catch (err) {
    // handle error
}

Go 处理程序提供配置值：

func configHandler(w http.ResponseWriter, r *http.Request) {
    w.Header().Set("Content-Type", "application/json")
    m := map[string]interface{}{
        // Insert the value of endpoint from your config
        "FeaturedHttpEndpoint": "http://localhost:8081/api/services/featured/",
    }
    if err := json.NewEncoder(w).Encode(m); err != nil {
        // Handle error
    }
}

必须映射到客户端调用的路径，例如：

http.HandleFunc("/config.json", configHandler)

3。使用 Javascript 个文件作为模板

您还可以选择制作 Javascript 文件模板，并且在提供它们时，您可以使用模板引擎根据您的环境/APP_STAGE 包含端点。请参阅第 1 点作为服务模板的示例。

如果你沿着这条路走下去，你必须注意正确配置 Javascript 文件的缓存，因为浏览器不会再次要求你提供 js 文件，如果他们的缓存信息表明他们没有过期。

如何更改 javascript [客户端] 中不同阶段的端点？

How to change endpoints for different stages in javascript [client side]?

javascript

environment-variables

production-environment

go

endpoint

1。在 HTML 文件

2。从 JavaScript 个文件

3。使用 Javascript 个文件作为模板