SpringBoot+Vue+Mybatis-plus 博客（五）：完成分类管理和标签管理前后端对接

刺骨的言语ヽ痛彻心扉 2023-01-03 04:50 124阅读 0赞

> [SpringBoot+Vue+Mybatis-plus 博客：个人博客介绍及效果展示][SpringBoot_Vue_Mybatis-plus]  
> [SpringBoot+Vue+Mybatis-plus 博客（一）：完成博客后台前端登录页面、后端登录接口][SpringBoot_Vue_Mybatis-plus 1]  
> [SpringBoot+Vue+Mybatis-plus 博客（二）：完成登录的前后端对接、完善左侧菜单栏][SpringBoot_Vue_Mybatis-plus 2]  
> [SpringBoot+Vue+Mybatis-plus 博客（三）：完成搜索及博客列表展示功能前后端][SpringBoot_Vue_Mybatis-plus 3]  
> [SpringBoot+Vue+Mybatis-plus 博客（四）：完成发布文章、编辑文章、删除文章及查询文章功能][SpringBoot_Vue_Mybatis-plus 4]  
> [SpringBoot+Vue+Mybatis-plus 博客（五）：完成分类管理和标签管理前后端对接][SpringBoot_Vue_Mybatis-plus 5]  
> [SpringBoot+Vue+Mybatis-plus 博客（六）：完成评论管理前后端交互][SpringBoot_Vue_Mybatis-plus 6]  
> [SpringBoot+Vue+Mybatis-plus 博客（七）：完成友链管理前后端对接][SpringBoot_Vue_Mybatis-plus 7]

### 文章目录 ###

*   *  效果
 *  一、分类管理后端接口
 *   *  1、TTypeService
     *  2、TTypeServiceImpl
     *  3、TTypeController
     *  4、测试
 *  二、标签管理后端接口
 *   *  1、TTagService
     *  2、TTagServiceImpl
     *  3、TTagController
     *  4、测试
 *  三、分类、标签管理前端
 *   *  1、CategoryBlog.vue
     *  2、TagBlog.vue

## 效果 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 1]

# 一、分类管理后端接口 #

## 1、TTypeService ##

/** * <p> * 服务类 * </p> * * @author 关注公众号：小L星光 * @since 2020-11-30 */
    public interface TTypeService extends IService<TType> { 
    
        RespBean pageTypes(Long current, Long size);
    
        RespBean getTypeByName(String name);
    
        RespBean deleteTypeById(Long id);
    
        RespBean updateType(TType tType);
    
        RespBean getTypeById(Long id);
    }

## 2、TTypeServiceImpl ##

/** * <p> * 服务实现类 * </p> * * @author 关注公众号：小L星光 * @since 2020-11-30 */
    @Service
    public class TTypeServiceImpl extends ServiceImpl<TTypeMapper, TType> implements TTypeService { 
    
        @Autowired
        TTypeMapper tTypeMapper;
    
        @Override
        public RespBean pageTypes(Long current, Long size) { 
            RespBean respBean = RespBean.build();
            //创建Page对象
            Page<TType> typePage = new Page<>(current,size);
            //构建条件
            QueryWrapper<TType> wrapper = new QueryWrapper<>();
            //调用mybatis plus分页方法进行查询
            tTypeMapper.selectPage(typePage,wrapper);
            //通过Page对象获取分页信息
            List<TType> typeList = typePage.getRecords(); //每页的数据 list集合
            long pagesize = typePage.getSize(); //每页显示的条数
            long total = typePage.getTotal(); //总记录数
            long pages = typePage.getPages(); //总页数
    
            respBean.setStatus(200);
            respBean.setObj(typePage);
            return respBean;
        }
    
        /** * 通过名称查询分类 * @param name * @return */
        @Override
        public RespBean getTypeByName(String name) { 
            RespBean respBean = RespBean.build();
            QueryWrapper<TType> queryWrapper = new QueryWrapper<TType>();
            queryWrapper.like("name",name);
            List<TType> typeList = tTypeMapper.selectList(queryWrapper);
            respBean.setStatus(200);
            respBean.setObj(typeList);
            return respBean;
        }
    
        @Override
        public RespBean deleteTypeById(Long id) { 
            RespBean respBean = RespBean.build();
            if (tTypeMapper.deleteById(id) == 1){ 
                respBean.setStatus(200);
                respBean.setMsg("删除分类成功");
                return respBean;
            }
            respBean.setMsg("删除分类失败");
            return respBean;
        }
    
        @Override
        public RespBean updateType(TType tType) { 
            RespBean respBean = RespBean.build();
            if (tTypeMapper.updateById(tType) == 1){ 
                respBean.setMsg("更新分类成功");
                respBean.setStatus(200);
                return respBean;
            }
            respBean.setMsg("更新分类失败");
            return respBean;
        }
    
        @Override
        public RespBean getTypeById(Long id) { 
            RespBean respBean = RespBean.build();
            TType tType = tTypeMapper.selectById(id);
            respBean.setStatus(200);
            respBean.setObj(tType);
            return respBean;
        }
    
    }

