前端注意
axios
// 发送请求
axios({
method: 'post',
url: '/user/12345',
data: {
firstName: 'Fred',
lastName: 'Flintstone'
}
});
请求别名的用法
axios.post(url[, data[, config]])
参数url,参数数据,参数配置
axios.get(url[, config])
参数url,参数配置
this.axios.post("/post/delete",data,{headers...}) -- post的body请求形式
this.axios.post("/post/delete",null,{params}) -- post的form请求形式
this.axios.get("/get/list",{params}) -- get的form请求形式
注意
get
请求方式中,第一个参数为请求的url地址,第二个参数为请求的一些配置项,需要传递给后端的参数包含在配置项的data或者params属性中
post
请求则第一个参数为url地址,第二个参数是需要入参的json数据,第三个参数是入参以外的其他配置项。
后端
post的body请求形式
@PostMapping("isPass")
public String isPass(@RequestBody String name){
}
post的form请求形式,get的form请求形式
@PostMapping("isPass"),@GetMapping("isPass")
public String isPass( String name){
}
前端以数组的方式传参
1、@RequestParam 接收
var array = [1,2,3];
$.ajax({
type: "get",
url: "http://localhost:8096/test1",
data: {
'arrays':array //此处不需要序列化
},
contentType:"application/x-www-form-urlencoded",
success: function(result){
console.log("->",result)
}
})
// 接收方式一
@GetMapping("test1")
public AjaxResult test1(@RequestParam("arrays[]") Integer[] arrays){
return AjaxResult.success(arrays);
}
// 接收方式二
@GetMapping("test1")
public AjaxResult test1(@RequestParam("arrays[]") List<Integer> arrays){
return AjaxResult.success(arrays);
}
-----------------------------------------------------------------------------
var array = [1,2,3];
$.ajax({
type: "post", // post 请求
url: "http://localhost:8096/test2",
data: {
'arrays':array //此处不需要序列化
},
contentType:"application/x-www-form-urlencoded",
success: function(result){
console.log("->",result)
}
})
@PostMapping("test2")
public AjaxResult test2(@RequestParam("arrays[]") List<Integer> arrays){
return AjaxResult.success(arrays);
}
2、@RequestBody 接收
var array = [1,2,3];
$.ajax({
type: "post",
url: "http://192.168.0.112:8096/test",
data: JSON.stringify(array), //序列化
contentType:"application/json;charset=UTF-8",// 必须
dataType: "json",
success: function(result){
console.log("->",result)
}
})
// 接收方式一
@PostMapping("test")
public AjaxResult test(@RequestBody Integer[] arrays){
return AjaxResult.success(arrays);
}
// 接收方式二
@PostMapping("test")
public AjaxResult test(@RequestBody List<Integer> arrays){
return AjaxResult.success(arrays);
}
防抖和节流
本质上是优化高频率执行代码的一种手段
// 数据防抖
import { ref } from 'vue'
export const debounce = (fn: () => void, delay: number = 500) => {
const canRun = ref(true)
if (!canRun.value) return
canRun.value = false
return setTimeout(() => {
fn()
canRun.value = true
}, delay)
}
日夜颠倒头发少 ,单纯好骗恋爱脑 ,会背九九乘法表 ,下雨只会往家跑 ,搭讪只会说你好 ---- 2050781802@qq.com