若依框架前后端各个请求方式参数传递示例

- 日理万妓 2024-03-27 10:48 76阅读 0赞

1.  ## get请求 ##

### 1.1 不带params（Restful风格） ###

封装方法getBanner

export function getBanner(customerBannerId) {
      return request({
        url: '/recruit/banner/' + customerBannerId,
        method: 'get'
      })
    }

getBanner方法调用（customerBannerId是一个数字）

import {getBanner} from "@/api/recruit/banner"; 
    
        handleUpdate(row) {
          this.reset();
          this.pageStatus = "edit";
          const customerBannerId = row.customerBannerId || this.ids;
          getBanner(customerBannerId).then(response => {
            if (response.code === 200) {
              this.form = response.data;
              this.open = true;
              this.title = "修改【" + row.name + "】横幅";
            } else this.$modal.msgError("请求横幅信息失败，请刷新页面后重试！");
          });
        }

后端接口（@PathVariable 注解取得请求路径中的参数，注意此处的三个参数名要一致）

@GetMapping(value = "/{customerBannerId}")
        public AjaxResult getInfo(@PathVariable("customerBannerId") Long customerBannerId) {
            return AjaxResult.success(customerBannerService.getById(customerBannerId));
        }

### 1.2 带params（传统风格） ###

封装方法getBanner

export function getBanner(customerBannerId) {
      return request({
        url: '/recruit/banner/view',
        method: 'get',
        params: customerBannerId
      })
    }

getBanner方法调用（customerBannerId是一个对象，这里属性名与属性值一致，简写）

import {getBanner} from "@/api/recruit/banner";
    
        handleUpdate(row) {
          this.reset();
          this.pageStatus = "edit"
          const customerBannerId = row.customerBannerId || this.ids
          getBanner({customerBannerId}).then(response => {
            if (response.code === 200) {
              this.form = response.data;
              this.open = true;
              this.title = "修改【" + row.name + "】横幅";
            } else this.$modal.msgError("请求横幅信息失败，请刷新页面后重试！");
          });
        },

后端接口（前端传递的对象的属性名要与此处的参数名一致，否则接收不到）

@GetMapping(value = "/view")
        public AjaxResult getInfo(Long customerBannerId) {
            return AjaxResult.success(customerBannerService.getById(customerBannerId));
        }

### 1.3 带params（传统风格，后端用@RequestParam注解绑定参数值） ###

封装方法delBanner

export function delBanner(customerBannerId) {
      return request({
        url: '/recruit/banner/del',
        method: 'get',
        params: customerBannerId
      })
    }

delBanner方法调用（传入参数要为对象形式）

import {delBanner} from "@/api/recruit/banner";
    
        handleDelete(row) {
          this.$modal.confirm('是否确认删除横幅名称为【' + row.name + '】的数据项？').then(function () {
            return delBanner({customerBannerId: row.customerBannerId});
          }).then(res => {
            if (res.code === 200) {
              this.getList();
              this.$modal.msgSuccess("删除成功");
            } else this.$modal.msgError("删除失败，请刷新页面后重试！");
          }).catch(err => {
            console.log(err)
          });
        }

后端接口（@RequestParam注解绑定参数值）

@GetMapping("/del")
        public AjaxResult remove(@RequestParam("customerBannerId") Long customerBannerId) {
            // 处于显示状态不能删除
            CustomerBanner banner = customerBannerService.getById(customerBannerId);
            if (banner.getIsShow() == 0 || banner.getIsShow().equals(0)) {
                return AjaxResult.error("【" + banner.getName() + "】横幅处于显示状态，不能删除");
            }
            return toAjax(customerBannerService.removeById(customerBannerId));
        }

## 2. post请求 ##

封装方法addBanner

export function addBanner(data) {
      return request({
        url: '/recruit/banner/create',
        method: 'post',
        data: data
      })
    }

addBanner方法调用（this.form 为一个对象）

import {addBanner} from "@/api/recruit/banner";
    
        addBanner(this.form).then(response => {
          if (response.code === 200) {
            this.$modal.msgSuccess("新增成功");
            this.open = false;
            this.getList();
          } else this.$modal.msgError("新增失败，请刷新页面后重试！");
        });

