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

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

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

    Delect 删除

    单个删除

    前端

    1. "text" @click="handleDel(scope.row.id)">删除
    2.  
    3.       /**
    4.        * 删除单条数据
    5.        */
    6.       handleDel(id) {
    7.         this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
    8.           type: 'warning'
    9.         }).then(() => {
    10.           del(id).then(res => {
    11.            
    12.           })
    13.         })
    14.       },

    前端跳后端

    1. /**
    2.  * 删除单条数据
    3.  * @param id 主键值
    4.  */
    5. export function del(id) {
    6.   return request({
    7.     url:define.api+'/user/' + id,
    8.     method: 'DELETE'
    9.   })
    10. }

    后端

    1.     /**
    2.      * 删除
    3.      * @param id 主键
    4.      */
    5.     @DeleteMapping("/{id}")
    6.     @DSTransactional
    7.     public ActionResult delete(@PathVariable("id") String id){
    8.         Userentity = service.getInfo(id);
    9.         if(entity!=null){
    10.             service.delete(entity);
    11.         }
    12.         return ActionResult.success("删除成功");
    13.     }

    批量删除

    前端

    1. "danger" @click="batchDelete()">批量删除
    2. /**
    3.        * 批量删除
    4.        */
    5.       batchDelete() {
    6.         // 判断是否勾选了数据
    7.         if (!this.multipleSelection.length) {
    8.           this.$message({
    9.             type: 'error',
    10.             message: '请选择一条数据',
    11.             duration: 1500,
    12.           })
    13.           return
    14.         }
    15.         let length = this.multipleSelection.length;
    16.         let size = this.listQuery.pageSize;
    17.         const ids = this.multipleSelection.join();
    18.  
    19.         if (length == size) {
    20.           this.$confirm('请问您是选择当页数据还是选择全部数据？', '确认信息', {
    21.             distinguishCancelAndClose: true,
    22.             confirmButtonText: '全部数据',
    23.             cancelButtonText: '当页数据',
    24.             type: 'warning',
    25.             center: true
    26.           }).then(() => {
    27.             this.$confirm('您确定要删除全部数据吗, 是否继续？', '提示', {
    28.               type: 'warning'
    29.             }).then(() => {
    30.               // 批量删除全部。
    31.               batchDeleteAll().then(res => {
    32.                 this.$message({
    33.                   type: 'success',
    34.                   message: res.msg,
    35.                   onClose: () => {
    36.                     this.initData()
    37.                   }
    38.                 })
    39.               })
    40.             }).catch(() => {
    41.             })
    42.           }).catch(action => {
    43.             this.$confirm('您确定要删除当页数据吗, 是否继续？', '提示', {
    44.               type: 'warning'
    45.             }).then(() => {
    46.               //批量删除当页
    47.               batchDelete(this.multipleSelection).then(res => {
    48.                 this.$message({
    49.                   type: 'success',
    50.                   message: res.msg,
    51.                   onClose: () => {
    52.                     this.initData()
    53.                   }
    54.                 })
    55.               })
    56.             });
    57.           });
    58.         } else {
    59.           this.$confirm('您确定要删除所选数据吗, 是否继续？', '提示', {
    60.             type: 'warning'
    61.           }).then(() => {
    62.             batchDelete(this.multipleSelection).then(res => {
    63.               this.$message({
    64.                 type: 'success',
    65.                 message: res.msg,
    66.                 onClose: () => {
    67.                   this.initData()
    68.                 }
    69.               })
    70.             })
    71.           });
    72.         }
    73.       },

    前端跳后端

    1. /**
    2.  * 批量删除
    3.  */
    4. export function batchDeleteAll() {
    5.   return request({
    6.     url: api+'/user/batchDeleteAll',
    7.     method: 'get'
    8.   })
    9. }
    10.  
    11. /**
    12.  * 批量删除
    13.  */
    14. export function batchDelete(data) {
    15.   return request({
    16.     url: api+'/user/batchDelete',
    17.     method: 'POST',
    18.     data
    19.   })
    20. }

    后端

    1. @Slf4j
    2. @RestController
    3. @RequestMapping("/user")
    4. public class UserController {
    5.  
    6.     @PostMapping("/batchDelete")
    7.     public ActionResult batchDelete(@RequestBody List ids) {
    8.         boolean bool = mapper.batchDelete(ids);
    9.         if (bool) {
    10.             return ActionResult.success("删除成功");
    11.         } else {
    12.             return ActionResult.fail("删除失败");
    13.         }
    14.     }
    15.  
    16.     @GetMapping("/batchDeleteAll")
    17.     public ActionResult batchDeleteAll() {
    18.         boolean bool = mapper.batchDeleteAll();
    19.         if (bool) {
    20.             return ActionResult.success("删除成功");
    21.         } else {
    22.             return ActionResult.fail("删除失败");
    23.         }
    24.     }
    25.  
    26. }
    1. boolean batchDeleteAll();    
    2. <update id="batchDeleteAll">
    3.         update user set IZ_DEL=1
    4. update>
    5.  
    6.  
    7. boolean batchDelete(List<String> ids);
    8.  
    9. <update id="batchDelete">
    10.         update user set IZ_DEL=1 where ID in
    11.         <foreach collection="list" open="(" close=")" item="j" separator=",">
    12.             #{j}
    13.         foreach>
    14.     update>
    15.  
    16.

    Get请求

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

    前端

    1.     /**
    2.      * 初始化表单数据
    3.      * @param id 主键值
    4.      * @param isDetail 是否是详情页面，控制是否可编辑
    5.      */
    6.     init(id, isDetail) {
    7.       this.dataForm.id = id || 0;
    8.       this.visible = true;
    9.       this.isDetail = isDetail || false;
    10.       this.$nextTick(() => {
    11.         this.$refs['elForm'].resetFields();
    12.         if (this.dataForm.id) {
    13.           this.loading = true
    14.           //加载表单数据
    15.           getInfoToEdit(this.dataForm.id).then(res => {
    16.             this.dataInfo(res.data)
    17.             this.loading = false
    18.           })
    19.         } else {
    20.           this.clearData(this.dataForm)
    21.         }
    22.       });
    23.       this.$store.commit('generator/UPDATE_RELATION_DATA', {})
    24.     },

    前端跳后端

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

    后端

    1. @RestController
    2. @RequestMapping("/user")
    3. public class UserController {  
    4.     /**
    5.      * 根据id获取表单信息（编辑表单）
    6.      * @param id 主键
    7.      */
    8.     @GetMapping("/{id}")
    9.     public ActionResult info(@PathVariable("id") String id){
    10.         User entity = service.getInfo(id);
    11.         UserVo vo = JsonUtil.getJsonToBean(entity, UserVo.class);
    12.         return ActionResult.success(vo);
    13.     }
    14. }

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

    前端

    1. //执行情况
    2.       getExecutionRepairMonth(startDay,endDay){
    3.         getExecutionRepairMonth(startDay,endDay).then(res=>{
    4.           this.listData = res.data.map(item=>{
    5.             return {name:item.name,value:item.num}
    6.           });
    7.         })
    8.       },

    前端跳后端

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

    后端

    1. @RestController
    2. @RequestMapping("/repairMonth")
    3. public class RepairDayController {
    4.     /**
    5.      * @description: 通过检修计划编号 获取详情
    6.      */
    7.     @GetMapping("/getExecution")
    8.     public ActionResult getExecution(String startDay,String endDay){
    9.        
    10.     }
    11. }

    Post请求

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

    前端

    1.       /**
    2.        * 初始化加载列表数据
    3.        */
    4.       initData() {
    5.         this.listLoading = true;
    6.         let _query = {
    7.           ...this.listQuery,
    8.           ...this.query,
    9.           menuId: this.menuId
    10.         };
    11.         // 调用查询列表数据api接口
    12.         listOLoadAnalysis(_query).then(res => {
    13.           var _list =[];
    14.           for(let i=0;idata.list.length;i++){
    15.             let _data = res.data.list[i];
    16.             _list.push(_data)
    17.           }
    18.           this.list = _list
    19.           this.total = res.data.pagination.total
    20.           this.listLoading = false
    21.         })
    22.       },

    前端跳后端

    1. /**
    2.  * 查询列表数据
    3.  * @param data 查询条件参数对象
    4.  */
    5. export function listOLoadAnalysis(data) {
    6.   return request({
    7.     url: define.api+'/user/getList',
    8.     method: 'POST',
    9.     data
    10.   })
    11. }

    后端

    1. @RestController
    2. @RequestMapping("/user")
    3. public class UserController {   
    4.  
    5.      /**
    6.      * 列表 表数据获取（带分页）
    7.      * @param userQueryVO 查询条件对象
    8.      */
    9.     @PostMapping("/getList")
    10.     public ActionResult list(@RequestBody UserQueryVO userQueryVO ){
    11.  
    12.     }
    13.  
    14. }
    15.

    Put请求

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

    前端

    1. "primary" @click="dataFormSubmit()" v-if="!isDetail"> 确 定
    2.  
    3.     /**
    4.      * 表单提交方法，会先进行表单数据校验
    5.      */
    6.     dataFormSubmit() {
    7.       this.$refs['elForm'].validate((valid) => {
    8.         if (valid) {
    9.           this.request()
    10.         }
    11.       })
    12.     },
    13.     /**
    14.      * 表单提交调用api接口方法
    15.      */
    16.     request() {
    17.       var _data = this.dataList()
    18.       if (!this.dataForm.id) {
    19.         // 表单新增保存
    20.         addOLoadAnalysis(_data).then((res) => {
    21.           this.$message({
    22.             message: res.msg,
    23.             type: 'success',
    24.             duration: 1000,
    25.             onClose: () => {
    26.               this.visible = false
    27.               this.$emit('refresh', true)
    28.             }
    29.           })
    30.         })
    31.       } else {
    32.         // 表单修改保存
    33.         updateOLoadAnalysis(this.dataForm.id, _data).then((res) => {
    34.           this.$message({
    35.             message: res.msg,
    36.             type: 'success',
    37.             duration: 1000,
    38.             onClose: () => {
    39.               this.visible = false
    40.               this.$emit('refresh', true)
    41.             }
    42.           })
    43.         })
    44.       }
    45.     },

    前端跳后端

    1. /**
    2.  * 新增表单保存数据
    3.  * @param data 提交的表单对象
    4.  */
    5. export function addOLoadAnalysis(data) {
    6.   return request({
    7.     url: define.api+'/user',
    8.     method: 'POST',
    9.     data
    10.   })
    11. }
    12.  
    13. /**
    14.  * 修改表单保存数据
    15.  * @param data 提交的表单对象
    16.  */
    17. export function updateOLoadAnalysis(id, data) {
    18.   return request({
    19.     url: define.api+'/user/' + id,
    20.     method: 'PUT',
    21.     data
    22.   })
    23. }

    后端

    1. @RestController
    2. @RequestMapping("/user")
    3. public class UserController {
    4.  
    5.     /**
    6.      * 更新数据保存接口
    7.      *
    8.      * @param id 主键
    9.      * @param oLoadAnalysisVO 表单信息
    10.      */
    11.     @PutMapping("/{id}")
    12.     @DSTransactional
    13.     public ActionResult update(@PathVariable("id") String id,@RequestBody @Valid UserVo userVo){
    14.  
    15.     }
    16.  
    17. }
    
                
    
                    
    
                
    • 

                
  • 

                    相关阅读:
    
                    
JuiceFS分布式文件系统源码分析（Java层）                            
    
设计模式：外观模式（C#、JAVA、JavaScript、C++、Python、Go、PHP）                            
    
（1）安装hadoop之虚拟机准备（配置IP与主机名）                            
    
[Unity3D]用C#在unity里面写一个简单的红绿灯                            
    
敏捷.敏捷项目管理第二版.Jim Highsmith                            
    
【LeetCode】36、有效的数独                            
    
【C++初阶（二）】缺省参数&函数重载                            
    
美团前端二面常考react面试题（附答案）                            
    
激发创新，助力研究：CogVLM，强大且开源的视觉语言模型亮相                            
    
JavaScript 正则表达式                            
    
                        
                
    • 
                
  • 
                    原文地址：https://blog.csdn.net/xy58451921/article/details/133383107
                
    •