注意控制层要使用@Controller注解,同时@RestController注解相当于@ResponseBody + @Controller
前端有传递Json对象或Json字符串两种方式
后端有用 @RequestParam 和 @RequestBody和@PathVariable(这个不常用)注解接受值
图里的后端获取方式不全,下面有补充
json对象前端格式
这个好理解:
下面这理解有点难
json字符串前端格式
json字符串是一个用单引号或者双引号引起来的字符串,因为字符串的格式符合json的格式,所以叫做json字符串。
注解 支持的类型 支持的请求类型 支持的Content-Type 请求示例
@PathVariable url GET 所有 /test/{id}
@RequestParam url GET 所有 /test?id=1
Body POST/PUT/DELETE/PATCH form-data或x-www.form-urlencoded id:1
@RequestBody Body POST/PUT/DELETE/PATCH json {"id":1}
将接口改成以@RequestBody注解方式接受json请求数据,而后将接收到的json数据转化为json对象,可以使用json对象的get()方法取得参数值,代码如下:
@PostMapping("/account")
public Object insertAccount(@RequestBody JSONObject jsonParam) {
String userName=jsonParam.get("userName").toString()
...
情况一
一般使用GET请求,url路径参数
前端传递Json对象
后端使用@RequestParam 或不使用直接接受
前端的contentType默认格式是 application/x-www-form-urlencoded
优点:
一、前端传递数据不用转换为Json字符串:Json.stringify(user)
二、后端接收参数灵活:
1、 可以是封装对象 (User user),对象最好不要加@RequestParam注解
2、可以是单个参数(String username,String password)
3、 可以封装对象与单个参数混用(User user,String username)
前端格式
后端
@GetMapping(value = "/pageVue")
public void query(AlbumQuery albumQuery,
@RequestParam(value = "pageSize") Integer pageSize,
@RequestParam(value = "pageNum") Integer pageNum){
System.out.println(albumQuery);
System.out.println(pageSize+" ::"+pageNum);
}
value其实就是我们在前台页面传过来的参数名称, 用来解决前后台传入参数不一致的问题
后面的那个是我们自己定义的参数名称(命名看你自己,最好和前端一样),它会自动获得value中参数的值
value也可以替换成为name
name和value只能使用一个, name和value属性也是完全等价
前端
const params = {...this.queryParams}
params.pageSize = this.pageSize;
params.pageNum = this.pageNum;
var that = this;
axios.get("http://localhost:8770/recomm/pageVue",{params:params})
.then(function (response) {
/*that.devices = response.data;*/
console.log("成功")
},function (err) {
console.log("数据出错")
})
情况二
一般使用 POST请求,Body传值
前端传递Json字符串
后端一般使用@RequestBody接受
使用@RequestBody:直接对象接收,属性名要与前端传过来的数据的key值对应
前端的contentType 格式是 application/json 要设置
要将JSON对象转换为JSON字符串
前端
如下面这种为json格式的:
<script>
var user = {
"username": "hahah",
"password": "123456"
};
$.ajax({
url:"/testJson3",
type: "POST",
async: true,
contentType: "application/json;charset=UTF-8", //使用 application/json;charset=UTF-8
data: JSON.stringify(user), //将JSON对象转换为JSON字符串
dataType: 'json',
success: function (data) {
}
});
</script>
后端
方式一 :使用 @RequestBody或@RequestParam注解
后端接收前端Json字符串,只能封装在 对象中,不能单独设置参数。
@PostMapping(value = "/testJson3")
public String testJson3(@RequestBody User user){
System.out.println(user.getUsername());//hahah
System.out.println(user.getPassword());//123456
return "aaaa";
}
注意 :@RequestBody在方法参数中只能使用一个,如果多个参数都要使用该注解,可以将多个参数封装在一个类中,使用该类接受值 @RequestBody接收的参数是来自requestBody中,即请求体 ,因此该注解常用于post请求,不能用于get请求
@RequestParam则可以使用多个,这个注解不作用于自定义对象,相当于它把@RequestBody对象中的各个属性拆开了
即:@RequestBody和@RequestParam,前者只能有一个,后者可以有多个,前者作用于一个整体,后者作用于多个参数;当只有一个接收参数时,两者作用一样
具体使用查看下面的 参考三
方式二 使用Map
@RequestMapping(value = "/testJson4",method = {RequestMethod.POST})
@ResponseBody
public String testJson4(@RequestBody Map map){
System.out.println(map.get("username"));//hahah
System.out.println(map.get("password"));//123456
return "aaaa";
}
方式三 使用String接收
@RequestMapping(value = "/testJson5",method = {RequestMethod.POST})
@ResponseBody
public String testJson5(@RequestBody String user) throws IOException {
System.out.println(user); // {"username":"hahah","password":"123456"}
ObjectMapper mapper = new ObjectMapper();
User user1 = mapper.readValue(user, User.class);
System.out.println(user1.getUsername());//hahah
System.out.println(user1.getPassword());//123456
return "aaaa";
}
方式四 使用数组或list
@RequestMapping(value = "/test1", method = RequestMethod.POST)
@ResponseBody
private String Test1(String name,@RequestParam("nums[]") Integer[] nums) {
System.out.println(name);
for(int i=0;i<nums.length;i++){
System.out.println(nums[i]);
}
return "success";
}
或
@RequestMapping(value = "/test1", method = RequestMethod.POST)
@ResponseBody
private String Test1(String name,@RequestParam("nums[]") List<Integer> nums) {
System.out.println(name);
System.out.println(nums);
return "success";
}
优缺点
(1)前端需要使用JSON.stringify()将JSON对象转为JSON字符串
(2)后端接收参数比较麻烦,没有第一种简单,也没有第一种灵活。
(3)但Post请求较为安全,因此情况二一般用于表单的传输
细节
Vue使用axios请求数据,默认post请求传参是json格式,但后台需要formData格式?即前端传json对象