## 3、TTypeController ##

/** * <p> * 前端控制器 * </p> * * @author 关注公众号：小L星光 * @since 2020-11-30 */
    @RestController
    @RequestMapping("/type")
    public class TTypeController { 
    
        @Autowired
        TTypeService tTypeService;
    
        RespBean respBean = RespBean.build();
    
        /** * 保存分类专栏 * @param tType * @return */
        @PostMapping("/saveType")
        public RespBean saveType(@RequestBody TType tType){ 
            if (StringUtils.isEmpty(tType.getName())){ 
                respBean.setStatus(500);
                respBean.setMsg("分类专栏名称不能为空！");
                return respBean;
            }
            QueryWrapper<TType> queryWrapper = new QueryWrapper<TType>();
            queryWrapper.eq("name",tType.getName());
            List<TType> tBlogList = tTypeService.list(queryWrapper);
            if (tBlogList.size() > 0){ 
                respBean.setStatus(500);
                respBean.setMsg("添加失败，已有该分类专栏名称");
                return respBean;
            }
            Boolean result = tTypeService.save(tType);
            if (result){ 
                respBean.setStatus(200);
                respBean.setMsg("添加成功！");
                return respBean;
            }else { 
                respBean.setStatus(500);
                respBean.setMsg("添加失败！");
                return respBean;
            }
    
        }
    
        /** * 查询所有分类 * @return */
        @GetMapping("/getAllType")
        public RespBean getAllType(){ 
            List<TType> typeList = tTypeService.list();
            return RespBean.ok("查询成功！",typeList);
        }
    
        /** * 分类的分页查询 * @param current * @param size * @return */
        @GetMapping("/getTypeByPage")
        @ApiOperation("分类的分页查询")
        @ApiImplicitParams({ 
                @ApiImplicitParam(name = "current",value = "当前页") ,
                @ApiImplicitParam(name = "size",value = "每页的数量"),
        })
        public RespBean getByPage(Long current, Long size){ 
            return tTypeService.pageTypes(current, size);
        }
    
        /** * 通过名称查找分类 * @param name * @return */
        @GetMapping("/getTypeByName")
        public RespBean getTypeByName(String name){ 
            return tTypeService.getTypeByName(name);
        }
    
        /** * 更新分类 * @param tType * @return */
        @PutMapping("/updateType")
        public RespBean updateType(@RequestBody TType tType){ 
            if (StringUtils.isEmpty(tType.getName())){ 
                respBean.setMsg("分类名称不能为空");
                return respBean;
            }
            return tTypeService.updateType(tType);
        }
    
        /** * 删除分类 * @param id * @return */
        @DeleteMapping("deleteTypeById")
        public RespBean deleteTypeById(Long id){ 
            return tTypeService.deleteTypeById(id);
        }
    
        /** * 根据id查询分类 * @param id * @return */
        @GetMapping("/getTypeById")
        public RespBean getTypeById(Long id){ 
            return tTypeService.getTypeById(id);
        }
    
    }

