axios调用springboot项目接口获取数据简述版

简述版

前端

<div id=Zjw>
<table>
<tr v-for="item in all">
                        <td>{{item.cno}}td>
                        <td>{{item.name}}td>
                        <td>{{item.age}}td>
                        <td><img :src="item.picUrl" style="height: 130px;width: 130px">td>
                    tr>
table>
div>
1
2
3
4
5
6
7
8
9
10

 new Vue({
        el: "#Zjw",
        data:{
            all: []
        },
        mounted() {
            this.getAl()
            //回调
            //Cqnu-zjw
        },
        methods: {
            getAl(){
                //使用axios请求后台数据
                axios.get("http://localhost:8081/getAll").//getAll后端接口
                then(res => {
                    this.all = res.data
                }).catch(err => {
                    console.log("获取不正常")
                })
            }
        },
    })
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

后端

@ResponseBody
    @GetMapping("getAll")
    public List<Student> stu(Model model) {
        List<Student> students = stuService.getAll();
        return students;
    }
1
2
3
4
5
6