前端Get Post Put Delect请求 传参数 不传参数给后端

Get请求不传参、Get请求传不是实体类的参数、Get请求传实体类的参数

Post 请求不传参数、Post请求传不是实体类的参数、Post请求传实体类的参数  总是分不清，其中Delect 请求使用的地方很少就先记录Delete请求吧文章来源地址https://www.toymoban.com/news/detail-729025.html

Delect 删除

单个删除

前端

<el-button type="text" @click="handleDel(scope.row.id)">删除</el-button>

      /**
       * 删除单条数据
       */
      handleDel(id) {
        this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
          type: 'warning'
        }).then(() => {
          del(id).then(res => {
           
          })
        })
      },

前端跳后端

/**
 * 删除单条数据
 * @param id 主键值
 */
export function del(id) {
  return request({
    url:define.api+'/user/' + id,
    method: 'DELETE'
  })
}

后端

    /**
     * 删除
     * @param id 主键
     */
    @DeleteMapping("/{id}")
    @DSTransactional
    public ActionResult delete(@PathVariable("id") String id){
        Userentity = service.getInfo(id);
        if(entity!=null){
            service.delete(entity);
        }
        return ActionResult.success("删除成功");
    }

批量删除

前端

<el-button type="danger" @click="batchDelete()">批量删除</el-button>
/**
       * 批量删除
       */
      batchDelete() {
        // 判断是否勾选了数据
        if (!this.multipleSelection.length) {
          this.$message({
            type: 'error',
            message: '请选择一条数据',
            duration: 1500,
          })
          return
        }
        let length = this.multipleSelection.length;
        let size = this.listQuery.pageSize;
        const ids = this.multipleSelection.join();

        if (length == size) {
          this.$confirm('请问您是选择当页数据还是选择全部数据？', '确认信息', {
            distinguishCancelAndClose: true,
            confirmButtonText: '全部数据',
            cancelButtonText: '当页数据',
            type: 'warning',
            center: true
          }).then(() => {
            this.$confirm('您确定要删除全部数据吗, 是否继续？', '提示', {
              type: 'warning'
            }).then(() => {
              // 批量删除全部。
              batchDeleteAll().then(res => {
                this.$message({
                  type: 'success',
                  message: res.msg,
                  onClose: () => {
                    this.initData()
                  }
                })
              })
            }).catch(() => {
            })
          }).catch(action => {
            this.$confirm('您确定要删除当页数据吗, 是否继续？', '提示', {
              type: 'warning'
            }).then(() => {
              //批量删除当页
              batchDelete(this.multipleSelection).then(res => {
                this.$message({
                  type: 'success',
                  message: res.msg,
                  onClose: () => {
                    this.initData()
                  }
                })
              })
            });
          });
        } else {
          this.$confirm('您确定要删除所选数据吗, 是否继续？', '提示', {
            type: 'warning'
          }).then(() => {
            batchDelete(this.multipleSelection).then(res => {
              this.$message({
                type: 'success',
                message: res.msg,
                onClose: () => {
                  this.initData()
                }
              })
            })
          });
        }
      },

前端跳后端

/**
 * 批量删除
 */
export function batchDeleteAll() {
  return request({
    url: api+'/user/batchDeleteAll',
    method: 'get'
  })
}

/**
 * 批量删除
 */
export function batchDelete(data) {
  return request({
    url: api+'/user/batchDelete',
    method: 'POST',
    data
  })
}

后端

@Slf4j
@RestController
@RequestMapping("/user")
public class UserController {

    @PostMapping("/batchDelete")
    public ActionResult batchDelete(@RequestBody List<String> ids) {
        boolean bool = mapper.batchDelete(ids);
        if (bool) {
            return ActionResult.success("删除成功");
        } else {
            return ActionResult.fail("删除失败");
        }
    }

    @GetMapping("/batchDeleteAll")
    public ActionResult batchDeleteAll() {
        boolean bool = mapper.batchDeleteAll();
        if (bool) {
            return ActionResult.success("删除成功");
        } else {
            return ActionResult.fail("删除失败");
        }
    }

}

boolean batchDeleteAll();    
<update id="batchDeleteAll">
        update user set IZ_DEL=1
</update>


boolean batchDelete(List<String> ids);

<update id="batchDelete">
        update user set IZ_DEL=1 where ID in
        <foreach collection="list" open="(" close=")" item="j" separator=",">
            #{j}
        </foreach>
    </update>

Get请求

Get请求加一个不是实体类的参数--通过id 查详情

前端

    /**
     * 初始化表单数据
     * @param id 主键值
     * @param isDetail 是否是详情页面，控制是否可编辑
     */
    init(id, isDetail) {
      this.dataForm.id = id || 0;
      this.visible = true;
      this.isDetail = isDetail || false;
      this.$nextTick(() => {
        this.$refs['elForm'].resetFields();
        if (this.dataForm.id) {
          this.loading = true
          //加载表单数据
          getInfoToEdit(this.dataForm.id).then(res => {
            this.dataInfo(res.data)
            this.loading = false
          })
        } else {
          this.clearData(this.dataForm)
        }
      });
      this.$store.commit('generator/UPDATE_RELATION_DATA', {})
    },

