springCloud+vue3.0 在vue中配置跨域，通过axios调用Java接口

最新推荐文章于 2024-07-27 17:21:33 发布

日落西山+

最新推荐文章于 2024-07-27 17:21:33 发布

阅读量1k

点赞数

分类专栏： springCloud+vue3.0 文章标签： java vue

本文链接：https://blog.csdn.net/weixin_43769531/article/details/119512542

版权

springCloud+vue3.0 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

本文介绍了在Vue3项目中配置跨域代理以调用SpringCloud后端Java接口的方法。首先在vue.config.js中设置devServer的proxy属性，然后在main.js中引入axios进行接口调用。示例包括GET请求的两种参数传递方式及POST请求。同时展示了Java接口的定义，包括不同参数接收方式。

摘要由CSDN通过智能技术生成

springCloud+vue3.0 在vue中配置跨越，通过axios调用Java接口

**
今年4月份换的工作，由于不太熟悉cloud，导致找的工作不是特别满意，就想着自己搞个项目练练（嘿嘿，来年方便跑路），虽然是练手，还是想搞个有界面的，因此用了vue3，但是在请求后端数据时搞了半天，网上查到的都是vue2的方法，因此在这里记录一下，希望能帮到大家

vue中配置跨越

在vue.config.js中配置如下代码（vue3是没有这个文件的，在根目录下创建一个）

module.exports = {
    devServer: {
        proxy: 'http://localhost:8001'
    }
}

http://localhost:8001 此路径是调用Java接口路径的前半部分
在这里插入图片描述

main.js中引入axios

在这里插入图片描述

axios调用Java接口

1. 在当前js中先引入axios

import axios from 'axios';

请求Java接口，传参方式一

axios.get('/find/1')   //http://localhost:8080/find/1
.then(obj=>{
    console.log("请求成功");
    console.log(obj.data);
}).catch(err=>{
    console.log("请求失败");
    console.log(err);
})

请求Java接口，传参方式二

axios({         //http://localhost:8080/find?id=1&name=ycz
    url: '/find',
    method: 'get',
    params: {
        'id': 2,
        'name':"ycz"
    },
})
.then(function (response) {
    console.log(response.data);
})
.catch(function (error) {
    console.log(error);
});

提交数据，post请求

var data = {
    code: "666666",
    create_time: null,
    creator: "xxx",
    delflag: 0,
    edit_time: "2021-08-07 00:00:00",
    editor: "xxx",
    maindepid: null,
    mainposid: null,
    name: "admin",
    sex: null,
}
axios({
    url: '/add',
    method: 'post',
    data: data,
})
.then(function (response) {
    console.log(response);
})
.catch(function (error) {
    console.log(error);
});

Java接口

	//http://localhost:8001/find/1      请求路径法式一
	//@RequestMapping(value = "/find/{id}", method = RequestMethod.GET)
	//public HrUser findUserById(@PathVariable("id") Long id) {
	
	//http://localhost:8001/find?id=1      请求路径法式二
	@RequestMapping(value = "/find", method = RequestMethod.GET)
	public HrUser findUserById(Long id,String name) {
		System.out.println(id+"----------"+name);
		return user.findUserById(id);
	}
	
	@RequestMapping(value = "/list", method = RequestMethod.GET)
	public List<HrUser> findAllUser () {
		return user.findAllUser();
	}

	@RequestMapping(value = "/add", method = RequestMethod.POST)
	public boolean addUser (@RequestBody HrUser users) {
		System.out.println(99);
		return user.addUser(users);
	}

说明：findUserById方法被调用时传参的方式
1. 请求接口传参法式一

	//http://localhost:8001/find/1      
	@RequestMapping(value = "/find/{id}", method = RequestMethod.GET)
	public HrUser findUserById(@PathVariable("id") Long id) {
	System.out.println(id+"----------"+name);
		return user.findUserById(id);
	}

2. 请求接口传参法式二

	//http://localhost:8001/find?id=1      
	@RequestMapping(value = "/find", method = RequestMethod.GET)
	public HrUser findUserById(Long id,String name) {
		System.out.println(id+"----------"+name);
		return user.findUserById(id);
	}