一、直接使用
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();
}
}
}