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

因此，从本质上讲，我试图将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);

List List=projectInfo.getProjects（）；
Gson Gson=新的Gson（）；
字符串json=gson.toJson（列表）；
setAttribute（“项目”，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>

var app=新的Vue({
el:“#测试应用程序”，
数据：{
json：项目
}
})

---

但是，我不确定如何“获取”我正在传递的json数据属性。我知道servlet每次都在运行，但我对如何获取它感到困惑。这可能是琐碎和基本的，但任何帮助都值得感谢。

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

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

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

var app=新的Vue({
el:“#测试应用程序”，
道具：{
项目列表：字符串
},
数据：{
json：项目
}
})

在此之后，如果需要，您可以将道具绑定到数据，或者直接使用

this.projectList

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