将从服务器传递的变量导出到HTML以便可以在javascript模块中使用的最佳做法是什么？

Question

假设我正在提供一个Web应用程序，而我的服务器正在将一个对象传递给前端，如下所示：

{
   user_name : "Robert",
   user_settings : {/*some settings object*/}
}

如果我想在例如main.js中访问此信息，过去我只是在html文件中将此信息设置为全局信息。 （例如）：

<html>

    <head>
      <title>Example Page</title>
    <!-- style links would go here -->
    </head>

    <body>

    <!-- script tags would go here -->

        <script>
           window.server_json = {
               user_name : "Robert",
               user_settings : {/*some settings object*/}
           }
        </script>
    </body>
</html>

这似乎与我们如今使用webpack和babel编写javascript的方式似乎并不匹配。 我希望能够导出该对象并在其他文件中使用它，同时避免使用全局变量。

我不确定该怎么做，但我想它看起来像这样：

（Example.html）

<html>

    <head>
      <title>Example Page</title>
    <!-- style links would go here -->
    </head>

    <body>

    <!-- script tags would go here -->

        <script>
           export default json = {
               user_name : "Robert",
               user_settings : {/*some settings object*/}
           }
        </script>
    </body>
</html>

（Main.js）

import json from "./Example.html";
//Do something with the data received from the server

在当前项目中，我正在使用webpack，babel和vue.js。 几个小时以来，我一直在寻找某种方法来完成此操作，希望能对您有所帮助。

编辑：

为了明确起见，将使用PHP和slim框架从服务器发送数据。 它看起来像这样：

$app->get('my/page', function($request, $response){
    return $this->view->render($response, 'my_page.html', [
        "user_name" => "Robert",
        "user_settings" => [/*some settings object*/]
    ]);
});

Answer 1

您可以使用vue-resource插件从服务器请求数据。 您可以使用Web Storage API在客户端上缓存数据。

将从服务器传递的变量导出到HTML以便可以在javascript模块中使用的最佳做法是什么？

问题描述

1 个解决方案

解决方案1
0 2016-11-17 20:28:43

将从服务器传递的变量导出到HTML以便可以在javascript模块中使用的最佳做法是什么？

问题描述

1 个解决方案

解决方案1 0 2016-11-17 20:28:43

解决方案1
0 2016-11-17 20:28:43