vueバックグラウンドを巡回して取得したListセット

Student.java

package com.fengqing.vue.bean;

public class Student {
    private Integer id;

    private String name;

    private String gender;

    private int age;

    public Student(Integer id, String name, String gender, int age) {
        this.id = id;
        this.name = name;
        this.gender = gender;
        this.age = age;
    }

    public Student() {
    }

    public Integer getId() {
        return id;
    }

    public void setId(Integer id) {
        this.id = id;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public String getGender() {
        return gender;
    }

    public void setGender(String gender) {
        this.gender = gender;
    }

    public int getAge() {
        return age;
    }

    public void setAge(int age) {
        this.age = age;
    }
}

TestController.java

package com.fengqing.vue.controller;

import com.alibaba.fastjson.JSONArray;
import com.fengqing.vue.bean.Student;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import javax.servlet.http.HttpServletRequest;
import java.util.ArrayList;
import java.util.List;

@RestController
public class TestController {

    @RequestMapping("/hello")
    public String hello(String name, String gender, HttpServletRequest request){
        Student student1 = new Student(1, "tom", "male", 18);
        Student student2 = new Student(2, "jack", "male", 19);
        Student student3 = new Student(3, "king", "female", 20);
        List students = new ArrayList<>();
        students.add(student1);
        students.add(student2);
        students.add(student3);
        return JSONArray.toJSONString(students);
    }
}

test02.html

    
    
    
    


    

          
        

            

                
id
                
name
                
gender
                
age
            
            

                
{{student.id}}
                
{{student.name}}
                
{{student.gender}}
                
{{student.age}}
            
        
    
    
        var vm = new Vue({
            el: "#app",
            data: {
                msg: null
            },
            methods:{
                getStudents: function () {
                    var that = this;
                    axios.get("http://localhost:8888/hello")
                        .then(function (response) {
                            that.msg = response.data;
                        }).catch(function (reason) {
                            alert("error");
                        });
                }
            }
        });