前端注意事件

  1. 前端注意
    1. axios
    2. 前端以数组的方式传参
  2. 防抖和节流

前端注意

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

×

喜欢就点赞,疼爱就打赏

相册 说点什么