vue+Springboot 前后端数据交互

最新推荐文章于 2025-02-21 15:44:54 发布

QXqmz

最新推荐文章于 2025-02-21 15:44:54 发布

阅读量9.1k

点赞数 7

文章标签： vue java

本文链接：https://blog.youkuaiyun.com/QXqmz/article/details/104537557

版权

本文介绍了如何在Vue项目与SpringBoot应用之间实现数据交互，包括前端Vue项目的配置，如在proxyTable中设置代理解决跨域问题，以及后端SpringBoot添加@CrossOrigin注解允许跨域。同时，前端使用axios作为HTTP客户端，并在main.js中配置，后端则需要相应的控制器方法处理请求。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

springboot与Vue交互一般有两种方式

build前端vue项目，然后把生成的dist目录下的文件拷贝到resources下的static下即可
分开部署

现在我们讨论的就是第二种方式。

如果vue项目没有打包放在 springboot 项目下的话，需要开启跨域支持
在 vue 项目里 config 目录下的 index.js 文件，找到 proxyTable 加上

 // 路由接口代理配置
    proxyTable: {
      '/api': {
        target: 'https://localhost:8089',
        changeOrigin: true,
        pathRewrite: {
            '^/api': ''
        }
      }
    },

前端传对象到后端

  // console.log("进入登录认证方法")
            this.$http.post('user/doLogin',this.formdata
        ).then(res => {
                 console.log(res)
                // 1.提示信息
                if (res.data.status === 200) {
                    // 登录成功
                    // 0.保存token(后端接口返回的是host) 目的：如果用户没有登录，URL直接来到home组件
                    localStorage.setItem('token',res.data.token)

最低0.47元/天解锁文章