当前位置:首页 > 编程笔记 > 正文
已解决

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

来自网友在路上 150850提问 提问时间:2023-10-05 20:45:01阅读次数: 50

最佳答案 问答题库508位专家为你答疑解惑

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}")@DSTransactionalpublic 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 = _listthis.total = res.data.pagination.totalthis.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 = falsethis.$emit('refresh', true)}})})} else {// 表单修改保存updateOLoadAnalysis(this.dataForm.id, _data).then((res) => {this.$message({message: res.msg,type: 'success',duration: 1000,onClose: () => {this.visible = falsethis.$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}")@DSTransactionalpublic ActionResult update(@PathVariable("id") String id,@RequestBody @Valid UserVo userVo){}}
查看全文

99%的人还看了

猜你感兴趣

版权申明

本文"前端Get Post Put Delect请求 传参数 不传参数给后端":http://eshow365.cn/6-15966-0.html 内容来自互联网,请自行判断内容的正确性。如有侵权请联系我们,立即删除!