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

71 阅读 0 评论 47 点赞

我是靠谱客的博主苗条毛巾，最近开发中收集的这篇文章主要介绍springCloud+vue3.0 在vue中配置跨域，通过axios调用Java接口springCloud+vue3.0 在vue中配置跨越，通过axios调用Java接口，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

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);
	}