## 4、测试 ##

更新分类  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 2]  
删除分类  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 3]  
通过名称查找  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 4]  
分页  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 5]

# 二、标签管理后端接口 #

## 1、TTagService ##

/** * <p> * 服务类 * </p> * * @author 关注公众号：小L星光 * @since 2020-11-30 */
    public interface TTagService extends IService<TTag> { 
    
        RespBean pageTags(Long current, Long size);
    
        RespBean getTagByName(String name);
    
        RespBean updateTag(TTag tTag);
    
        RespBean deleteTagById(Long id);
        
        RespBean getTagById(Long id);
    }

## 2、TTagServiceImpl ##

/** * <p> * 服务实现类 * </p> * * @author 关注公众号：小L星光 * @since 2020-11-30 */
    @Service
    public class TTagServiceImpl extends ServiceImpl<TTagMapper, TTag> implements TTagService { 
    
        @Autowired
        TTagMapper tTagMapper;
    
        @Override
        public RespBean pageTags(Long current, Long size) { 
            RespBean respBean = RespBean.build();
            //创建Page对象
            Page<TTag> tagPage = new Page<>(current,size);
            //构建条件
            QueryWrapper<TTag> wrapper = new QueryWrapper<>();
            //调用mybatis plus分页方法进行查询
            tTagMapper.selectPage(tagPage,wrapper);
            //通过Page对象获取分页信息
            List<TTag> typeList = tagPage.getRecords(); //每页的数据 list集合
            long pagesize = tagPage.getSize(); //每页显示的条数
            long total = tagPage.getTotal(); //总记录数
            long pages = tagPage.getPages(); //总页数
    
            respBean.setStatus(200);
            respBean.setObj(tagPage);
            return respBean;
        }
    
        @Override
        public RespBean getTagByName(String name) { 
            RespBean respBean = RespBean.build();
            QueryWrapper<TTag> queryWrapper = new QueryWrapper<TTag>();
            queryWrapper.like("name",name);
            List<TTag> tagList = tTagMapper.selectList(queryWrapper);
            respBean.setStatus(200);
            respBean.setObj(tagList);
            return respBean;
        }
    
        @Override
        public RespBean updateTag(TTag tTag) { 
            RespBean respBean = RespBean.build();
            if (tTagMapper.updateById(tTag) == 1){ 
                respBean.setMsg("更新标签成功");
                respBean.setStatus(200);
                return respBean;
            }
            respBean.setMsg("更新标签失败");
            return respBean;
        }
    
        @Override
        public RespBean deleteTagById(Long id) { 
            RespBean respBean = RespBean.build();
            if (tTagMapper.deleteById(id) == 1){ 
                respBean.setStatus(200);
                respBean.setMsg("删除标签成功");
                return respBean;
            }
            respBean.setMsg("删除标签失败");
            return respBean;
        }
    
        @Override
        public RespBean getTagById(Long id) { 
            RespBean respBean = RespBean.build();
            TTag tTag = tTagMapper.selectById(id);
            respBean.setStatus(200);
            respBean.setObj(tTag);
            return respBean;
        }
    
    }

## 3、TTagController ##

