最近刚去一个公司实习感觉什么都不会,但是你不会不代表别人不布置任务。由于某个接口没有访问权限,老大让我模拟一个接口对post请求作出应答,期间也碰到很多问题。看了网上好多教程最后在同事的帮助下调试出来了,不说这个问题有多难,只是想保持一个好习惯把不会的记录下来,这也是一种学习方式吧!
因为刚去好多不会,但是同事很给力竭力帮我解决,他写了一个前端页面方便我测试
1.前端
<html>
<head>
<meta charset="utf-8">
<title>demo</title>
</head>
<body>
<script type="text/javascript">
function post(){
var postData = {
"type":2,"beginTimeStr":"2019-10-22 11:37:27","coordinateX":108.53391637311535,"coordinateY":22.949932550572253,"affectDistance":500,"leakType":20170707001001,"affectLevel":1,"barrierLevel":1,"leakPage":"uva/uvaImag/leakPages/2019-10-22/1909090902_101.jpg","constructCompany":"中国","constructPerson":"李丽","conCall":"13800138000","conContent":"有隐患","conPattern":20170704001001,"userName":"suqiang","leakName":"施工2019-10-22"
};
var xhr = new XMLHttpRequest();
xhr.open("POST", "http://localhost:8080/cable/interfaceUVA/saveUVALeakData.action", true);
//xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xhr.setRequestHeader("Content-type","application/json");
xhr.setRequestHeader("dataType","jsonp");
xhr.setRequestHeader("crossDomain","true");
xhr.onreadystatechange = function(){
var XMLHttpReq = xhr;
if (XMLHttpReq.readyState == 4) {
if (XMLHttpReq.status == 200) {
var data = XMLHttpReq.responseText;
alert(data)
console.log(data);
//var json = JSON.parse(JSON.parse(data));
}else if(XMLHttpReq.status == 100){
}else if(XMLHttpReq.status == 300){
}else if(XMLHttpReq.status == 400){
}else if(XMLHttpReq.status == 500){
}else if(XMLHttpReq.status == 0){
}
}
};
xhr.send(JSON.stringify(postData));
}
</script>
<input type="button" value="触发请求" onclick="post()" style="width:100px;height:100px;font-size:30px"/>
</body>
</html>
2.后台
springboot目录结构
实体类SaveUVALeakData:
package pojo;
public class SaveUVALeakData {
private Integer type;
private String leakName;
private double coordinateX;
private double coordinateY;
private String beginTimeStr;
private Long affectDistance;
private Long leakType;
private Integer affectLevel;
private Integer barrierLevel;
private String leakPage;
private String constructCompany;
private String constructPerson;
private String conCall;
private String conContent;
private Long conPattern;
private String userName;
@Override
public String toString() {
return "SaveUVALeakData{" +
"type=" + type +
", leakName='" + leakName + '\'' +
", coordinateX=" + coordinateX +
", coordinateY=" + coordinateY +
", beginTimeStr='" + beginTimeStr + '\'' +
", affectDistance=" + affectDistance +
", leakType=" + leakType +
", affectLevel=" + affectLevel +
", barrierLevel=" + barrierLevel +
", leakPage='" + leakPage + '\'' +
", constructCompany='" + constructCompany + '\'' +
", constructPerson='" + constructPerson + '\'' +
", conCall='" + conCall + '\'' +
", conContent='" + conContent + '\'' +
", conPattern=" + conPattern +
", userName='" + userName + '\'' +
'}';
}
}
HelloWorldCotroller 类:
package com.example.demo.controller;
import com.alibaba.fastjson.JSONArray;
import com.alibaba.fastjson.JSONObject;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.*;
import pojo.PhotoFiles;
import pojo.SaveUVATaskData;
import pojo.UVATaskData;
import pojo.SaveUVALeakData;
import javax.validation.Valid;
@Controller
public class HelloWorldCotroller {
//接口3
@CrossOrigin(origins = "*", maxAge = 3600)//跨请求域配置
//@PostMapping(value="/cable/interfaceUVA/saveUVALeakData.action",produces = "application/json;charset=UTF-8")
@RequestMapping(value="/cable/interfaceUVA/saveUVALeakData.action",method = RequestMethod.POST,produces = "application/json;charset=UTF-8")
@ResponseBody
public String saveUVALeakDat(@RequestBody SaveUVALeakData saveUVALeakData){
System.out.println(saveUVALeakData.toString());
return "success";
}
}
在上面中我遇到的问题有:(1)@CrossOrigin(origins = “*”, maxAge = 3600),开始没有加这个跨域请求;
(2) public String saveUVALeakDat(@RequestBody SaveUVALeakData saveUVALeakData) 中没有加@RequestBody,在前端页面中如果Content-type的类型为"application/json",需要使用@RequestBody;
(3)开始也忘了加produces = “application/json;charset=UTF-8”;
启动springboot,如下图所示启动成功
运行前端测试页面,点击触发请求,在后台控制台可以看到返回的数据
借鉴文章:
https://blog.csdn.net/w_linux/article/details/81142413
https://blog.csdn.net/feiyst/article/details/88431621
2.反序列化
实体类:
package pojo;
import com.fasterxml.jackson.annotation.JsonProperty;
import java.util.List;
import java.util.Map;
public class SaveUVATaskData {
@JsonProperty(value="type") //对应前端请求的type
private Integer type;
@JsonProperty(value="taskId")//对应前端请求的taskId
private Long taskId;
private List<Map<String,Object>> photoFiles;
public Integer getType() {
return type;
}
public void setType(Integer type) {
this.type = type;
}
public Long getTaskId() {
return taskId;
}
public void setTaskId(Long taskId) {
this.taskId = taskId;
}
public List<Map<String, Object>> getPhotoFiles() {
return photoFiles;
}
public void setPhotoFiles(List<Map<String, Object>> photoFiles) {
this.photoFiles = photoFiles;
}
@Override
public String toString() {
return "SaveUVATaskData{" +
"type=" + type +
", taskId=" + taskId +
", photoFiles=" + photoFiles +
'}';
}
}
控制类:
package com.example.demo.controller;
import com.alibaba.fastjson.JSONArray;
import com.alibaba.fastjson.JSONObject;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.*;
import pojo.SaveUVATaskData;
import pojo.SaveUVALeakData;
@Controller
public class HelloWorldCotroller {
//接口1接收无人机巡检轨迹
@CrossOrigin(origins = "*", maxAge = 3600)//跨越请求配置
@ResponseBody
@RequestMapping(value="/cable/interfaceUVA/saveUVATaskData.action",method = RequestMethod.POST,produces = "application/json;charset=UTF-8")
public String saveUATData(@RequestBody SaveUVATaskData saveUVATaskData){
System.out.println(saveUVATaskData.toString());
// System.out.print(saveUVATaskData.getPhotoFiles().toString());
//创建ret对象
JSONObject ret=new JSONObject();
ret.put("msg","");
ret.put("success",true);
//创建Json对象
JSONObject jsonObject=new JSONObject();
jsonObject.put("ret",ret);
return jsonObject.toString();
}
是需要在实体类SaveUVATaskData中给属性加上 @JsonProperty(value=“type”) //对应前端请求的type
private Integer type;
@JsonProperty(value=“taskId”)//对应前端请求的taskId
private Long taskId;