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<Student> students = new ArrayList<>();
students.add(student1);
students.add(student2);
students.add(student3);
return JSONArray.toJSONString(students);
}
}
test02.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="app">
<button @click="getStudents">演示</button>
<table border="1" cellpadding="0">
<tr>
<td>id</td>
<td>name</td>
<td>gender</td>
<td>age</td>
</tr>
<tr v-for="student in msg">
<td>{{student.id}}</td>
<td>{{student.name}}</td>
<td>{{student.gender}}</td>
<td>{{student.age}}</td>
</tr>
</table>
</div>
<script>
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");
});
}
}
});
</script>
</body>
</html>