SpringBoot+Vue+Mybatis-plus 博客（三）：完成搜索及博客列表展示功能前后端

桃扇骨 2022-12-27 08:45 108阅读 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]

### 文章目录 ###

*  一、博客管理
 *   *  1、在AllBlogs添加标签页
     *  2、【全部】文章展示页面
 *  二、博客展示后端开发
 *   *  1、修改RespBean
     *  2、分页查询 修改TBlogService
     *  3、修改TBlogServiceImpl
     *  4、修改TBlogController
     *  5、测试
     *  6、根据标题查询
     *  7、测试
     *  8、日期格式化
 *  三、博客展示前端对接
 *   *  1、新建搜索专用子组件
     *  2、新建通用博客列表子组件
     *  3、修改博客管理
     *  4、说明一下父组件如何传值给子组件
     *  5、效果展示

# 一、博客管理 #

## 1、在AllBlogs添加标签页 ##

先看效果：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70]  
开始实现：

[https://element.eleme.cn/\#/zh-CN/component/tabs][https_element.eleme.cn_zh-CN_component_tabs]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 1]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 2]

<template>
      <div>
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="全部（120）" name="first">全部（120）</el-tab-pane>
          <el-tab-pane label="原创（20）" name="second">原创（20）</el-tab-pane>
          <el-tab-pane label="转载（20）" name="third">转载（20）</el-tab-pane>
          <el-tab-pane label="草稿（20）" name="fourth">草稿（20）</el-tab-pane>
          <el-tab-pane label="公开（50）" name="fifth">公开（50）</el-tab-pane>
          <el-tab-pane label="私密（10）" name="sixth">私密（10）</el-tab-pane>
          <el-tab-pane label="回收站（20）" name="serven">回收站（20）</el-tab-pane>
        </el-tabs>
      </div>
    </template>
    
    <script>
    export default { 
      name: 'AllBlogs',
      data () { 
       return { 
        activeName: 'second'
       }
      },
      methods:{ 
        handleClick(tab, event) { 
            console.log(tab.index);
        }
      }
    }
    </script>
    
    <style scoped>
    
    </style>

## 2、【全部】文章展示页面 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 3]  
AllBlogs.vue

<template>
      <div>
        <el-tabs v-model="activeName" @tab-click="handleClick" style="margin-top: 10px;">
          <el-tab-pane label="全部（120）" name="first">
             
            <el-input size="small" v-model="input_title" placeholder="请输入标题，可回车搜索..." prefix-icon="el-icon-search"
            style="width: 400px;margin-right: 10px;"></el-input>
            <el-button size="small" type="primary" icon="el-icon-search">搜索</el-button>
            <el-button size="small" type="primary">高级搜索</el-button>
    
            
            <el-table
            :data="blogsData"
            stripe
            style="width: 100%">
            <el-table-column label="文章列表">
              <template slot-scope="scope">
                <el-card  class="box-card">
                  <div style="font-size: 18px;">
                     
                     <el-button size="mini" v-if="!scope.row.shareStatement" type="info" icon="el-icon-edit" circle></el-button>
                     { { scope.row.title}}
                  </div>
                  <div style="margin-top: 10px;">
    
                    <el-tag size="small" style="margin-right: 10px;"  v-if="!scope.row.shareStatement" type="warning">草稿</el-tag>
                    <el-tag style="margin-right: 10px;" v-if="scope.row.shareStatement" size="small">{ { scope.row.flag}}</el-tag>
                    <el-tag style="margin-right: 10px;" v-if="scope.row.shareStatement" size="small" type="info">{ { scope.row.published}}</el-tag>
                    <el-tag style="margin-right: 20px;" v-if="scope.row.shareStatement" size="small" type="success">{ { scope.row.typeId}}</el-tag>
                    <i style="margin-right: 20px;" class="el-icon-view"> { { scope.row.views}} </i>
                    <i style="margin-right: 20px;" class="el-icon-chat-square"> { { scope.row.commentCount}} </i>
                    <i style="margin-right: 20px;" class="el-icon-date"> { { scope.row.createTime}}</i>
                    
                    <el-button style="float: right;" type="danger" size="mini">删除</el-button>
                    <el-button style="float: right; margin-right: 10px;" type="primary" size="mini">编辑</el-button>
                   
                  </div>
    
                
    
               </el-card>
              </template>
              
             </el-table-column>
           </el-table>
    
           <div style="margin-top: 20px;">
                 
                  <el-pagination
                    background
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-sizes="pagesizes"
                    :page-size="pagesize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
                  </el-pagination>
           </div>
    
          </el-tab-pane>
    
          <el-tab-pane label="原创（20）" name="second">原创（20）</el-tab-pane>
          <el-tab-pane label="转载（20）" name="third">转载（20）</el-tab-pane>
          <el-tab-pane label="草稿（20）" name="fourth">草稿（20）</el-tab-pane>
          <el-tab-pane label="公开（50）" name="fifth">公开（50）</el-tab-pane>
          <el-tab-pane label="私密（10）" name="sixth">私密（10）</el-tab-pane>
          <el-tab-pane label="回收站（20）" name="serven">回收站（20）</el-tab-pane>
        </el-tabs>
    
        
     
      </div>
    </template>
    
    <script>
    export default { 
      name: 'AllBlogs',
      data () { 
       return { 
        activeName: 'first',
        input_title: '', //输入框的值
        blogsData: [{    //文章数据
            title: '用于展示多条结构类似的数据，可对数据进行排序、筛选、对比或其他自定义操作',
            flag: '原创',
            published:'公开',
            createTime:'2020年12月07日 12:00:00',
            views:'999',
            commentCount:'99',
            typeId:'springboot学习',
            shareStatement:false,
          }, { 
            title: '用于展示多条结构类似的数据，可对数据进行排序、筛选、对比或其他自定义操作',
            flag: '原创',
            published:'公开',
            createTime:'2020年12月07日 12:00:00',
            views:'999',
            commentCount:'99',
            typeId:'springboot学习',
            shareStatement:true,
          }],
          currentPage: 1,  //当前页
          total:100, //总记录数
          pagesize:10, //页面大小
          pagesizes:[10,20,30], //页面数组
    
        }
      },
      methods:{ 
        handleClick(tab, event) { 
            console.log(tab.index);
        },
        // 分页的当前页
        handleCurrentChange(val) { 
          console.log(`当前页: ${ val}`);
        },
        //每页多少条
        handleSizeChange(val) { 
            console.log(`每页 ${ val} 条`);
          },
      }
    }
    </script>
    
    <style scoped>
    
    </style>

# 二、博客展示后端开发 #

## 1、修改RespBean ##

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

public static RespBean build(){ 
            return new RespBean();
        }

## 2、分页查询 修改TBlogService ##

修改TBlogService  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 5]

