vue框架+spring后端的api接口配置（对于表格数据的json传值）_在vue中获取数据的后端接口怎么写

一、查询功能接口

1、get方法

1）js文件中的get方法（通常写法）

export function getAllReport(time) {
  return service({
    url: '/api/daily/getAllReport',
    method: 'get',
    params: {time}
  })
}
1
2
3
4
5
6
7

尝试了一下这样写也可以，但是在抓包时是Get方法，type: 'post'没起作用，不太清楚原因
1

export function getAllReport(time) {
  return service({
    url: '/api/daily/getAllReport',
    type: 'post', //或者type: 'get'
    params: {time}
  })
}
1
2
3
4
5
6
7

body：如果传参方法为GET，那么body为空（使用params传值），如果为POST那么传送的参数都在body中(使用data传值)。
1

2）vue框架调用语句：引入js文件必须要有{}

import { getAllReport} from '@/api/scbb'

getAllReport(formatDate(this.date, 'yyyy-MM-dd')).then(promise => {
}
1
2
3
4

3）后端接收数据：

 @RequestMapping("/getAllReport")
    public Result getBlastFurnaceProductionDailyReport(HttpServletRequest request,HttpServletResponse response）{
    String requestTime = request.getParameter("time");
}
1
2
3
4

前端抓包：时间在url路径后

2、post方法

1）js文件的post方法

post和data搭配使用，get和params搭配使用
更换为post方法，对应的使用data传值，因此修改method: ‘post’, data: {time}

export function getAllReport(time) {
  return service({
    url: '/api/daily/getAllReport',
    method: 'post',
    data: {time}
  })
}
1
2
3
4
5
6
7

2）后端接收数据

 @RequestMapping("/getAllReport")
    public Result getBlastFurnaceProductionDailyReport(HttpServletRequest request,HttpServletResponse response,@RequestBody String jsonBody) throws IllegalAccessException {
        System.out.println("jsonBody="+jsonBody);
   }
1
2
3
4

前端抓包：post方法，负载为json格式的时间

二、导出excel表格接口

1）js文件定义api接口

export function productionExportExcel(Time) {
  return service({
    url: '/api/ProductionParameters/exportExcel',
    params: {Time},
    responseType: 'blob',
  })
}
1
2
3
4
5
6
7

2）页面调用定义好的api接口，并对返回值进行处理

exportDailyReport(formatDate(this.date, 'yyyy-MM-dd')).then
(r => 
	exportExcel(r)//对返回的数据处理下载
)
1
2
3
4

3）后端接收时间，并返回

 @RequestMapping("/exportPositive")
    public Result exportPositiveBlastFurnaceProductionDailyReport(HttpServletRequest request,HttpServletResponse response){
        String requestTime = request.getParameter("time");  //时间格式要求是yyyy-MM-dd
        if (null==requestTime){
            return ResultUtil.error(500,"时间未选择");
        }
        blastFurnaceDailyService.exportPositiveBlastFurnaceProductionDailyReport(request,response,requestTime);
        return ResultUtil.success();
    }
1
2
3
4
5
6
7
8
9

4）后端返回的数据在前端进行处理下载

export function exportExcel(res){
    const blob = new Blob([res], {
        type: 'application/octet-stream',
    }, 'sheet.xlsx')
    if (window.navigator.msSaveBlob) { //没有此判断的话，ie11下的导出没有效果
        window.navigator.msSaveBlob(blob, unescape(res.headers.filename.replace(/\\u/g, '%u')))
    } else {
        let downloadElement = document.createElement('a')
        let href = window.URL.createObjectURL(blob) //创建下载的链接
        downloadElement.href = href
        downloadElement.download = unescape('data' + '.xls') //下载后文件名
        document.body.appendChild(downloadElement)
        downloadElement.click() //点击下载
        document.body.removeChild(downloadElement) //下载完成移除元素
        window.URL.revokeObjectURL(href) //释放掉blob对象
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

三、修改表格接口

1、js文件的api接口

  export function editDailyReport  (query)  {
  //export const editDailyReport  = query => {  //这样写也可以
    return service({
      url: '/api/daily/update',
      method: 'post',
      data: {
        query
      },
    })
  }
1
2
3
4
5
6
7
8
9
10

2、修改页面调用的保存修改内容方法

将需要传递给后端的值转为json格式

 save(index, row) {
      row.isShow = false
      let key="tappingReport"
      let date=formatDate(this.tableDate, 'yyyy-MM-dd')
      this.submitTable=this.tableData[index]
      let json = {"time":date,"key":key,"query":this.submitTable};
      //this.submitTable=JSON.stringify(json)
      console.log(JSON.parse(JSON.stringify(json)))//输出为json对象

      editDailyReport(JSON.parse(JSON.stringify(json))).then(res => {
        console.log(res.status)
        if (res.status === 200) {
          this.$message.success('修改成功')
        }
      })
      this.refreshTable()
    },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

3、后端接收数据

后端接收post数据，需要使用@RequestBody

 @RequestMapping("/update")
    public Result updateBlastFurnaceProductionDailyReport( HttpServletRequest request, HttpServletResponse response, @RequestBody String jsonBody) throws ParseException {
        System.out.println("jsonBody="+jsonBody);
    }
1
2
3
4

get方法：

使用get方法传值时，query在前端为一维数组

 export function editDailyReport  (query)  {
  return service({
    url: '/api/daily/update',
    type: 'get',
    params: {
      key:"1",
      time:"2022",
      query:query,
    },
  })
}
1
2
3
4
5
6
7
8
9
10
11

@RequestMapping("/update")
    public Result updateBlastFurnaceProductionDailyReport(ProductionDailyReportUpdateVO vo, HttpServletRequest request, HttpServletResponse response){
   	    String requestTime = request.getParameter("time");  //时间格式要求是yyyy-MM-dd
        String query= request.getParameter("query");
       // List<Object> query = vo.getQuery();
		System.out.println(key+"   "+requestTime);
        System.out.println(query);
    }  
1
2
3
4
5
6
7
8

详细后端spring注解问题此链接

注解@RequestParam接收的参数是来自requestHeader中，即请求头。用来处理 Content-Type 为 application/form-data 编码的内容。通常用于GET请求，像POST、DELETE等其它类型的请求也可以使用。

注解@RequestBody接收的参数是来自requestBody中，即请求体。一般用于处理非 Content-Type:application/form-data编码格式的数据，比如：application/json、application/xml等类型的数据。通常用于接收POST、DELETE等类型的请求数据，GET类型也可以适用。

关于@RequestBody的详细信息可以查看此链接