如何使用 VueJS 将数据从 Java servlet 正确传递到 HTML 文件答案

【问题标题】：How to pass data correctly from a Java servlet to an HTML file with VueJS如何使用 VueJS 将数据从 Java servlet 正确传递到 HTML 文件
【发布时间】：2020-11-18 17:39:14
【问题描述】：

所以基本上我试图将 JSON 从 servlet 传递到也使用 VueJS 的 HTML 页面。

这就是我从 servlet 转发 json 数据的方式：

    List<Projects> list = projectInfo.getProjects();
    Gson gson = new Gson();
    String json = gson.toJson(list);
    req.setAttribute("projects", json);
    req.getRequestDispatcher("/WEB-INF/projectMaint.html").forward(req, resp);

因此，在此之后，我尝试在 HTML 页面中运行 Vue，如下所示：

<script type="text/javascript">
var app = new Vue({
el: '#test-app',
data: {
    json: projects
}
})
</script>

但是我不确定如何“获取”我传递的 json 数据属性。我知道 servlet 每次都在运行，但我对如何获取它感到困惑。这可能是微不足道和基本的，但任何帮助表示赞赏。

【问题讨论】：

这个：“但是我不确定如何“获取”我传递的 json 数据属性。” - 你不能（除非 projectMaint 实际上是一个 JSP ）。您要么 1. 必须使用服务器上的模板系统将数据包含到页面中，要么 2. 使用单独的端点和第二个请求来请求/检索 Vue 应用程序的数据。

标签： javascript java html vue.js

【解决方案1】：

首先你可以将你的html页面制作成jsp，这样你就可以使用组件props和jsp的表达语言来绑定从服务器端提供的信息，例如：

<testApp project-list="${projects}"/>

<script type="text/javascript">
var app = new Vue({
el: '#test-app',
props: {
projectList: String
},
data: {
    json: projects
}
})
</script>

在此之后，您可以根据需要将道具绑定到数据或直接使用 this.projectList 或者您可以创建另一个端点来获取 json

【讨论】：