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)); }
封装方法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(); }
方法封装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)); }
封装方法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中变量名称一致,可以简写)
@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))); }
来源地址:https://blog.csdn.net/D__O__N/article/details/128808119