0

After several hours of research on google, I have not managed to find a tutorial that shows how to use vue.js to display the result of a sql query (for example SELECT in my case). I come to you because i need to know how i can retrieve and display the data back by the spring findAll () method in an html page with framwork vue.js. Thank you in advance for your help.

Here is the html file in which I would like to display the data:

<!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>

The problem I do not know how to fill my basket with the data returned by the findAll () method of spring.I specify that this method returns me the data in JSON format. Like this : 

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

Here is my getAllType method : 

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

Please if possible with an example of how I should proceed.

kasko
  • 131
  • 1
  • 4
  • 14
  • you are hardcoding your data in Vue, can you show us how you assign your data that returned from spring to the variable `panier` in vue? – He Wang Nov 27 '17 at 22:28
  • you need to get json data via ajax with vue-resource for example, or axios. Check examples here https://github.com/pagekit/vue-resource and https://github.com/axios/axios – Jakob Nov 27 '17 at 23:24
  • your html is missing tag. Without this your javascript will not work.
     – Prashant Saraswat Nov 27 '17 at 23:42
  • To get data from server side via AJAX, take a look at this article:https://vuejsdevelopers.com/2017/08/28/vue-js-ajax-recipes/ – Prashant Saraswat Nov 27 '17 at 23:52
  • To return JSON from serverside, take a look at this: https://stackoverflow.com/questions/30895286/spring-mvc-how-to-return-simple-string-as-json-in-rest-controller – Prashant Saraswat Nov 27 '17 at 23:55

0 Answers0