前端跳后端

/**
 * 获取表单详细（编辑页面调用）
 */
export function getInfoToEdit(id) {
  return request({
    url: define.api+'/user/' + id,
    method: 'GET'
  })
}

后端

@RestController
@RequestMapping("/user")
public class UserController {  
    /**
     * 根据id获取表单信息（编辑表单）
     * @param id 主键
     */
    @GetMapping("/{id}")
    public ActionResult<UserVo> info(@PathVariable("id") String id){
        User entity = service.getInfo(id);
        UserVo vo = JsonUtil.getJsonToBean(entity, UserVo.class);
        return ActionResult.success(vo);
    }
}  

Get请求加多个不是实体类的参数--前端有模糊查询

前端

//执行情况
      getExecutionRepairMonth(startDay,endDay){
        getExecutionRepairMonth(startDay,endDay).then(res=>{
          this.listData = res.data.map(item=>{
            return {name:item.name,value:item.num}
          });
        })
      },

前端跳后端

export function getExecution(startDay,endDay) {
	return request({
		url: define.api + `/repairMonth/getExecution?startDay=${startDay}&endDay=${endDay}`,
		method: 'get',
	})
}

后端

@RestController
@RequestMapping("/repairMonth")
public class RepairDayController {
    /**
     * @description: 通过检修计划编号 获取详情
     */
    @GetMapping("/getExecution")
    public ActionResult getExecution(String startDay,String endDay){
       
    }
}

Post请求

Post请求加一个是实体类的参数--前端有模糊查询返回List

前端

      /**
       * 初始化加载列表数据
       */
      initData() {
        this.listLoading = true;
        let _query = {
          ...this.listQuery,
          ...this.query,
          menuId: this.menuId
        };
        // 调用查询列表数据api接口
        listOLoadAnalysis(_query).then(res => {
          var _list =[];
          for(let i=0;i<res.data.list.length;i++){
            let _data = res.data.list[i];
            _list.push(_data)
          }
          this.list = _list
          this.total = res.data.pagination.total
          this.listLoading = false
        })
      },

前端跳后端

/**
 * 查询列表数据
 * @param data 查询条件参数对象
 */
export function listOLoadAnalysis(data) {
  return request({
    url: define.api+'/user/getList',
    method: 'POST',
    data
  })
}

后端

@RestController
@RequestMapping("/user")
public class UserController {   

     /**
     * 列表 表数据获取（带分页）
     * @param userQueryVO 查询条件对象
     */
    @PostMapping("/getList")
    public ActionResult list(@RequestBody UserQueryVO userQueryVO ){

    }

}

Put请求

Put请求携带实体类的参数---更新数据保存接口

前端

<el-button type="primary" @click="dataFormSubmit()" v-if="!isDetail"> 确 定</el-button>

    /**
     * 表单提交方法，会先进行表单数据校验
     */
    dataFormSubmit() {
      this.$refs['elForm'].validate((valid) => {
        if (valid) {
          this.request()
        }
      })
    },
    /**
     * 表单提交调用api接口方法
     */
    request() {
      var _data = this.dataList()
      if (!this.dataForm.id) {
        // 表单新增保存
        addOLoadAnalysis(_data).then((res) => {
          this.$message({
            message: res.msg,
            type: 'success',
            duration: 1000,
            onClose: () => {
              this.visible = false
              this.$emit('refresh', true)
            }
          })
        })
      } else {
        // 表单修改保存
        updateOLoadAnalysis(this.dataForm.id, _data).then((res) => {
          this.$message({
            message: res.msg,
            type: 'success',
            duration: 1000,
            onClose: () => {
              this.visible = false
              this.$emit('refresh', true)
            }
          })
        })
      }
    },

前端跳后端

/**
 * 新增表单保存数据
 * @param data 提交的表单对象
 */
export function addOLoadAnalysis(data) {
  return request({
    url: define.api+'/user',
    method: 'POST',
    data
  })
}

/**
 * 修改表单保存数据
 * @param data 提交的表单对象
 */
export function updateOLoadAnalysis(id, data) {
  return request({
    url: define.api+'/user/' + id,
    method: 'PUT',
    data
  })
}

后端

@RestController
@RequestMapping("/user")
public class UserController {

    /**
     * 更新数据保存接口
     *
     * @param id 主键
     * @param oLoadAnalysisVO 表单信息
     */
    @PutMapping("/{id}")
    @DSTransactional
    public ActionResult update(@PathVariable("id") String id,@RequestBody @Valid UserVo userVo){

    }

}
        

到了这里，关于前端Get Post Put Delect请求 传参数 不传参数给后端的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！