JAVA-Web项目前后端接口定义

前后端交互接口定义等（Rest请求等）

一、GET请求

前端请求方式

url?参数1名=参数1值&参数2名=参数2值......

例： brandyf.boost-traffic.jd.com/boost/traffic/monitor/plan/download?planId=1

后端写法

1、

@RequestMapping(value = "/apply/list", method = RequestMethod.GET)
public String testMethod(@RequestParam("num") Integer pageNum, @RequestParam("size") Integer pageSize) {
    log.info("{},{}",pageNum,pageSize);
    return "OK";
} 

2、

@RequestMapping(value = "/apply/list", method = RequestMethod.GET)
public String testMethod(Integer pageNum, Integer pageSize) {
    log.info("{},{}",pageNum,pageSize);
    return "OK";
} 

说明：

@RequestParam：将请求参数绑定到你控制器的方法参数上，常见使用如下：

@RequestParam(value="pageNum",required = true,defaultValue = "12")

value:绑定参数的指定名称

required：是否必填

defaultValue：默认值，如果参数为数值型，这里会自动转换

二、POST请求

前端请求

接口地址 : /aaa/ccc/getobj

请求方式 : POST

请求数据类型 : application/json

请求示例 :

{

"endDate": "2020-09-10 12:13:00",

"linkIds": [

12,

585,

11

],

"startDate": "2020-09-10 00:00:00",

"id": 1221,

"name":"zhangsan"

}

后端接收方式

@RequestMapping(value = "/apply/list", method = RequestMethod.POST)
public String testMethod(@RequestBody Object obj) {
    log.info("{}",JSON.toJSONString(obj));
    return "OK";
} 

三、Rest风格

Rest请求方式的好处：

首先就是面向资源URI，即http请求的路径，Rest规定中要求URI各层只能用名词不用动词，这样相比传统的get请求有利于传输数据的稳定性，数据的操作流

程不会被人轻易看破，也便于团队开发，各种URI一目了然；

SpringBoot中使用

@RestController  //申明它既是一个controller，同时支持rest风格

该注解内包含：

@Target(ElementType.TYPE)

@Retention(RetentionPolicy.RUNTIME)

@Documented

@Controller

@ResponseBody

@PathVariable：自动将rest请求匹配到同名参数上

@ModelAttribute：自动将请求的form表单参数 组装成对象

@RequestBody:自动将请求的json参数 组装成对象

/**

* restful

* @param name

* @return

*/

@RequestMapping(value="/xx/{name}",method= RequestMethod.GET)

private String query(String name) {

String result = ""+name+"";

return result;

}

//localhost:8080/xx/lalalal

//lalalal 四、前端向后端请求进行下载（react）

1、get请求下载

前端：

window.open("downLoad url")   //用来打开新窗口，可以在一个网站上打开另外的一个网站的地址

window.location 用来替换当前页，也就是重新定位当前页 ，只能在一个网站中打开本网站的网页

例：

<input type="button" value="" οnclick="window.open('http://www.google.com')">

<input type="button" value="" οnclick="window.location='http://www.google.com/'">

后端：

使用正常的get请求接收，以springboot为例：

 

@RequestMapping(value = "/download/uv",method = RequestMethod.GET)
@ResponseBody
public void downloadUvList(String linkIds, String planName, Long id, String startDate, String endDate, HttpServletResponse response) {
    try{
        response.setCharacterEncoding("utf-8");
        response.setContentType("application/octet-stream;charset=utf-8");
        response.setHeader("Content-Disposition", "attachment;fileName=\"" + encodedDownloadName + "\";
        filename*=utf-8'zh_cn'" + ".xlsx");
        SXSSFWorkbook sxssfWorkbook = new SXSSFWorkbook(100);
        ServletOutputStream servletOutputStream = response.getOutputStream();
        sxssfWorkbook.write(servletOutputStream);
        servletOutputStream.close();
    }catch(Exception e){
        log.error(e);
    }
} 

2、使用POST请求下载

前端：

方法一、在React中使用ReactDOM创建临时form表单，自动提交

例：

var questiontype = $('#QuestionType').combobox('getValue');//

var form = $("<form>"); //form

form.attr('style','display:none'); //form

form.attr('method','post');//HTTP

form.attr('action', "GetExcel");

var input1 = $('<input>');

input1.attr('type','hidden');

input1.attr('name','exportPostTime');

input1.attr('value',questiontype);

$('body').append(form); //web

form.append(input1); //

form.submit(); //

方法二、首先在react组件的render函数里面建立一个隐藏的div，用户在页面上触发下载按钮后，执行以下函数：在隐藏的div里面创建临时表单，获取表

单，提交表单，在div节点卸载临时表单。

例： downloadDetailData=()=>{

var divElement= document.getElementById("downloadDiv");

var downloadUrl=`${apiBasePath}/api/xxxxx/downloadDetailData`;

var params=JSON.stringify({

key:'value'

})

ReactDOM.render(

<form action={downloadUrl} method="post">

<input name="params" type="text" value={params}/>

</form>,

divElement

)

ReactDOM.findDOMNode(divElement).querySelector('form').submit();

ReactDOM.unmountComponentAtNode(divElement);

}

方法三（解决兼容问题）

let formElement = document.createElement('form');

formElement.style.display = "display:none;";

formElement.method = 'post';

formElement.action = ${apiBasePath}/api/xxxxx/downloadDetailData;

formElement.target = 'callBackTarget';

let inputElement = document.createElement('input');

inputElement.type = 'hidden';

inputElement.name = "params" ;

inputElement.value = params;

formElement.appendChild(inputElement);

document.body.appendChild(formElement);

formElement.submit();

document.body.removeChild(formElement);

后端

@RequestMapping(value = "/download/uv",method = RequestMethod.POST)
@ResponseBody
public void downloadUvList(@RequestBody DownloadPO download, HttpServletResponse response) {
    try{
        response.setCharacterEncoding("utf-8");
        response.setContentType("application/octet-stream;charset=utf-8");
        response.setHeader("Content-Disposition", "attachment;fileName=\"" + encodedDownloadName + "\";
        filename*=utf-8'zh_cn'" + ".xlsx");
        SXSSFWorkbook sxssfWorkbook = new SXSSFWorkbook(100);
        ServletOutputStream servletOutputStream = response.getOutputStream();
        sxssfWorkbook.write(servletOutputStream);
        servletOutputStream.close();
    }catch(Exception e){
        log.error(e);
    }
}