/** * <p> * 前端控制器 * </p> * * @author 关注公众号：小L星光 * @since 2020-11-30 */
    @RestController
    @RequestMapping("/tag")
    public class TTagController { 
    
        @Autowired
        TTagService tTagService;
    
        RespBean respBean = RespBean.build();
    
        @PostMapping("/saveTag")
        public RespBean saveTag(@RequestBody TTag tTag){ 
            if (StringUtils.isEmpty(tTag.getName())){ 
                respBean.setStatus(500);
                respBean.setMsg("标签名称不能为空！");
                return respBean;
            }
            QueryWrapper<TTag> queryWrapper = new QueryWrapper<TTag>();
            queryWrapper.eq("name",tTag.getName());
            List<TTag> tagList = tTagService.list(queryWrapper);
            if (tagList.size() > 0){ 
                respBean.setStatus(500);
                respBean.setMsg("添加失败，已有该标签名称");
                return respBean;
            }
            Boolean result = tTagService.save(tTag);
            if (result){ 
                respBean.setStatus(200);
                respBean.setMsg("添加标签成功！");
                return respBean;
            }else { 
                respBean.setStatus(500);
                respBean.setMsg("添加标签失败！");
                return respBean;
            }
    
        }
    
        /** * 查询所有标签 * @return */
        @GetMapping("/getAllTag")
        public RespBean getAllTag(){ 
            List<TTag> tagList = tTagService.list();
            return RespBean.ok("查询成功！",tagList);
        }
    
        /** * 标签的分页查询 * @param current * @param size * @return */
        @GetMapping("/getTagByPage")
        @ApiOperation("标签的分页查询")
        @ApiImplicitParams({ 
                @ApiImplicitParam(name = "current",value = "当前页") ,
                @ApiImplicitParam(name = "size",value = "每页的数量"),
        })
        public RespBean getTagByPage(Long current, Long size){ 
            return tTagService.pageTags(current, size);
        }
    
        /** * 通过名称查找标签 * @param name * @return */
        @GetMapping("/getTagByName")
        public RespBean getTagByName(String name){ 
            return tTagService.getTagByName(name);
        }
    
        /** * 更新标签 * @param tTag * @return */
        @PutMapping("/updateTag")
        public RespBean updateTag(@RequestBody TTag tTag){ 
            if (StringUtils.isEmpty(tTag.getName())){ 
                respBean.setMsg("分类名称不能为空");
                return respBean;
            }
            return tTagService.updateTag(tTag);
        }
    
        /** * 删除标签 * @param id * @return */
        @DeleteMapping("deleteTagById")
        public RespBean deleteTagById(Long id){ 
            return tTagService.deleteTagById(id);
        }
    
        /** * 根据id查询标签 * @param id * @return */
        @GetMapping("/getTagById")
        public RespBean getTagById(Long id){ 
            return tTagService.getTagById(id);
        }
    
    }

## 4、测试 ##

查询所有标签  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 6]  
分页  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 7]  
通过名称查找标签  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 8]  
添加标签  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 9]  
更新标签  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 10]  
删除标签  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 11]

# 三、分类、标签管理前端 #

## 1、CategoryBlog.vue ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 12]