/分页查询
        RespBean pageBlogs(Long current, Long limit, Boolean published, String flag, Boolean share_statement, Boolean is_delete);

## 3、修改TBlogServiceImpl ##

@Service
    public class TBlogServiceImpl extends ServiceImpl<TBlogMapper, TBlog> implements TBlogService { 
    
        @Autowired
        TBlogMapper tBlogMapper;
    
        RespBean respBean = RespBean.build();
    
        @Override
        public RespBean pageBlogs(Long current, Long limit, Boolean published, String flag,
                                  Boolean share_statement, Boolean is_delete) { 
            RespBean respBean = RespBean.build();
            //创建Page对象
            Page<TBlog> tBlogPage = new Page<>(current,limit);
            //构建条件
            QueryWrapper<TBlog> wrapper = new QueryWrapper<>();
            //获取传入讲师的条件是否为空
            //多条件组合查询
            //判断条件值是否为空,如果不为空拼接条件
            if (published != null){ 
                //构建条件
                wrapper.eq("published",published);
            }
            if (flag != null){ 
                //构建条件
                wrapper.eq("flag",flag);
            }
            if (share_statement != null){ 
                //构建条件
                wrapper.eq("share_statement",share_statement);
            }
            if (is_delete != null){ 
                //构建条件
                wrapper.eq("is_delete",is_delete);
            }
            
            //以更新时间排序（降序）
            wrapper.orderByDesc("update_time");
            
            //调用mybatis plus分页方法进行查询
            tBlogMapper.selectPage(tBlogPage,wrapper);
    
            //通过Page对象获取分页信息
            List<TBlog> tBlogList = tBlogPage.getRecords(); //每页的数据 list集合
            long size = tBlogPage.getSize(); //每页显示的条数
            long total = tBlogPage.getTotal(); //总记录数
            long pages = tBlogPage.getPages(); //总页数
    
            respBean.setStatus(200);
            respBean.setObj(tBlogPage);
            return respBean;
        }
    }

