浅谈SpringMVC(三)

最新推荐文章于 2024-05-21 23:21:19 发布

Hello！joy先生

最新推荐文章于 2024-05-21 23:21:19 发布

阅读量1.4k

点赞数 1

文章标签：前端 javascript mvc spring

本文链接：https://blog.csdn.net/weixin_45341429/article/details/122755686

版权

浅谈SpringMVC(三)

上回书说道,使用简单的前端后端代码,实现了前端异步请求,接下来我们继续通过程序来测试.

前端代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script src="../js/axios.js"></script>
		<script>
			// 提取请求路径相同的前缀
			axios.defaults.baseURL = "http://localhost:8080";
			axios.get("http://localhost:8080/axios/findStr")
				 .then(function(promise){
					 console.log(promise.data);
				 })
				 
			axios.get("/axios/getUserById?id=1")
				 .then(function(promise){
					 console.log(promise.data)
				 })
			
		</script>
	</body>
</html>

我们对代码进行了简单的优化:通过axios.defaults.baseURL提取出请求路径相同的前缀.以后我们就不用每一次都写这个长长的前缀了.

后端代码

@RestController
@RequestMapping("/axios")
@CrossOrigin
public class AxiosCotroller {
    @RequestMapping("/getUserById")
    public String getUserById(Integer id){
        return "id:"+id;
    }
}

查看页面输出结果

在这里插入图片描述

因为我的前端代码用的上次的,还存在findStr路径,这次后端是重写的,所以就会报错,找不到findStr,请大家多多包涵~~

上述代码中只有一个参数id,随着业务的增加,多个参数情况下如何传递呢?我们就可以直接通过对象传递

前端代码~~

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<h3>Ajax测试</h3>
		<script src="../js/axios.js"></script>
		<script>
			// 提取请求路径相同的前缀
			axios.defaults.baseURL = "http://localhost:8080";
			// axios.get("http://localhost:8080/axios/findStr")
			// 	 .then(function(promise){
			// 		 console.log(promise.data);
			// 	 })
				 
			// axios.get("/axios/getUserById?id=1")
			// 	 .then(function(promise){
			// 		 console.log(promise.data)
			// 	 })
			let user = {id:1,name:"tom",age:10}
			axios.get("/axios/findUser",{params:user})
				 .then(function(promise){
					 console.log(promise.data)
				 })
		</script>
	</body>
</html>

我们先把对象的参数封装到一个对象中,通过{params:储存参数对象}传入参数数据即可,这也是一个规则.

后端代码

@RestController
@RequestMapping("/axios")
@CrossOrigin
public class AxiosCotroller {
//    @RequestMapping("/getUserById")
//    public String getUserById(Integer id){
//        return "id:"+id;
//    }

    @RequestMapping("/findUser")
    public User findUser(User user){
        return user;
    }
}

查看结果

在这里插入图片描述

我们通过对象获取到了传递的参数,但是要注意,参数要和对象的属性保持一致.

前后端调用-AsetFul结构

AsetFul结构适用于所有的请求方式,我们用get方式进行测试

前端代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<h3>Ajax测试</h3>
		<script src="../js/axios.js"></script>
		<script>
			// 提取请求路径相同的前缀
			axios.defaults.baseURL = "http://localhost:8080";
			// axios.get("http://localhost:8080/axios/findStr")
			// 	 .then(function(promise){
			// 		 console.log(promise.data);
			// 	 })
				 
			// axios.get("/axios/getUserById?id=1")
			// 	 .then(function(promise){
			// 		 console.log(promise.data)
			// 	 })
			// let user = {id:1,name:"tom",age:10}
			// axios.get("/axios/findUser",{params:user})
			// 	 .then(function(promise){
			// 		 console.log(promise.data)
			// 	 })
			let user = {id:1,name:"tom",age:10}
			axios.get(`/axios/getUsers/${user.id}/${user.name}/${user.age}`)
				 .then(function(promise){
					 console.log(promise.data)
				 })
		</script>
	</body>
</html>

注意:我们这里的请求路径用模板字符串写法,使用反引号 ``,并且${xx.属性名}这样的操作

后端代码

@RestController
@RequestMapping("/axios")
@CrossOrigin
public class AxiosCotroller {
//    @RequestMapping("/getUserById")
//    public String getUserById(Integer id){
//        return "id:"+id;
//    }

//    @RequestMapping("/findUser")
//    public User findUser(User user){
//        return user;
//    }

    @RequestMapping("/getUsers/{id}/{name}/{age}")
    public User getUsers(User user){
        return user;
    }
}

注意:接收请求使用的是{参数名}

查看最后结果:

在这里插入图片描述

我们基本把get请求说明完毕,接下来我们使用post请求,对比一下他们之间的区别

前端代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>axios_post</title>
	</head>
	<body>
		<h3>post异步测试</h3>
		<script src="../js/axios.js"></script>
		<script>
			axios.defaults.baseURL = "http://localhost:8080";
			let user = {id:1,name:"tom",age:10}
			axios.post("/axios/saveUser",user)
				 .then(function(promise){
					 console.log(promise.data)
				 })
		</script>
	</body>
</html>

注意:对象user在这里是一个js对象,问题是java并不认识js对象,那该如何是好呢?其实axios已经伴我们解决了这个问题,将js对象转变为json串,在把json串转变为java对象.

后端代码

@RestController
@RequestMapping("/axios")
@CrossOrigin
public class AxiosCotroller {
//    @RequestMapping("/getUserById")
//    public String getUserById(Integer id){
//        return "id:"+id;
//    }

//    @RequestMapping("/findUser")
//    public User findUser(User user){
//        return user;
//    }
//
//    @RequestMapping("/getUsers/{id}/{name}/{age}")
//    public User getUsers(User user){
//        return user;
//    }
    @RequestMapping("/saveUser")
    public User saveUser(@RequestBody User user){
        return user;
    }
}