spring boot后端Contriller和vue项目使用axios进行数据交互参数传递和接收总结记录，附加HttpServlet对象的使用和文件上传下载

-王二毛-

已于 2022-11-11 09:42:10 修改

阅读量2.7k

点赞数 4

分类专栏： # axios 文章标签： vue axios

于 2021-05-29 22:00:36 首次发布

本文链接：https://blog.csdn.net/weixin_45084986/article/details/117391821

版权

axios 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

参考一
 参考二
 参考二

一、直接使用

1.1、安装依赖

cnpm i axios -S
或
cnpm install axios --save

在这里插入图片描述

1.2、全局注册

在这里插入图片描述

1.3、Axios发送请求时params和data的区别

在使用axios时，注意到配置选项中包含params和data两者，以为他们是相同的，实则不然。

因为params是添加到url的请求字符串中的，用于get、delete请求。
而data是添加到请求体（body）中的，用于post、put请求。
在这里插入图片描述

1.3、使用

1.3.1、发送get请求

1.3.1.1、后端使用@RequestParam接收数据方式

前端
在这里插入图片描述
或者（推荐）

特点：前端发送的数据以键值对的形式拼接在url中
http://localhost:8080/employee/use/page?pageNum=1&pageSize=2

后端
在这里插入图片描述

完整写法@RequestParam(,value = “id”, required = false,defaultValue= “0”) Long id
1、value：name属性的别名，作用相同；
2、name：URL中的参数名，映射到当前注解对应的参数上；如果没有设置该属性，方法参数名则和接口参数名匹配；
== name和value作用相同，但是不能同时使用，选择一个使用即可，推荐使用value==
3、required：默认值是"true"，表示该请求路径中必须包含该参数，如果不包含就会报404错误码；
4、defaultValue：String类型，默认参数值，如果设置了该值，属性required=true将失效，自动为false；如果没有传该参数，就使用默认值；默认值也可以是SpEL表达式；
参考

@RequestParam写与不写的区别
三种写法：

test(String name)
test(@RequestParam String name)
test(@RequestParam("userName") String name)

第一种如果没有name 参数不会报错，
第二种没有name 参数会报错，（也可以设置required = false),
第三种跟第二种的区别是name 参数换为userName。

还有说法是
不加注解只能接收url参数
加了@RequestParam后即能接收url的参数，也能接收form-data参数,但是只支持Content-Type: 为 application/x-www-form-urlencoded的参数传入

1.3.1.2、使用@RequestParam 接收List数据，并封装成List对象

@DeleteMapping
public R<String> delete(@RequestParam List<Long> ids){
    log.info("ids:{}",ids);
    setmealService.removeWithDish(ids);
    return R.success("删除成功");
}

1.3.1.3、后端使用@PathVariable接收数据方式

前端使用拼接方式
在这里插入图片描述

特点：前端发送的数据以直接拼接在url中，但不是以键值对的形式
http://localhost:8080/findAll/2/10

后端
1、如果方法参数名称和需要绑定的url中变量名称一致时,可以简写如下：

@GetMapping("/findAll/{pageNum}/{pageSize}")
public void sendMessage1(@PathVariable Integer pageNum , @PathVariable Integer pageSize){
    log.info(pageNum + pageSize)
}

2、如果方法参数名称和需要绑定的url中变量名称不一致时，则不能简写:

//省略value写法
@GetMapping("/findAll/{pageNum}/{pageSize}")
public void sendMessage1(@PathVariable("pageNum") Integer page , @PathVariable("pageSize") Integer size){
    log.info(page + size)
}

// 完整写法使用value或name
@GetMapping("/findAll/{pageNum}/{pageSize}")
public void sendMessage1(@PathVariable(value = "pageNum") Integer page , @PathVariable(name = "pageSize") Integer size){
    log.info(page + size)
}

1、value：name属性的别名，作用相同；
2、name：URL中的参数名，映射到当前注解对应的参数上；如果没有设置该属性，方法参数名则和接口参数名匹配；
== name和value作用相同，但是不能同时使用，选择一个使用即可，推荐使用value==
3、required：默认值是"true"，表示该请求路径中必须包含该参数，如果不包含就会报404错误码；

