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

Question

所以基本上我试图将 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 每次都在运行，但我对如何获取它感到困惑。这可能是微不足道的和基本的，但任何帮助表示赞赏。

标签： javascriptjavahtmlvue.js

Answer 1

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

<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