Vue axios

最新推荐文章于 2024-07-08 12:24:36 发布

Nicholas___

最新推荐文章于 2024-07-08 12:24:36 发布

阅读量102

点赞数

分类专栏：前端文章标签：前端

本文链接：https://blog.csdn.net/Nicholas___/article/details/120403367

版权

前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

1. 准备工作

npm install axios

2. 示例代码

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

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

    <script src="./node_modules/vue/dist/vue.js"></script>
    <script src="./node_modules/axios/dist/axios.js"></script>
</head>

<body>

    <div id="app">
        <ul>
            <li v-for="(item, index) in users" :key="index">
                {{ item }}
            </li>
        </ul>
    </div>

    <script>

        let vm = new Vue({
            data() {
                return {
                    users: []
                }
            },
            methods: {
                getData() {
                    axios.get('http://localhost:8080/getData', {
                        params: {
                            id: 1
                        }
                    })
                        .then(function (response) {
                            // 注意此处无法引用到users
                            // 使用this.users也无法引用到，因为加了this指的是axios
                            // 因此可以使用 vm.users
                            vm.users = response.data
                        })

                        // 如果then是箭头函数，可以使用this来访问users
                        // 因为使用箭头函数时，this指的是这一层的外层，即axios的外层vm
                        // .then(response => {
                        //     this.users = response.data;
                        // })
                        .catch(function (error) {
                            console.error(error)
                        });
                }
            },
            mounted() {
                this.getData();
            },


        }).$mount('#app')

    </script>

</body>

</html>

后端代码：

	@GetMapping("/getData")
    public ResponseEntity<List<String>> getData(Long id, HttpServletResponse response) {
        System.out.println(id);
        response.addHeader("access-control-allow-origin", "*");
        return new ResponseEntity(Arrays.asList("zhangsan", "lisi", "wangwu"), HttpStatus.OK);
    }

运行：
在这里插入图片描述
补充：
后端代码中如果不加这一行：

response.addHeader(“access-control-allow-origin”, “*”);

前端这边将报错：

has been blocked by CORS policy
这是浏览器同源策略问题，或者叫跨域问题。常见于用Chrome调试脚本的时候，需要加载的脚本和location不同源

Nicholas___

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue axios

1. 准备工作npm install axios2. 示例代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initia
复制链接

扫一扫