<template>
      <div>
          <div style="margin-top: 20px;">
              
              <el-input size="small" v-model="input_name" placeholder="请输入分类名称，可回车搜索..." prefix-icon="el-icon-search"
              style="width: 400px;margin-right: 10px;" @keydown.enter.native="search_name"></el-input>
              <el-button size="small" type="primary"  @click="search_name" icon="el-icon-search">搜索</el-button>
              <el-button size="small" type="success"  @click="dialog_add = true" icon="el-icon-plus">新增</el-button>
          </div>
          <div>
              <el-table
              :data="typeData"
              style="width: 50%">
              <el-table-column
                label="编号"
                width="230">
                <template slot-scope="scope"> 
                  <span style="margin-left: 10px">{ {  scope.row.id }}</span>
                </template>
              </el-table-column>
              <el-table-column
                label="名称"
                width="230">
                <template slot-scope="scope">
                  <el-tag size="medium">{ {  scope.row.name }}</el-tag>
                </template>
              </el-table-column>
              <el-table-column label="操作">
                <template slot-scope="scope">
                  <el-button
                    size="mini"
                    @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                  <el-button
                    size="mini"
                    type="danger"
                    @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
    
          
          <div style="margin-top: 20px;">
            <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page.sync="currentPage"
            :page-size="pagesize"
            layout="total, prev, pager, next"
            :total="total">
          </el-pagination>
          </div>
    
           
           <el-dialog
           title="新建分类专栏"
           :visible.sync="dialog_add"
           width="30%"
           >
           <el-form status-icon  label-width="120px">
             <el-form-item label="分类专栏名">
               <el-input v-model="type_add.name" placeholder="请输入要新建的分类专栏名"
               :rules="{ 
                required: true, message: '文章类型不能为空', trigger: 'blur'
                }"></el-input>
             </el-form-item>
           </el-form>
            <span slot="footer" class="dialog-footer">
               <el-button @click="dialog_add = false">取 消</el-button>
               <el-button type="primary" @click="addNewType">确 定</el-button>
             </span>
         </el-dialog>
    
          
          <el-dialog
          title="编辑分类专栏"
          :visible.sync="dialog_edit"
          width="30%"
          >
          <el-form status-icon  label-width="120px">
            <el-form-item label="分类专栏名">
              <el-input v-model="type_edit.name"
              :rules="{ 
                required: true, message: '文章类型不能为空', trigger: 'blur'
                }"></el-input>
            </el-form-item>
          </el-form>
            <span slot="footer" class="dialog-footer">
              <el-button @click="dialog_edit = false">取 消</el-button>
              <el-button type="primary" @click="updateType">确 定</el-button>
            </span>
          </el-dialog>
    
      </div>
    </template>
    
    <script>
    export default { 
      name: 'CategoryBlog',
      data () { 
       return { 
          typeData:[],  //分类数据
          currentPage: 1,  //当前页
          total:0, //总记录数
          pagesize:5, //页面大小
          input_name:'', //搜索框值
          dialog_add: false, //添加分类的对话框
          dialog_edit: false, //编辑分类的对话框
          type_add:{ 
            name:'',  //分类名称
          },
          type_edit:{ 
            id:'',
            name:''
          }
       }
      },
      mounted() { 
        this.initType();
      },
      methods:{ 
        //初始化分类数据
        initType(){ 
          const _this = this
          this.getRequest('/type/getTypeByPage?current=' + this.currentPage + '&size=' + this.pagesize).then(resp=>{ 
            console.log(resp)
            _this.typeData = resp.obj.records
            _this.total = resp.obj.total
          })
        },
        //编辑分类
        handleEdit(index, row) { 
          const _this = this
          console.log(index, row);
          this.dialog_edit = true
          this.getRequest('/type/getTypeById?id=' + row.id).then(resp=>{ 
              console.log(resp)
              _this.type_edit = resp.obj
          })
        },
        //更新分类
        updateType(){ 
          const _this = this 
          this.putRequest('/type/updateType',this.type_edit).then(resp=>{ 
            if(resp){ 
              this.initType()
              _this.dialog_edit = false
            }
          })
        },
        //删除分类
        handleDelete(index, row) { 
          console.log(index, row);
          const _this = this
          this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', { 
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => { 
              this.deleteRequest('/type/deleteTypeById?id=' + row.id).then(resp=>{ 
                if(resp){ 
                  this.initType()
                }
              })
            }).catch(() => { 
              this.$message({ 
                type: 'info',
                message: '已取消删除'
              });          
            });
         
        },
        //添加分类
        addNewType(){ 
          const _this = this
          this.postRequest('/type/saveType',this.type_add).then(resp=>{ 
            console.log(resp)
            _this.input_name =''
            _this.dialog_add = false
          })
        },
        //搜索分类
        search_name(){ 
           const _this = this
           this.getRequest('/type/getTypeByName?name=' + this.input_name).then(resp=>{ 
             console.log(resp)
             if(_this.input_name == ''){ 
               _this.initTag();
             }else{ 
              _this.typeData = resp.obj
              _this.input_name = ''
             }
             
    
           })
        },
        handleSizeChange(val) { 
          console.log(`每页 ${ val} 条`);
        },
        handleCurrentChange(val) { 
          console.log(`当前页: ${ val}`);
          this.currentPage = val
          this.initType()
        }
      }
    }
    </script>
    
    <style scoped>
    
    </style>

