axios请求springboot后台获取数据

作为后端开发，对于前端应该也需要有了解的，最近了解vue的时候看到vue经常和axios组合使用做ajax请求来获取数据，于是尝试了一下首先本地起了一个springboot服务，保证接口可用：然后在前端通过axios进行调用，首先拿到数据可以debugger看下返回给前端的数据格式：然后根据数据格式进行数据的遍历：代码如下：源码：<!DOCTYPE html><html lang

酒书

1692人浏览 · 2022-02-22 00:04:30

酒书 · 2022-02-22 00:04:30 发布

作为后端开发，对于前端应该也需要有了解的，最近了解vue的时候看到vue经常和axios组合使用做ajax请求来获取数据，于是尝试了一下

首先本地起了一个springboot服务，保证接口可用：

然后在前端通过axios进行调用，首先拿到数据可以debugger看下返回给前端的数据格式：

然后根据数据格式进行数据的遍历：代码如下：

源码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>axios-demo</title>
</head>

<body>
    <div id="app">
        <table style="border:0.3px solid black">
            <tr v-for="hosp in hospList">
                <td>{{hosp.hosname}}</td>
                <td>{{hosp.hoscode}}</td>
                <td>{{hosp.status}}</td>
            </tr>
        </table>

    </div>
    <script src="vue.min.js"></script>
    <script src="axios.min.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                hospList:[]
            },
            created(){
                // 在页面渲染之前执行
                console.log("大夫都说")
                this.getList()
           },
          methods:{
                getList(){
                    // 使用axios方式ajax请求
                    axios.get("http://localhost:8201/admin/hosp/hospitalSet/findAll")
                    .then(response=>{
                       console.log("rep:"+response.data)
                       //debugger
                       if(response.data.code==200){
                           this.hospList=response.data.data
                       }else{
                           console.log("获取数据失败")
                           //todo
                       }

                    })
                    .catch(error=>{
                        console.log("异常捕获")
                        // todo
                    })
                }
            }
            
        })
    </script>
</body>

</html>

然后浏览器访问可以看到前端成功拿到数据并且展示到了页面上(请忽略样式问题)