前台传送后端数据的几种方式

1.发送 get 请求将参数 通过？拼接在url后面

$.ajax({
        url: "/order/userPage?page="+page+"&amp;pageSize="+pageSize,    //请求的url地址  
        cache: "false",   //设置为false将不会从浏览器中加载请求信息
        async: "true",    //true所有请求均为异步请求
        dataType: "json", //请求返回数据的格式
        type:"get",      //请求方式

上面等同于==&gt;&gt;

async initData(){

   paging: {
      page: 1,
      pageSize: 5
   }
   const res = await orderPagingApi(this.paging) 
}

function orderPagingApi(data) {
    return $axios({
        'url': '/order/userPage',
        'method': 'get',
        //请求参数
        params: {...data}
    })

上面等同于==&gt;&gt;

async initData(){

   paging: {
      page: 1,
      pageSize: 5
   }
   const res = await orderPagingApi(this.paging) 
}

function orderPagingApi(data) {
    return $axios({

        'url': '/order/userPage',

        'method': 'get',

        'data': data
    })

后端接收参数

@GetMapping("/order/userPage")

@ResponseBody

public R<Page> userPage(Integer page,Integer pageSize){}

或

@GetMapping("/order/userPage")

@ResponseBody

public R<Page> userPage(@RequestParam（"page"）Integer page,@RequestParam（"pageSize"）Integer pageSize){}

2.将参数 拼接在url中，后台 通过占位符接收参数 /{id}

async initData(){
   
    const res = await addressFindOneApi(params.id)
}

function addressFindOneApi(id) {
  return $axios({
    'url': `/addressBook/${id}`,
    'method': 'get',
  })
}

后端接收参数

@GetMapping("/addressBook/{id}")
@ResponseBody

public R<AddressBook> backList(@PathVariable("id")Long id){}

3.通过 post 提交方式将form 表单中的数据 序列化后传递到后台。

async initData(){

    const res =await formAjax();

}

function formAjax() {

       $.ajax({

       url: "/login", 

       type: "post", 

       data: $("#form").serialize(),  // 对id为form的表单数据进行序列化并传递到后台

后端接收参数

@RequestMapping("/login")

@ResponseBody

//form表单的数据与User实体类的数据相对应

public String login (User user) {}

4.通过post 提交方式将form表单的类型是 json

async initData(){

    const res =await formAjax();

}

function formAjax() {

       $.ajax({

       url: "/login", 

       type: "post", 
       
       contentType: 'application/json',

后端接收参数

@RequestMapping("/login")

@ResponseBody

//form表单的数据与User实体类的数据相对应

public String login ( @RequestBody User user) {}

5. 前台将普通数据 转换为json

async initData(){

   paging: {
      page: 1,
      pageSize: 5
   }
   const res = await orderPagingApi(this.paging) 
}

function orderPagingApi(data) {
    return $axios({

        'url': '/order/userPage',

        'method': 'post',

         data: JSON.stringify(data),
    })

后台接收参数

@GetMapping("/order/userPage")
@ResponseBody

public R<Page> userPage(@RequesBody Map<Integer,Integer> map){

      Integer page = map.get("page");
        
      Integer pageSize = map.get("pageSize");   

}

或  ==>>

//假设PageInfo类中有属性与其相对应
@GetMapping("/order/userPage")
@ResponseBody

public R<Page> userPage(@RequesBody PageInfo pageInfo){

     Integer page = pageInfo.getPage();
 
     Integer pageSize = pageInfo.getPageSize();
}

6.接收参数出错案例

Cannot deserialize instance of `java.lang.String` out of START_OBJECT token

请求体中的 user 被认为是一个Object 对象，不能用String进行解析

修改前

@PostMapping("/regiest")
	public R<String> createUser(@RequestBody Map<String,String> map) {
		
		return R.success("保存成功");
	}

修改后

@PostMapping("/regiest")
	public R<String> createUser(@RequestBody Map<String,Object> map) {
		
		return R.success("保存成功");
	}

7. 使用 vue时Error in render: “TypeError: getStatus is not a function“

在 new Vue({

getStatus() ; //方法出错

} )

我的原因是粗心少了一个（使得这个方法不准确

8.前端 传参 {params: params} ,后端用 @RequestParams(“id”) 接参

//前端发送数据
this.$axios
       .delete("login/deleteUserInfo", 
          { params: {
               userId: this.id
          } 
        })
       .then(
         this.$message({
         type: "success",
         message: "删除用户信息成功",
      }))
       .catch(
        this.$message({
        type: "false",
        message: "删除用户信息失败",
      })
  )
//后端接收数据
@DeleteMapping("deleteUserInfo")
    public R deleteUserInfo(@RequestParam("userId") String userId){
        int result=userInfoService.deleteUserInfoById(userId);
        if(result>0){
            return R.ok();
        }
        return R.error();
    }

9.前端通过 {data : param} 传参，后端通过 @RequestBody 接参

//前端
deleteMessage() {
		  	axios.delete('login/deleteUserInfo', 
               { data : {
                   userId: this.id
                }}).then((response) => {
			});
}
//后端
@DeleteMapping("deleteUserInfo")
public R deleteUserInfo(@RequestBody String userId){
        int result=userInfoService.deleteUserInfoById(userId);
        if(result>0){
            return R.ok();
        }
        return R.error();
    }

10、el–select 数据回显 问题

 <el-form-item label="角色名称：" label-width="100px">
          <el-select
            placeholder="请选择角色名称"
            v-model="form.roleId"
            :label-width="formLabelWidth"
            style="width: 200px"
          >
            <el-option
              v-for="item in roleInfo"
              :key="item.value"
              :label="item.roleName"
              :value="item.roleId"
            >
            </el-option>
          </el-select>
        </el-form-item>