## 4、修改TBlogController ##

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

@RestController
    @RequestMapping("/blog")
    public class TBlogController { 
    
        @Autowired
        TBlogService tBlogService;
    
        RespBean respBean = RespBean.build();
    
        /** * 分页查询 * @param current * @param size * @param published * @param flag * @param share_statement * @param is_delete * @return */
        @GetMapping("/getByPage")
        @ApiOperation("博客分页查询")
        @ApiImplicitParams({ 
                @ApiImplicitParam(name = "current",value = "当前页") ,
                @ApiImplicitParam(name = "size",value = "每页的数量"),
                @ApiImplicitParam(name = "published",value = "是否公开"),
                @ApiImplicitParam(name = "flag",value = "原创或转载"),
                @ApiImplicitParam(name = "share_statement",value = "草稿"),
                @ApiImplicitParam(name = "is_delete",value = "是否已删除"),
        })
        public RespBean getByPage(Long current, Long size, Boolean published,
                                  String flag, Boolean share_statement, Boolean is_delete){ 
            return tBlogService.pageBlogs(current, size,published,flag,share_statement,is_delete);
        }
    }

## 5、测试 ##

1）分页查询【全部】  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 7]  
对应  
![在这里插入图片描述][2020121118434664.png]  
2）分页查询【原创】  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 8]  
对应：  
![在这里插入图片描述][20201211184540881.png]  
3）分页查询【转载】  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 9]  
对应：  
![在这里插入图片描述][20201211185717795.png]

4）其他类似

## 6、根据标题查询 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 10]  
在TBlogService 添加：

//根据博客标题查询
        RespBean getByTitle(String title);

在TBlogServiceImpl 添加：

/** * 根据标题查询 * @param title * @return */
        @Override
        public RespBean getByTitle(String title) { 
           	RespBean respBean = RespBean.build();
            QueryWrapper<TBlog> queryWrapper = new QueryWrapper<TBlog>();
            queryWrapper.like("title",title);
            List<TBlog> tBlogList = tBlogMapper.selectList(queryWrapper);
            respBean.setStatus(200);
            respBean.setObj(tBlogList);
            return respBean;
        }

在 TBlogController中添加：

/** * 根据博客标题查询 * @param title * @return */
        @GetMapping("/getByTitle")
        @ApiOperation("通过文章标题查询")
        @ApiImplicitParam(name = "title",value = "文章的标题")
        public RespBean findByTitle(String title){ 
            return tBlogService.getByTitle(title);
        }

## 7、测试 ##

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

## 8、日期格式化 ##

在TBlogs加入注解：

@JsonFormat(pattern="yyyy-MM-dd HH:mm:ss", timezone = "Asia/ShangHai")

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

# 三、博客展示前端对接 #

## 1、新建搜索专用子组件 ##

SearchBlogsCom.vue  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 15]

## 2、新建通用博客列表子组件 ##

BlogListCom.vue  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 16]

