vue遍历后台获取的List集合

最新推荐文章于 2024-06-05 14:26:44 发布

fengqing5578

最新推荐文章于 2024-06-05 14:26:44 发布

阅读量3.1w

点赞数 6

分类专栏： Vue

本文链接：https://blog.csdn.net/fengqing5578/article/details/102816613

版权

Vue 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

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>

fengqing5578

关注

6
点赞
踩
28

收藏

觉得还不错? 一键收藏
0
评论
vue遍历后台获取的List集合

Student.javapackage com.fengqing.vue.bean;public class Student { private Integer id; private String name; private String gender; private int age; public Student(Integer id...
复制链接

扫一扫

专栏目录