## 2、TagBlog.vue ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 13]

<template>
      <div>
          <div style="margin-top: 20px;">
              
              <el-input size="small" v-model="input_name" placeholder="请输入标签名称，可回车搜索..." prefix-icon="el-icon-search"
              style="width: 400px;margin-right: 10px;" @keydown.enter.native="search_name"></el-input>
              <el-button size="small" type="primary"  @click="search_name" icon="el-icon-search">搜索</el-button>
              <el-button size="small" type="success"  @click="dialog_add = true" icon="el-icon-plus">新增</el-button>
          </div>
          <div>
              <el-table
              :data="tagData"
              style="width: 50%">
              <el-table-column
                label="编号"
                width="230">
                <template slot-scope="scope"> 
                  <span style="margin-left: 10px">{ {  scope.row.id }}</span>
                </template>
              </el-table-column>
              <el-table-column
                label="名称"
                width="230">
                <template slot-scope="scope">
                  <el-tag size="medium">{ {  scope.row.name }}</el-tag>
                </template>
              </el-table-column>
              <el-table-column label="操作">
                <template slot-scope="scope">
                  <el-button
                    size="mini"
                    @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                  <el-button
                    size="mini"
                    type="danger"
                    @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
    
          
          <div style="margin-top: 20px;">
            <el-pagination
            background
            @current-change="handleCurrentChange"
            :current-page.sync="currentPage"
            :page-size="pagesize"
            layout="total, prev, pager, next"
            :total="total">
          </el-pagination>
          </div>
    
           
           <el-dialog
           title="新建标签"
           :visible.sync="dialog_add"
           width="30%"
           >
           <el-form status-icon  label-width="120px">
             <el-form-item label="标签名称">
               <el-input v-model="tag_add.name" placeholder="请输入要新建的标签名称"
               :rules="{ 
                required: true, message: '不能为空', trigger: 'blur'
                }"></el-input>
             </el-form-item>
           </el-form>
            <span slot="footer" class="dialog-footer">
               <el-button @click="dialog_add = false">取 消</el-button>
               <el-button type="primary" @click="addNewTag">确 定</el-button>
             </span>
         </el-dialog>
    
          
          <el-dialog
          title="编辑标签"
          :visible.sync="dialog_edit"
          width="30%"
          >
          <el-form status-icon  label-width="120px">
            <el-form-item label="标签名称">
              <el-input v-model="tag_edit.name"
              :rules="{ 
                required: true, message: '不能为空', trigger: 'blur'
                }"></el-input>
            </el-form-item>
          </el-form>
            <span slot="footer" class="dialog-footer">
              <el-button @click="dialog_edit = false">取 消</el-button>
              <el-button type="primary" @click="updateTag">确 定</el-button>
            </span>
          </el-dialog>
    
      </div>
    </template>
    
    <script>
    export default { 
      name: 'TagBlog',
      data () { 
       return { 
          tagData:[],  //标签数据
          currentPage: 1,  //当前页
          total:0, //总记录数
          pagesize:5, //页面大小
          input_name:'', //搜索框值
          dialog_add: false, //添加标签的对话框
          dialog_edit: false, //编辑标签的对话框
          tag_add:{ 
            name:'',  //标签名称
          },
          tag_edit:{ 
            id:'',
            name:''
          }
       }
      },
      mounted() { 
        this.initTag();
      },
      methods:{ 
        //初始化分类数据
        initTag(){ 
          const _this = this
          this.getRequest('/tag/getTagByPage?current=' + this.currentPage + '&size=' + this.pagesize).then(resp=>{ 
            console.log(resp)
            _this.tagData = resp.obj.records
            _this.total = resp.obj.total
          })
        },
        //编辑分类
        handleEdit(index, row) { 
          const _this = this
          console.log(index, row);
          this.dialog_edit = true
          this.getRequest('/tag/getTagById?id=' + row.id).then(resp=>{ 
              console.log(resp)
              _this.tag_edit = resp.obj
          })
        },
        //更新分类
        updateTag(){ 
          const _this = this 
          this.putRequest('/tag/updateTag',this.tag_edit).then(resp=>{ 
            if(resp){ 
              this.initTag()
              _this.dialog_edit = false
            }
          })
        },
        //删除分类
        handleDelete(index, row) { 
          console.log(index, row);
          const _this = this
          this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', { 
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => { 
              this.deleteRequest('/tag/deleteTagById?id=' + row.id).then(resp=>{ 
                if(resp){ 
                  this.initTag()
                }
              })
            }).catch(() => { 
              this.$message({ 
                type: 'info',
                message: '已取消删除'
              });          
            });
         
        },
        //添加分类
        addNewTag(){ 
          const _this = this
          this.postRequest('/tag/saveTag',this.tag_add).then(resp=>{ 
            console.log(resp)
            _this.input_name =''
            _this.dialog_add = false
          })
        },
        //搜索分类
        search_name(){ 
           const _this = this
           this.getRequest('/tag/getTagByName?name=' + this.input_name).then(resp=>{ 
             console.log(resp)
             if(_this.input_name == ''){ 
               _this.initTag();
             }else{ 
              _this.tagData = resp.obj
              _this.input_name = ''
             }
             
    
           })
        },
        //分页
        handleCurrentChange(val) { 
          console.log(`当前页: ${ val}`);
          this.currentPage = val
          this.initTag()
        }
      }
    }
    </script>
    
    <style scoped>
    
    </style>

