浅谈SpringMVC(三)

浅谈SpringMVC(三) 浅谈SpringMVC(三)

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

前端代码

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

后端代码

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

查看页面输出结果

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

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

前端代码~~

	
		
		
	
	
		Ajax测试
		
		
	

我们先把对象的参数封装到一个对象中,通过{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方式进行测试

前端代码

	
		
		
	
	
		Ajax测试
		
		
	

注意:我们这里的请求路径用模板字符串写法,使用反引号 ``,并且${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请求,对比一下他们之间的区别

前端代码

	
		
		
	
	
		post异步测试
		
		
	

注意:对象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;
    }
}

新注解:

@RequestBody:可以将前端传来的json转变为java对象,有图有真相

这样是不是很方便呢,我们只需要添加一个注解就可以完成json转变java对象的 *** 作.

查看最终结果

关于请求方式

请求方式共有八种:

常用的有四种:

更新 *** 作:put

新增 *** 作:post

删除 *** 作:delete

查询 *** 作:get

其中put/post调用参数方法相同

delete/get调用方法相同,所以我们只需要了解get/post两种请求即可.

我们可以将后端代码的注解进行替换

post方式就用:@PostMapping替换掉@RequestMapping

get方式就用:@GetMapping替换掉@RequestMapping

大家可以自己常识替换一下

跨域问题

浏览器的请求网址必须和Ajax路径保持一致:请求协议相同,域名相同,端口号相同,只要其中之一不同,那么就会形成跨域访问,就会报错

所以我们需要使用注解@CrossOrigin

查询 *** 作:get

其中put/post调用参数方法相同

delete/get调用方法相同,所以我们只需要了解get/post两种请求即可.

我们可以将后端代码的注解进行替换

post方式就用:@PostMapping替换掉@RequestMapping

get方式就用:@GetMapping替换掉@RequestMapping

大家可以自己常识替换一下

跨域问题

浏览器的请求网址必须和Ajax路径保持一致:请求协议相同,域名相同,端口号相同,只要其中之一不同,那么就会形成跨域访问,就会报错

所以我们需要使用注解@CrossOrigin