1.3.2、发送post请求

1.3.2.1、使用@RequestBody接收数据，并封装成pojo对象

前端
在这里插入图片描述
后端

1.3.2.2、使用@RequestBody接收复杂数据，并封装成Map对象

这种方式参数的范围广，比如传入的参数不好定义时可以使用。
json串里有数组、及其他一些字段。

{
    "ids": [
        1130300079678365700, 
        1126444579401408500, 
        1122018665301971000
    ], 
    "size": 20, 
    "current": 1, 
    "subjectType": 1101, 
    "subjectid": 1120946621235015700
}

在这里插入图片描述
1、比如size和current两个参数
这些参数本来可以用(@RequestBody Page page)接收
这里可以利用反射将其转成Page

Page page = (Page) MapBeanUtil.mapToBean(map, Page.class);

2、因为确定了Page里有size和current两个参数，也可以map.get()方法取值然后setter

Page page = new Page();
page.setSize((Integer) map.get("size"));
page.setSize((Integer) map.get("current"));

3、比如ids参数
这些参数本来可以用(@RequestBody List list)接收，这里使用map.get()方式获取。

List<Long> list = (List<Long>) map.get("ids");

1.3.3、发送delete请求

1、如果服务端将参数当做 java对象来封装接收则参数格式为：{data: param}
例如
后端是这样接受数据的
在这里插入图片描述
前端就应该这样发送

this.$axios({
        method: "delete",
        url: "/user/del/batch",
        data: ids,	//ids是一个数组
      }).then((res) => {
        if (res) {
          this.$message.success("批量删除成功");
          this.load();
        } else {
          this.$message.error("批量删除失败");
        }
      });

2、如果服务端将参数当做url 参数接收，则格式为：{params: param}，这样发送的url将变为http:www.XXX.com?a=…&b=…