后端接口（@RequestBody 注解读出前端传递data的各个属性，前提是data的属性名要与CustomerBanner的属性名一致）

@PostMapping("/create")
        public AjaxResult add(@RequestBody CustomerBanner customerBanner) {
            String userNickname = SecurityUtils.getUserNickname();//getUserNickname()：自己在若依框架SecurityUtils类添加的一个方法
            Long userId = SecurityUtils.getUserId();//获取登录用户id
            customerBanner.setCreateBy(userNickname);
            customerBanner.setCreateById(userId);
            customerBanner.setCreateTime(new Date());
            return toAjax(customerBannerService.save(customerBanner));
        }
    
    
        /**
         * 获取登录用户昵称，数据库用户名字段存储的是电话号码，真正的用户名存储在昵称字段
         */
        public static String getUserNickname()
        {
            LoginUser loginUser = SecurityContextHolder.get(SecurityConstants.LOGIN_USER, LoginUser.class);
            return loginUser.getSysUser().getNickName();
        }

## 3. put请求 ##

方法封装updateBanner

export function updateBanner(data) {
      return request({
        url: '/recruit/banner',
        method: 'put',
        data: data
      })
    }

updateBanner方法调用

import {updateBanner} from "@/api/recruit/banner";
    
        updateBanner(this.form).then(response => {
          if (response.code === 200) {
            this.$modal.msgSuccess("修改成功");
            this.open = false;
            this.getList();
          } else this.$modal.msgError("修改失败，请刷新页面后重试！");
        });

后端接口（@RequestBody 注解读出前端传递data的各个属性，前提是data的属性名要与CustomerBanner的属性名一致）

@PutMapping
        public AjaxResult edit(@RequestBody CustomerBanner customerBanner) {
            String userNickname = SecurityUtils.getUserNickname();
            Long userId = SecurityUtils.getUserId();
            customerBanner.setUpdateBy(userNickname);
            customerBanner.setUpdateById(userId);
            customerBanner.setUpdateTime(new Date());
            return toAjax(customerBannerService.updateById(customerBanner));
        }

## 4. delete请求 ##

封装方法delBanner

export function delBanner(customerBannerId) {
      return request({
        url: '/recruit/banner/' + customerBannerId,
        method: 'delete'
      })
    }

delBanner方法调用

import {delBanner} from "@/api/recruit/banner";
    
        handleDelete(row) {
          const customerBannerIds = row.customerBannerId;
          this.$modal.confirm('是否确认删除横幅名称为【' + row.name + '】的数据项？').then(function () {
            return delBanner(customerBannerIds);
          }).then(res => {
            if (res.code === 200) {
              this.getList();
              this.$modal.msgSuccess("删除成功");
            } else this.$modal.msgError("删除失败，请刷新页面后重试！");
          }).catch(err => {
            console.log(err)
          });
        }

后端接口（@PathVariable 注解取得请求路径中的参数，此时方法参数名称和需要绑定的url中变量名称一致，可以简写）

[@PathVariable 注解简单用法][PathVariable]

@DeleteMapping("/{customerBannerIds}")
        @Transactional
        public AjaxResult remove(@PathVariable Long[] customerBannerIds) {
            // 处于显示状态不能删除
            for (Long customerBannerId : customerBannerIds) {
                CustomerBanner banner = customerBannerService.getById(customerBannerId);
                if (banner.getIsShow() == 0 || banner.getIsShow().equals(0)) {
                    return AjaxResult.error("【" + banner.getName() + "】横幅处于显示状态，不能删除");
                }
            }
            return toAjax(customerBannerService.removeBatchByIds(Arrays.asList(customerBannerIds)));
        }

[PathVariable]: https://blessing.blog.csdn.net/article/details/108814901?spm=1001.2101.3001.6661.1&utm_medium=distribute.pc_relevant_t0.none-task-blog-2%7Edefault%7ECTRLIST%7ERate-1-108814901-blog-121411892.pc_relevant_3mothn_strategy_and_data_recovery&depth_1-utm_source=distribute.pc_relevant_t0.none-task-blog-2%7Edefault%7ECTRLIST%7ERate-1-108814901-blog-121411892.pc_relevant_3mothn_strategy_and_data_recovery&utm_relevant_index=1