• 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.idsgetBanner({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();//获取登录用户idcustomerBanner.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的属性名一致)

@PutMappingpublic 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 注解简单用法

@DeleteMapping("/{customerBannerIds}")@Transactionalpublic 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)));}