axios

最新推荐文章于 2024-10-19 19:30:00 发布

xlj778

最新推荐文章于 2024-10-19 19:30:00 发布

阅读量74

点赞数

文章标签： ajax javascript vue.js

本文链接：https://blog.csdn.net/xlj778/article/details/120630332

版权

axios是一个独立的项目，通常和vue一起使用，实现ajax操作

首先要引入vue.js和axios.js

其次启动后端服务以及开启跨域访问权限

    <div id="app">
        <table width="80%" align="center" border="1px">
            <tr>
                <td>name</td>
                <td>age</td>
            </tr>
            <tbody v-for="item in userList">
                <td>{{item.name}}</td>
                <td>{{item.age}}</td>
            </tbody>
        </table>
    </div>
    <script src="vue.min.js"></script>
    <script src="axios.min.js"></script>
    <script>
        new Vue({
            el: '#app',
            //固定结构
            data: {//在data定义变量和初始值
                //定义变量，空数组，便于后面赋值
                userList: []
            },
            created() {
                //页面渲染之前执行
                //调用定义的方法
                this.getUserList()
            },
            methods: {
                //编写具体的方法

                //创建方法查询用户数据
                getUserList() {

                    //使用axios发ajax请求
                    //axios.请求方式("请求的接口的路径").then(箭头函数).catch(箭头函数)
                    axios.get('http://localhost:8080/user')
                        .then(response => {
                            //response就是请求返回的数据
                            console.log(response)//可以去控制台看得到的数据的结构
                            //通过response获取具体数据赋值给自己定义的空数组
                            this.userList = response.data.data.items
                            //console.log(this.userList)测试获得的数据
                        })//请求成功执行then方法

                        .catch(error => {

                        })//请求失败执行catch方法
                }

                //箭头函数 变量名=>{}
            }

        })
    </script>