var param={
	name:'jack',
	age:20
}
this.$axios.delete("/user", {params: param}).then(res=>{
	conslog(res);
 }

3、如果服务端将参数当做url 参数接收，则格式为：“/user/”+id ，这样发送的url将变为http:www.XXX.com/33
后端
在这里插入图片描述
前端

this.$axios.delete("/user/"+id).then((res) => {
  if (res) {
    this.$message.success("删除成功");
    this.load();
  } else {
    this.$message.error("sc失败");
  }
});

1.3.4、发送put请求

二、封装使用

二、安装axios

2.1、安装依赖

cnpm i axios -S
或
cnpm install axios --save

在这里插入图片描述

2.2、封装axios

在这里插入图片描述

import axios from "axios";

// axios.defaults.baseURL = "http://localhost:8081"

//创建request对象
const request = axios.create({
    baseURL:'/api',
    timeout: 5000,
})

//请求拦截器
request.interceptors.request.use(config => {
    config.headers['Content-Type'] = "application/json; charset=utf-8";
    //请求中附带token身份信息
    //config.headers['Authorization'] = localStorage.getItem("token")
    return config
}, error => {
    return Promise.reject(error);
});

//响应拦截器
request.interceptors.response.use(
    response => {
        console.log('response => ' + response)
        let res = response.data
        //成功
        if (res.code === 200) {
            //是文件类型直接返回
            if (response.config.responseType == 'blob') {
                return res;
            }

            //兼容服务端返回的字符串数据
            if (typeof res === 'string') {
                res = res ? JSON.parse(res) : res;
            }
            return res;
        }
    },
    error => {
        console.log('err' + error);
        return Promise.reject(error);

    }
)

export default request

2.3、main.js进行注册

//引进封装的axios
import request from “@/utils/request”

//添加到显示原型，全局使用
Vue.prototype.$axios = request;
在这里插入图片描述

2.4、使用请求

2.4.1、发送get请求

后端
在这里插入图片描述
前端

或者

2.4.2、发送post请求

后端使用pojo对象接收方式
后端
在这里插入图片描述
前端

后端使用map接收的方式
后端
在这里插入图片描述

前端
在这里插入图片描述
或者前端

2.4.3、发送delete请求

1、如果服务端将参数当做 java对象来封装接收则参数格式为：{data: param}
例如
后端是这样接受数据的
在这里插入图片描述
前端就应该这样发送

this.$axios({
        method: "delete",
        url: "/user/del/batch",
        data: ids,	//ids是一个数组
      }).then((res) => {
        if (res) {
          this.$message.success("批量删除成功");
          this.load();
        } else {
          this.$message.error("批量删除失败");
        }
      });

2、如果服务端将参数当做url 参数接收，则格式为：{params: param}，这样发送的url将变为http:www.XXX.com?a=…&b=…
后端
在这里插入图片描述
前端

var param={name:'jack',age:20}
this.$axios.delete(
	"/user", 
	{params: param}).then(res=>{}

3、如果服务端将参数当做url 参数接收，则格式为：“/user/”+id ，这样发送的url将变为http:www.XXX.com/33
后端
在这里插入图片描述
前端

this.$axios.delete("/user/"+id).then((res) => {
  if (res) {
    this.$message.success("删除成功");
    this.load();
  } else {
    this.$message.error("sc失败");
  }
});

三、同时传递多个参数

后端
在这里插入图片描述
前端

四、很早之前的使用版本也记录一下

安装：

npm install --save axios vue-axios

导入：
在main.js导入：

 import axios from 'axios'
 import VueAxios from 'vue-axios' 
 Vue.use(VueAxios,axios)

即可在任意文件中通过this.axios调用api获取数据了

附：HttpServlet对象参数的设置和获取

HttpSession

设置
在这里插入图片描述
获取

HttpServletReques

(1) request.getParameter(String name)：获取name对应的value，如果有多个，返回第一个；

(2) request.getParameterNames()：获取request里所有的name，返回Enumeration类型；

(3) request.getParameterValues(String name)：获取name对应的所有value；

文件上传和下载

**
 * 文件上传和下载
 */
@RestController
@RequestMapping("/common")
@Slf4j
public class CommonController {

    @Value("${reggie.path}")
    private String basePath;

    /**
     * 文件上传
     * @param file
     * @return
     */
    @PostMapping("/upload")
    public R<String> upload(MultipartFile file){
        //file是一个临时文件，需要转存到指定位置，否则本次请求完成后临时文件会删除
        log.info(file.toString());

        //原始文件名
        String originalFilename = file.getOriginalFilename();//abc.jpg
        String suffix = originalFilename.substring(originalFilename.lastIndexOf("."));

        //使用UUID重新生成文件名，防止文件名称重复造成文件覆盖
        String fileName = UUID.randomUUID().toString() + suffix;//dfsdfdfd.jpg

        //创建一个目录对象
        File dir = new File(basePath);
        //判断当前目录是否存在
        if(!dir.exists()){
            //目录不存在，需要创建
            dir.mkdirs();
        }

        try {
            //将临时文件转存到指定位置
            file.transferTo(new File(basePath + fileName));
        } catch (IOException e) {
            e.printStackTrace();
        }
        return R.success(fileName);
    }

    /**
     * 文件下载
     * @param name
     * @param response
     */
    @GetMapping("/download")
    public void download(String name, HttpServletResponse response){

        try {
            //输入流，通过输入流读取文件内容
            FileInputStream fileInputStream = new FileInputStream(new File(basePath + name));

            //输出流，通过输出流将文件写回浏览器
            ServletOutputStream outputStream = response.getOutputStream();

            response.setContentType("image/jpeg");

            int len = 0;
            byte[] bytes = new byte[1024];
            while ((len = fileInputStream.read(bytes)) != -1){
                outputStream.write(bytes,0,len);
                outputStream.flush();
            }

            //关闭资源
            outputStream.close();
            fileInputStream.close();
        } catch (Exception e) {
            e.printStackTrace();
        }

    }
}