--------------------

关注【小L星光】回复 “博客” 即可获整个项目源码 ~  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 14]

[SpringBoot_Vue_Mybatis-plus]: https://blog.csdn.net/m0_45234510/article/details/114599074
[SpringBoot_Vue_Mybatis-plus 1]: https://blog.csdn.net/m0_45234510/article/details/110405346
[SpringBoot_Vue_Mybatis-plus 2]: https://blog.csdn.net/m0_45234510/article/details/110494715
[SpringBoot_Vue_Mybatis-plus 3]: https://blog.csdn.net/m0_45234510/article/details/110932322
[SpringBoot_Vue_Mybatis-plus 4]: https://blog.csdn.net/m0_45234510/article/details/111075386
[SpringBoot_Vue_Mybatis-plus 5]: https://blog.csdn.net/m0_45234510/article/details/112315926
[SpringBoot_Vue_Mybatis-plus 6]: https://blog.csdn.net/m0_45234510/article/details/114150638
[SpringBoot_Vue_Mybatis-plus 7]: https://blog.csdn.net/m0_45234510/article/details/114155484
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70]: /images/20221119/3e9fb206e6074b78bafe270394b4151d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 1]: /images/20221119/049dc5c377024537a7ff248289a6d6b4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 2]: /images/20221119/ced0a6dd1ef7462a9de016ff9fe71143.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 3]: /images/20221119/a54db9f234d645d3ac6a9962bd290c38.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 4]: /images/20221119/b62b0458fbbb4bd892555c42c6f0e7aa.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 5]: /images/20221119/1a47c0051df146148ec669a43bdff0f9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 6]: /images/20221119/7be57723090048c5bee23c4ac1334029.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 7]: /images/20221119/13b8cba342604ddbb544121f068fefc9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 8]: /images/20221119/cf592c4baee14ff99f360f9268f822f4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 9]: /images/20221119/fb190a75ddb74efb951f5a38fb681293.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 10]: /images/20221119/782cba2e11c84592a6adb0a0872a0552.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 11]: /images/20221119/44a1717a4c0947ea90d2178397dcf83e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 12]: /images/20221119/8d98636537df4fc5a83a69376a507cfd.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 13]: /images/20221119/fd430d40764040fcac83017a13dc82c8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 14]: /images/20221119/139a3378ef5d4f69a8dab3a064fcbaa6.png