<template>
      <div>
            
            <el-table
                :data="blogsData"
                stripe
                style="width: 100%">
                <el-table-column label="文章列表">
                <template slot-scope="scope">
                    <el-card  class="box-card">
                    <div style="font-size: 18px;">
                        
                        <el-button size="mini" v-if="!scope.row.shareStatement" type="info" icon="el-icon-edit" circle></el-button>
                        { { scope.row.title}}
                    </div>
                    <div style="margin-top: 10px;">
    
                        <el-tag size="small" style="margin-right: 10px;"  v-if="scope.row.isDelete" type="danger">已删除</el-tag>
                        <el-tag size="small" style="margin-right: 10px;"  v-if="!scope.row.shareStatement" type="warning">草稿</el-tag>
                        <el-tag style="margin-right: 10px;" v-if="scope.row.shareStatement" size="small">{ { scope.row.flag}}</el-tag>
                        <el-tag style="margin-right: 20px;" v-if="scope.row.shareStatement" size="small" type="info">{ { scope.row.published == '0' ? '私密' : '公开'}}</el-tag>
                        
                        <i style="margin-right: 20px;" class="el-icon-view"> { { scope.row.views}} </i>
                        <i style="margin-right: 20px;" class="el-icon-chat-square"> { { scope.row.commentCount}} </i>
                        <i style="margin-right: 20px;" class="el-icon-date"> { { scope.row.createTime}}</i>
                        
                        <el-button style="float: right;" type="danger" size="mini">删除</el-button>
                        <el-button style="float: right; margin-right: 10px;" type="primary" size="mini">编辑</el-button>
                    
                    </div>
    
                    </el-card>
                </template>
                    
                </el-table-column>
            </el-table>
    
           
           <div v-if="!hidden_page" style="margin-top: 20px;">
                  <el-pagination
                    background
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-sizes="pagesizes"
                    :page-size="pagesize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
                  </el-pagination>
           </div>
     
      </div>
    </template>
    
    <script>
    export default { 
      name: 'BlogListCom',
      data () { 
       return { 
        blogsData: [], //文章数据
        currentPage: 1,  //当前页
        total:0, //总记录数
        pagesize:10, //页面大小
        pagesizes:[10,20,30], //页面数组
        t2index:0, //选项卡index
       }
      },
      props:["tindex"],
      mounted() { 
        this.initIndex();
        this.initBlogs(); // 调用初始化博客数据
        
      },
      
      methods:{ 
        initIndex(){ 
            this.t2index = this.tindex  //保存父组件传过来的值
        },
        // 初始化【全部】博客的数据
        initBlogs(){ 
          const _this = this
          // 通用路由
          var baseurl = '/blog/getByPage?current=' + this.currentPage + '&size=' + this.pagesize
          //通过条件拼接路由
          if(this.t2index == "0"){  //全部
            baseurl +=' &is_delete=0'
          }
          if(this.t2index == "1"){  //原创
            baseurl +=' &flag=原创 &share_statement=1 &is_delete=0'
          }
          if(this.t2index == "2"){  //转载
            baseurl +=' &flag=转载 &share_statement=1 &is_delete=0'
          }
          if(this.t2index == "3"){   //草稿
            baseurl +=' &share_statement=0 &is_delete=0'
          }
          if(this.t2index == "4"){  //公开
            baseurl +=' &published=1 &share_statement=1 &is_delete=0'
          }
          if(this.t2index == "5"){  //私密
            baseurl +=' &published=0 &share_statement=1 &is_delete=0'
          }
          if(this.t2index == "6"){  //回收站
            baseurl +=' &is_delete=1 &share_statement=1 &is_delete=0'
          }
          // console.log(baseurl)
          this.getRequest(baseurl).then(resp=>{ 
            if(resp){ 
              console.log(resp)
              _this.blogsData = resp.obj.records  //将获取到的后端的值赋值给blogsData
              _this.total = resp.obj.total   // 保存一下总记录数，用于前端展示
            }
          })
        },
        // 分页的当前页
        handleCurrentChange(val) { 
          console.log(`当前页: ${ val}`);
          this.currentPage = val
          this.initBlogs()
        },
        //每页多少条
        handleSizeChange(val) { 
            console.log(`每页 ${ val} 条`);
            this.pagesize = val
            this.initBlogs()
        },
     
      }
    }
    </script>
    
    <style scoped>
    
    </style>

## 3、修改博客管理 ##

AllBlogs.vue (后面给出完整代码)

导入刚才创建的两个子组件：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 17]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 18]  
完整代码：

## 4、说明一下父组件如何传值给子组件 ##

父组件  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 19]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 20]  
子组件：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 21]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 22]

## 5、效果展示 ##

【全部】  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 23]  
【搜索】  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 24]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 25]  
【原创】  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 26]  
【转载】  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 27]  
【草稿】  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 28]

【公开】  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 29]

