Question

经过几个小时的谷歌研究，我还没有找到一个教程，展示如何使用vue.js来显示sql查询的结果（例如我的情况下的SELECT）。我来找你，因为我需要知道如何通过带有framwork vue.js的html页面中的spring findAll（）方法检索和显示数据。提前感谢您的帮助。

这是我要在其中显示数据的html文件：

<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>List of school</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
  <div id="test">
    <h1>Result</h1>
    <tr>
        <td/>ID</td>
        <td/>Description</td>
    </tr>
    <tr v-for="item in panier">
        <td>{item.id}</td>
        <td>{item.description}</td> 
    </tr> 
  </div>

  <script src="http://cdn.jsdelivr.net/vue/1.0.10/vue.min.js"></script>
    <script>
       new Vue({
        el: '#test',
        data: {
          panier: [
            { id: "1", description: "University"},
            { id: "2", description: "high school"}
          ],
        }
      });

    </script>
</body>
</html>

问题我不知道如何使用spring的findAll（）方法返回的数据填充我的篮子。我指定此方法以JSON格式返回数据。像这样：

{
   id:1,
   description:"University"
}
{
   id:,
   description:"University"
}

这是我的getAllType方法：

@RequestMapping(value= "/getAllTypes", method = RequestMethod.GET)
public @ResponseBody Collection<Type> getAllTypes() {
    return this.typeService.getAllTypes();
}

如果可能，请举例说明我应如何继续。

使用vue.js恢复html页面中的数据

0 个答案: