1. get請求

1.1 不帶params（Restful風格）

封裝方法getBanner

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

getBanner方法調(diào)用（customerBannerId是一個數(shù)字）

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 注解取得請求路徑中的參數(shù)，注意此處的三個參數(shù)名要一致）

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

1.2 帶params（傳統(tǒng)風格）

封裝方法getBanner

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

getBanner方法調(diào)用（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("請求橫幅信息失敗，請刷新頁面后重試！");
      });
    },

后端接口（前端傳遞的對象的屬性名要與此處的參數(shù)名一致，否則接收不到）

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

1.3 帶params（傳統(tǒng)風格，后端用@RequestParam注解綁定參數(shù)值）

封裝方法delBanner

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

delBanner方法調(diào)用（傳入?yún)?shù)要為對象形式）

import {delBanner} from "@/api/recruit/banner";

? ? handleDelete(row) {
      this.$modal.confirm('是否確認刪除橫幅名稱為【' + row.name + '】的數(shù)據(jù)項？').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注解綁定參數(shù)值）

    @GetMapping("/del")
    public AjaxResult remove(@RequestParam("customerBannerId") Long customerBannerId) {
        // 處于顯示狀態(tài)不能刪除
        CustomerBanner banner = customerBannerService.getById(customerBannerId);
        if (banner.getIsShow() == 0 || banner.getIsShow().equals(0)) {
            return AjaxResult.error("【" + banner.getName() + "】橫幅處于顯示狀態(tài)，不能刪除");
        }
        return toAjax(customerBannerService.removeById(customerBannerId));
    }

2. post請求

封裝方法addBanner

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

addBanner方法調(diào)用（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));
    }


    /**
     * 獲取登錄用戶昵稱，數(shù)據(jù)庫用戶名字段存儲的是電話號碼，真正的用戶名存儲在昵稱字段
     */
    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方法調(diào)用

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方法調(diào)用

import {delBanner} from "@/api/recruit/banner";

    handleDelete(row) {
      const customerBannerIds = row.customerBannerId;
      this.$modal.confirm('是否確認刪除橫幅名稱為【' + row.name + '】的數(shù)據(jù)項？').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 注解取得請求路徑中的參數(shù)，此時方法參數(shù)名稱和需要綁定的url中變量名稱一致，可以簡寫）

@PathVariable 注解簡單用法文章來源地址http://www.zghlxwxcb.cn/news/detail-780252.html

    @DeleteMapping("/{customerBannerIds}")
? ? @Transactional
    public AjaxResult remove(@PathVariable Long[] customerBannerIds) {
        // 處于顯示狀態(tài)不能刪除
        for (Long customerBannerId : customerBannerIds) {
            CustomerBanner banner = customerBannerService.getById(customerBannerId);
            if (banner.getIsShow() == 0 || banner.getIsShow().equals(0)) {
                return AjaxResult.error("【" + banner.getName() + "】橫幅處于顯示狀態(tài)，不能刪除");
            }
        }
        return toAjax(customerBannerService.removeBatchByIds(Arrays.asList(customerBannerIds)));
    }