Vue——通过axios跨域访问

最新推荐文章于 2024-08-19 17:40:00 发布

bug小白

最新推荐文章于 2024-08-19 17:40:00 发布

阅读量149

点赞数

分类专栏： web前端 Vue 文章标签： vue html5 springboot ajax axios

本文链接：https://blog.csdn.net/yb970521/article/details/110112568

版权

web前端同时被 2 个专栏收录

9 篇文章 0 订阅

订阅专栏

Vue

7 篇文章 0 订阅

订阅专栏

html页面

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
<div id="app">
    <ul>
        <li>姓名：{{user.username}}</li>
    </ul>

</div>

<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<!--引入Axios-->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script type="text/javascript">
    var vm = new Vue({
        el: "#app",
        data() {
            return {
                user: {
                    username: ""
                }
            }
        },
        mounted() {
            axios.get("http://localhost:8080/user")
                .then(response => this.user = response.data)
        }
    });
</script>
</body>
</html>

js文件

var Utils = function () {
    var username;

    var setUsername = function (username) {
        this.username = username;
    }

    var getUsername = function () {
        return this.username;
    }

    return {
        setUsername: function (username) {
            setUsername(username);
        },

        getUsername: function () {
            return getUsername();
        }
    }
}();
// 表示函数对象

Springboot项目领域对象

package com.xiaobai.springboot.axios.domain;

import java.io.Serializable;

public class User implements Serializable {
    private String username;

    public String getUsername() {
        return username;
    }

    public void setUsername(String username) {
        this.username = username;
    }
}

Controller类——@CrossOrigin("*") 要加这个注解才能跨域！！！

package com.xiaobai.springboot.axios.controller;

import com.xiaobai.springboot.axios.domain.User;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.ResponseBody;

@CrossOrigin("*")
@Controller
@ResponseBody
public class UserController {

    @GetMapping(value = "/user")
    public User user(){
        User user = new User();
        user.setUsername("王二");

        return user;
    }

}