【私密】  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 30]

【回收站】  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 31]

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

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

[SpringBoot_Vue_Mybatis-plus]: https://blog.csdn.net/m0_45234510/article/details/110405346
[SpringBoot_Vue_Mybatis-plus 1]: https://blog.csdn.net/m0_45234510/article/details/110494715
[SpringBoot_Vue_Mybatis-plus 2]: https://blog.csdn.net/m0_45234510/article/details/110932322
[SpringBoot_Vue_Mybatis-plus 3]: https://blog.csdn.net/m0_45234510/article/details/111075386
[SpringBoot_Vue_Mybatis-plus 4]: https://blog.csdn.net/m0_45234510/article/details/112315926
[SpringBoot_Vue_Mybatis-plus 5]: https://blog.csdn.net/m0_45234510/article/details/114150638
[SpringBoot_Vue_Mybatis-plus 6]: https://blog.csdn.net/m0_45234510/article/details/114155484
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70]: /images/20221120/a1585129929b4886a4f9ff99450e8fed.png
[https_element.eleme.cn_zh-CN_component_tabs]: https://element.eleme.cn/#/zh-CN/component/tabs
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 1]: /images/20221120/c869b72115f8408383034f017c0ecfd2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 2]: /images/20221120/14bc6d1bccc04b40838823e9d3e3ebd8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 3]: /images/20221120/4b1ed8b99e084d348e7eb87a3dcc6234.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 4]: /images/20221120/7a94523d3ef04ce0a9acf64f2fc2c286.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 5]: /images/20221120/55fc40372a714f6596599bf0d948c63c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 6]: /images/20221120/dd840062b2ba4799ad3314c857cac1ae.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 7]: /images/20221120/ea2a2795f7f54d7b81344e922714d94f.png
[2020121118434664.png]: /images/20221120/e8258da4b827424fb9688790b9260e97.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 8]: /images/20221120/f581744640d242219954856c855e7a79.png
[20201211184540881.png]: /images/20221120/48c4b8b815ee48169ea1f1bbe074c5cc.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 9]: /images/20221120/2b7483c69c3742dfab16de300a04ab80.png
[20201211185717795.png]: /images/20221120/ef316445a26545fdbc423afd267788a7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 10]: /images/20221120/75f40befafac4026945a43ce8d1288bc.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 11]: /images/20221120/d0efdee08bf14e31b080a08af0a7da63.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 12]: /images/20221120/fc0d132deeb846d2b217359c20188b05.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 13]: /images/20221120/5c35601833214700b34c24e5f4e2c504.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 14]: /images/20221120/4b76d5f0099543d6a882634776335f77.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 15]: /images/20221120/cdc3ac7d24cb48498510a9b58d5c500c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 16]: /images/20221120/8b9b91be3b2b4b1c9fee81567820b724.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 17]: /images/20221120/89d285f6b4ac453385c7100f03f220b6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 18]: /images/20221120/39b3e4cda5254f2e88c961d8b52f97ce.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 19]: /images/20221120/4e156ef0a4b74030a49706192d053118.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 20]: /images/20221120/29fe0187c57645809cfc5a3481098351.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 21]: /images/20221120/0a1cd3b0a55e40db9c8d8bc281367791.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 22]: /images/20221120/c66f42ad256d49c69230194b705a74dc.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 23]: /images/20221120/5a7b6711a40346fe8ac7f29cc9635e9f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 24]: /images/20221120/be2a1ba6ee2147aab8e0fc78d49de91c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 25]: /images/20221120/e2e3de07968041479e46cdaf7d2610b4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 26]: /images/20221120/645bd1f09c7b4039b7c5b90a04670b6b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 27]: /images/20221120/9a150ea00a584b1489dd1608fc38c618.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 28]: /images/20221120/c37858d7071b4326b0018295c3b00540.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 29]: /images/20221120/1e166fc988874fbaa129647434aef631.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 30]: /images/20221120/fbc7ae235c354cacb630e2c69dc68014.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 31]: /images/20221120/a75edc58ea6f4fc7bbae50165dff6a42.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 32]: /images/20221120/4c1046954c8a4c9ba279e88cf830deae.png