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

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

Post 请求不传参数、Post请求传不是实体类的参数、Post请求传实体类的参数 总是分不清，其中Delect 请求使用的地方很少就先记录Delete请求吧

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("删除成功");
    }

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){

    }

}