Springboot快速整合bootstrap-table使用，接口对接

最新推荐文章于 2024-08-07 08:30:00 发布

木子coding

最新推荐文章于 2024-08-07 08:30:00 发布

阅读量1k

点赞数 28

分类专栏：前端文章标签： spring boot bootstrap mybatis

本文链接：https://blog.csdn.net/weixin_44107140/article/details/137060529

版权

博客介绍了表格整合功能，自带全局搜索、分页等，添加了数据添加和编辑回显弹窗。给出接口案例，如增、删、改、查等接口，还介绍了对应后端实现和页面完整代码，同时提醒注意依赖引进、异步操作、数据对接等问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这个表格加持还是不错了，自带了全局搜索，分页，数据导出，卡片视图，等，本次整合添加了数据添加弹窗和编辑数据回显弹窗，附完整页面代码，只需要拿过来替换自己实际的接口即可。

效果图

接口案例

数据列表：

{
   
  "code": 200,
  "msg": "ok",
  "data": [
    {
   
      "categoryId": 52,
      "categoryName": "哈哈哈"
    },
    {
   
      "categoryId": 53,
      "categoryName": "哈哈哈地方"
    },
    {
   
      "categoryId": 7,
      "categoryName": "悬疑灵异"
    },
    {
   
      "categoryId": 4,
      "categoryName": "武侠仙侠"
    },
    {
   
      "categoryId": 3,
      "categoryName": "玄幻奇幻"
    }
  ]
}

增：/novel-category/add

删：/novel-category/delete/{id}

改：/novel-category/update

查：/novel-category/list

批量删：/novel-category/deleteBatch

对应后端实现

package com.xxx.readverse.controller;


import cn.dev33.satoken.util.SaResult;
import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
import com.baomidou.mybatisplus.core.metadata.IPage;
import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
import com.xxx.readverse.entity.Category;
import com.xxx.readverse.service.CategoryService;
import io.swagger.annotations.Api;
import io.swagger.annotations.ApiOperation;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.dao.DuplicateKeyException;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.*;

import java.util.Arrays;
import java.util.List;

@Controller
@RequestMapping("/novel-category")
@Api(tags = "小说分类")
@CrossOrigin
public class CategoryController {
   

    @Autowired
    private CategoryService novelCategoryService;


    @GetMapping("/list")
    @ApiOperation("分类列表")
    @ResponseBody
    public SaResult getNovelCategories() {
   
        List<Category> categoryList = novelCategoryService.list(new QueryWrapper<Category>().last("limit 12"));
        return SaResult.data(categoryList);
    }

    @PostMapping("/add")
    @ApiOperation("新增分类")
    @ResponseBody
    public SaResult add(Category novelCategory) {
   
        try {
   
            novelCategoryService.save(novelCategory);
        } catch (DuplicateKeyException e) {
   
            return SaResult.error("操作未成功，可能是因为数据重复导致的");
        }
        return SaResult.data(novelCategory.getCategoryId());
    }

    @GetMapping("/deleteBatch")
    @ApiOperation("批量删除")
    @ResponseBody
    public SaResult deleteBatch(@RequestParam("ids") Integer[] ids) {
   
        novelCategoryService.removeByIds(Arrays.asList(ids));
        return SaResult.ok();
    }

    @GetMapping("/delete/{id}")
    @ApiOperation("删除分类")
    @ResponseBody
    public SaResult delete(@PathVariable Integer id) {
   
        novelCategoryService.removeById(id);
        return SaResult.ok();
    }

    @PostMapping("/update")
    @ApiOperation("修改分类")
    @ResponseBody
    public SaResult update(Category novelCategory) {
   
        novelCategoryService.updateById(novelCategory);
        return SaResult.ok();
    }

    @GetMapping("/{id}")
    @ApiOperation("获取某个分类信息")
    @ResponseBody
    public SaResult getById(@PathVariable Integer id) {
   
        Category category = novelCategoryService.getById(id);
        return  SaResult.data(category);
    }
    
}