SpringBoot+Vue+Mybatis-plus 博客（四）：完成发布文章、编辑文章、删除文章及查询文章功能

心已赠人 2022-12-28 00:40 137阅读 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、编写校验表单工具类
     *  2、修改TBlogService
     *  3、修改TBlogServiceImpl
     *  4、修改TBlogController
     *  5、开启事务
     *  6、测试保存文章和标签
     *  7、添加保存分类专栏方法
     *  8、测试保存分类专栏
     *  9、添加查询所有分类专栏方法
     *  10、测试查询所有分类专栏
 *  二、写博客功能前端
 *   *  1、安装mavon-editor插件
     *  2、然后在main.js中全局注册
     *  3、编写WriteBlog组件
     *  4、效果展示
 *  三、查询 编辑 删除 博客后端接口
 *   *  1、在TBlogMapper新增
     *  2、修改TBlogMapper.xml
     *  3、在TBlogService新增
     *  4、在TBlogServiceImpl新增
     *  5、在TBlogController新增
     *  6、测试
     *  7、修改实体类
 *  四、编辑博客和删除博客前端
 *   *  1、新建EditBlog.vue组件
     *  2、配置路由
     *  3、修改home.vue
     *  4、修改BlogListCom.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]  
发布博客时可新增分类专栏  
![在这里插入图片描述][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]  
回收站  
![在这里插入图片描述][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]

# 一、写博客功能后端接口 #

## 1、编写校验表单工具类 ##

新建BlogForm  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 10]

**
     * 表单校验
     */
    package com.xlblog.blog.form;
    
    import com.baomidou.mybatisplus.core.toolkit.StringUtils;
    import com.xlblog.blog.utils.RespBean;
    
    import java.util.HashMap;
    import java.util.List;
    
    /** * 表单校验 */
    public class BlogForm { 
        public static RespBean check(HashMap<String,Object> params) { 
            String title = (String) params.get("title");
            String description = (String) params.get("description");
            String first_picture = (String) params.get("first_picture");
            String content = (String) params.get("content");
            List<String> tags = (List) params.get("tags");
            Long type_id = Long.parseLong(params.get("type_id").toString());
            String flag = (String) params.get("flag");
    // Boolean published = (Boolean) params.get("published");
            RespBean info = new RespBean();
            if (StringUtils.isEmpty(title)) { 
                info.setStatus(500);
                info.setMsg("title 不能为空");
            }else if (StringUtils.isEmpty(description)) { 
                info.setStatus(500);
                info.setMsg("description 不能为空");
            }else if (StringUtils.isEmpty(first_picture)) { 
                info.setStatus(500);
                info.setMsg("first_picture 不能为空");
            }else if (StringUtils.isEmpty(content)) { 
                info.setStatus(500);
                info.setMsg("content 不能为空");
            }else if (tags.size() == 0) { 
                info.setStatus(500);
                info.setMsg("tags 不能为空");
            }else if (type_id == null) { 
                info.setStatus(500);
                info.setMsg("type_id 不能为空");
            }else if (StringUtils.isEmpty(flag)) { 
                info.setStatus(500);
                info.setMsg("flag 不能为空");
            }else { 
                info.setMsg("校验成功");
                info.setStatus(200);
            }
            return info;
        }
    
        public static RespBean checkTemporaryBlog(HashMap<String,Object> params) { 
            String title = (String) params.get("title");
            String description = (String) params.get("description");
            String first_picture = (String) params.get("first_picture");
            String content = (String) params.get("content");
            RespBean info = new RespBean();
            if (StringUtils.isEmpty(title)) { 
                info.setStatus(500);
                info.setMsg("title 不能为空");
            }else if (StringUtils.isEmpty(description)) { 
                info.setStatus(500);
                info.setMsg("description 不能为空");
            }else if (StringUtils.isEmpty(first_picture)) { 
                info.setStatus(500);
                info.setMsg("first_picture 不能为空");
            }else if (StringUtils.isEmpty(content)) { 
                info.setStatus(500);
                info.setMsg("content 不能为空");
            }
            return info;
        }
    }

## 2、修改TBlogService ##

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

//添加博客和标签
        RespBean saveBT(HashMap<String, Object> params);
        //暂时保存博客
        RespBean temporarySave(HashMap<String, Object> params);

## 3、修改TBlogServiceImpl ##

添加 saveBT方法和temporarySave方法：

/** * 保存博客和标签 * @param params * @return */
        @Override
        public RespBean saveBT(HashMap<String, Object> params) { 
       		RespBean respBean = RespBean.build();
            TBlog tBlog = new TBlog();
            tBlog.setTitle((String) params.get("title"));
            tBlog.setDescription((String) params.get("description"));
            tBlog.setFirstPicture((String) params.get("first_picture"));
            tBlog.setContent((String) params.get("content"));
            tBlog.setTypeId(Long.parseLong(params.get("type_id").toString()));
            tBlog.setFlag((String) params.get("flag"));
            tBlog.setPublished(Boolean.valueOf(params.get("published").toString()));
            tBlog.setShareStatement(true); //设置状态为已发布
            //保存文章
            int result_blog = tBlogMapper.insert(tBlog);
            int result_tag = 0;
            int resule_bt = 0;
            List<String> tags = (List) params.get("tags");
            for (String tag: tags) { 
                TTag tTag = new TTag();
                tTag.setName(tag);
                //保存关键词
                result_tag = tTagMapper.insert(tTag);
                TBlogTags tBlogTags = new TBlogTags();
                tBlogTags.setBlogsId(tBlog.getId());
                tBlogTags.setTagsId(tTag.getId());
                resule_bt = tBlogTagsMapper.insert(tBlogTags);
            }
            if (result_blog != 0 && result_tag != 0 && resule_bt !=0){ 
                respBean.setStatus(200);
                respBean.setMsg("添加成功！");
                return respBean;
            }
            respBean.setMsg("添加失败");
            return respBean;
        }
    
        /** * 暂时保存博客 * @param params * @return */
        @Override
        public RespBean temporarySave(HashMap<String, Object> params) { 
            RespBean respBean = RespBean.build();
            TBlog tBlog = new TBlog();
            tBlog.setTitle((String) params.get("title"));
            tBlog.setDescription((String) params.get("description"));
            tBlog.setFirstPicture((String) params.get("first_picture"));
            tBlog.setContent((String) params.get("content"));
            //保存文章
            int result_blog = tBlogMapper.insert(tBlog);
            if (result_blog != 0){ 
                respBean.setStatus(200);
                respBean.setMsg("添加成功！");
                return respBean;
            }
            respBean.setMsg("添加失败");
            return respBean;
        }

## 4、修改TBlogController ##

添加saveBlogTag方法和temporarySave方法：

/** * 保存文章和标签 * @param params * @return */
        @PostMapping("/savaBT")
        public RespBean saveBlogTag(@RequestBody HashMap<String,Object> params) { 
            RespBean check = BlogForm.check(params);
            if (check.getStatus() == 500) { 
                return check;
            }else { 
                return tBlogService.saveBT(params);
            }
        }
    
        /** * 暂时保存博客 * @param params * @return */
        @PostMapping("/temporarySave")
        public RespBean temporarySave(@RequestBody HashMap<String,Object> params){ 
            RespBean checkTemporaryBlog = BlogForm.checkTemporaryBlog(params);
            if (checkTemporaryBlog.getStatus() == 500) { 
                return checkTemporaryBlog;
            }
            else { 
                return tBlogService.temporarySave(params);
            }
        }

## 5、开启事务 ##

1）在TBlogServiceImpl添加注解：

@Transactional(rollbackFor=Exception.class)  //开启事务

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 12]  
2）在启动类添加注解

@EnableTransactionManagement //开启事务支持

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

## 6、测试保存文章和标签 ##

1）先登录  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 14]  
2）测试保存方法

*  首先 测试 title为空时：  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 15]
 *  标签为空时：  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 16]
 *  都有数据时：  
    ![在这里插入图片描述][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]  
    标签表  
    ![在这里插入图片描述][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]

## 7、添加保存分类专栏方法 ##

修改TTypeController

@RestController
    @RequestMapping("/type")
    public class TTypeController { 
    
        @Autowired
        TTypeService tTypeService;
    
        RespBean respBean = RespBean.build();
    
        @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;
            }
            
        }
    
    }

## 8、测试保存分类专栏 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 22]  
当重复添加时：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 23]

## 9、添加查询所有分类专栏方法 ##

在TTypeController里加入：

/** * 查询所有分类 * @return */
        @GetMapping("/getAllType")
        public RespBean getAllType(){ 
            List<TType> typeList = tTypeService.list();
            return RespBean.ok("查询成功！",typeList);
        }

## 10、测试查询所有分类专栏 ##

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

# 二、写博客功能前端 #

## 1、安装mavon-editor插件 ##

npm install mavon-editor --save

![在这里插入图片描述][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]

## 2、然后在main.js中全局注册 ##

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

import mavonEditor from 'mavon-editor'
    import 'mavon-editor/dist/css/index.css'
    // 使用 mavonEditor
    Vue.use(mavonEditor)

## 3、编写WriteBlog组件 ##

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

<template>
      <div class="m_container">
       
        
        <div class="m_content">
          <el-form ref="editForm" status-icon :model="editForm" :rules="rules1"  label-width="80px">
            <el-form-item label="标题" prop="title">
              <el-input v-model="editForm.title"></el-input>
            </el-form-item>
            <el-form-item label="描述" prop="description">
              <el-input v-model="editForm.description"></el-input>
            </el-form-item>
            <el-form-item label="首页图片" prop="first_picture">
              <el-input v-model="editForm.first_picture"></el-input>
            </el-form-item>
            <el-form-item label="内容" prop="content">
              <mavon-editor v-model="editForm.content"/>
            </el-form-item>
            <el-form-item style="margin: auto;">
              <el-button type="info" @click="temporarySave()">暂时保存</el-button>
              <el-button type="primary" @click="tosubmitForm('editForm')"">发布文章</el-button>
              
            </el-form-item>
          </el-form>
        </div>
    
       
       <el-dialog title="发布文章" :visible.sync="dialogFormVisible" width="35%">
          <el-form :model="editForm" ref="editForm2">
            <el-form-item label="文章标签"  :label-width="formLabelWidth">
              
              <el-tag
                :key="tag"
                v-for="tag in editForm.tags"
                closable
                :disable-transitions="false"
                @close="handleClose(tag)">
                { { tag}}
              </el-tag>
              <el-input
                class="input-new-tag"
                v-if="inputVisible"
                v-model="inputValue"
                ref="saveTagInput"
                size="small"
                @keyup.enter.native="handleInputConfirm"
                @blur="handleInputConfirm"
              >
              </el-input>
              <el-button v-else class="button-new-tag" style="margin-left: 10px;" size="small" @click="showInput">+ New Tag</el-button>
            </el-form-item>
            <el-form-item label="分类专栏" prop="type_id" :label-width="formLabelWidth"
                :rules="{ 
                  required: true, message: '分类专栏不能为空', trigger: 'blur'
                }">
              <el-select v-model="editForm.type_id" placeholder="请选择分类专栏">
                <el-option v-for="(item,index) in getalltype" :key="item.index" :label="item.name" :value="item.id + ''"></el-option>
              </el-select>
              <el-button type="primary" size="small" @click="dialog2= true" style="margin-left: 10px;">新建分类专栏</el-button>
            </el-form-item>
            <el-form-item label="文章类型" prop="flag" :label-width="formLabelWidth"
                :rules="{ 
                  required: true, message: '文章类型不能为空', trigger: 'blur'
                }">
              <el-select v-model="editForm.flag" placeholder="请选择文章类型，默认为原创">
                <el-option label="原创" value="原创"></el-option>
                <el-option label="转载" value="转载"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="发布形式" prop="published" :label-width="formLabelWidth"
                :rules="{ 
                  required: true, message: '发布形式不能为空', trigger: 'blur'
                }">
              <el-select v-model="editForm.published" placeholder="请选择发布形式，，默认为私密">
                <el-option label="私密" value=0></el-option>
                <el-option label="公开" value=1></el-option>
              </el-select>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="submitBlog('editForm2')">确 定</el-button>
          </div>
        </el-dialog>
    
        
        <el-dialog
          title="新建分类专栏"
          :visible.sync="dialog2"
          width="30%"
          >
          <el-form status-icon :model="type" ref="type" :rules="rules2" label-width="120px">
            <el-form-item label="分类专栏名" prop="name">
              <el-input v-model="type.name" placeholder="请输入要新建的分类专栏名"></el-input>
            </el-form-item>
          </el-form>
           <span slot="footer" class="dialog-footer">
              <el-button @click="dialog2 = false">取 消</el-button>
              <el-button type="primary" @click="submitForm('type')">确 定</el-button>
            </span>
        </el-dialog>
    
    
      </div>
    </template>
    <script>
      export default { 
        name: "WriteBlog",
        data() { 
          return { 
            editForm: {   //博客文章表单
              id: null,
              title: '',
              description: '',
              first_picture: '',
              content: '',
              type_id: '',
              flag:'',
              published: null,
              tags: [],
            },
            editForm2: {   //用来校验的表单
              type_id: null,
              flag:'',
              published: null,
            },
            oldtags:'',  //字符串类型的标签
            type:{   //分类专栏
               name:''
            },
            getalltype:[], // 所有分类专栏
            dialogFormVisible: false,  //控制发布博客对话框
            dialog2: false,  //控制新增分类专栏对话框
            rules1: {   //表单校验
              title: [
                { required: true, message: '请输入标题', trigger: 'blur'},
                { min: 3, max: 100, message: '长度在 3 到 100 个字符', trigger: 'blur'}
              ],
              description: [
                { required: true, message: '请输入摘要', trigger: 'blur'}
              ],
              first_picture: [
                { required: true, message: '请输入图片地址', trigger: 'blur'}
              ],
              content: [
                { required: true, message: '请输入文章内容', trigger: 'blur'}
              ],
            },
            rules2:{  //表单校验
              name: [
                { required: true, message: '分类专栏名不能为空', trigger: 'blur'}
              ],
            },
            formLabelWidth: '120px',  // 输入框的宽度
            inputVisible: false,
            inputValue: ''
          }
        },
        created() { 
         
        },
        methods: { 
          handleClose(tag) { 
            this.editForm.tags.splice(this.editForm.tags.indexOf(tag), 1);
          },
    
          showInput() { 
            this.inputVisible = true;
            this.$nextTick(_ => { 
              this.$refs.saveTagInput.$refs.input.focus();
            });
          },
    
          handleInputConfirm() { 
            let inputValue = this.inputValue;
            if (inputValue) { 
              this.editForm.tags.push(inputValue);
            }
            this.inputVisible = false;
            this.inputValue = '';
          },
          //去发布文章
          toSubmit() { 
            this.dialogFormVisible = true
            this.initType()
          },
          //初始化文章专栏
          initType(){ 
            const _this = this
            this.getRequest('/type/getAllType').then(resp=>{ 
              console.log(resp)
              _this.getalltype = resp.obj
            })
          },
          //添加新的分类专栏
          addNewType(){ 
            const _this = this 
            this.postRequest('/type/saveType',this.type).then(resp=>{ 
              if(resp){ 
                _this.type.name = ''
                this.initType()
                _this.dialog2 = false
              }
            })
          },
          //校验添加分类专栏表单
          submitForm(formName) { 
            this.$refs[formName].validate((valid) => { 
              if (valid) { 
                this.addNewType()
              } else { 
                return false;
              }
            });
          },
          //校验博客基本内容表单
          tosubmitForm(formName) { 
            this.$refs[formName].validate((valid) => { 
              if (valid) { 
                this.toSubmit()
              } else { 
                return false;
              }
            });
          },
          //校验发布博客表单,校验成功后发布博客
          submitBlog(formName) { 
            const _this = this
            this.$refs[formName].validate((valid) => { 
              if (valid) { 
                //发布博客
                this.postRequest('/blog/savaBT',this.editForm).then(resp=>{ 
                  if(resp){ 
                    _this.dialogFormVisible = false
                    alert("发布成功，点击确定跳转到博客列表页面!")
                    _this.$router.push('/admin/allblogs')
                  }
                })
              } else { 
                return false;
              }
            });
          },
          //暂时保存博客
          temporarySave(){ 
            const _this = this
            console.log( this.editForm)
            this.postRequest('/blog/temporarySave',this.editForm).then(resp=>{ 
              if(resp){ 
                this.$message('已成功保存草稿成功');
              }
            })
          }
        }
      }
    </script>
    
    <style>
      .m_container{ 
        margin-top: 20px;
      }
      .el-tag + .el-tag { 
        margin-left: 10px;
      }
      .button-new-tag { 
        margin-left: 10px;
        height: 32px;
        line-height: 30px;
        padding-top: 0;
        padding-bottom: 0;
      }
      .input-new-tag { 
        width: 90px;
        margin-left: 10px;
        vertical-align: bottom;
      }
    </style>

## 4、效果展示 ##

*  暂时保存博客  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 29]

![在这里插入图片描述][20201214114507484.png]  
添加成功后跳转到博客列表：  
![在这里插入图片描述][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]  
    弹出发布文章对话框：  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 32]  
    下拉选择：  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 33]  
    如果没有想要的分类，可以先新建文章分类专栏：  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 34]  
    然后再选择：  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 35]  
    选择完成后，点击确定发布博客，发布后跳转到文章列表：  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 36]

# 三、查询 编辑 删除 博客后端接口 #

## 1、在TBlogMapper新增 ##

根据id查找博客，需要自定义，加入如下代码：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 37]

//根据id查找博客
        TBlog getByBlogId(@Param("id") String id);

## 2、修改TBlogMapper.xml ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 38]  
多对多映射查询：

<?xml version="1.0" encoding="UTF-8"?>
    <!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
    <mapper namespace="com.xlblog.blog.mapper.TBlogMapper">
    
    	
        <resultMap id="MyBlogMap" type="com.xlblog.blog.entity.TBlog">
            <id column="id" property="id"/>
            <result column="title" property="title"/>
            <result column="description" property="description"/>
            <result column="first_picture" property="firstPicture"/>
            <result column="content" property="content"/>
            <result column="flag" property="flag"/>
            <result column="published" property="published"/>
            <result column="share_statement" property="shareStatement"/>
            <result column="views" property="views"/>
            <result column="type_id" property="typeId"/>
            <result column="user_id" property="userId"/>
            <result column="comment_count" property="commentCount"/>
            <result column="create_time" property="createTime"/>
            <result column="update_time" property="updateTime"/>
            <result column="is_delete" property="isDelete"/>
            <collection column="t_blog_tags" property="tBlogTags" ofType="com.xlblog.blog.entity.TBlogTags">
                <result column="blogsId" property="blogsId"/>
                <association property="tTag" javaType="com.xlblog.blog.entity.TTag">
                    <id column="id" property="id"/>
                    <result column="name" property="name"/>
                </association>
            </collection>
        </resultMap>
        
     	
        <select id="getByBlogId" resultMap="MyBlogMap">
            select * from t_blog_tags bt
              left join t_blog b on bt.blogs_id = b.id
              left join t_tag t on bt.tags_id = t.id
            where blogs_id = #{ id}
        </select>
        
    </mapper>

## 3、在TBlogService新增 ##

//更新博客
        RespBean updateBlog(HashMap<String,Object> params);
        //删除博客（逻辑删除）
        RespBean logicDeleteBlog(String id);
        //删除博客和标签（彻底删除）
        RespBean deleteBT(String id);
        //还原博客
        RespBean recoveryBlog(String id);
        //根据博客id查询
        RespBean getByBlogId(String id);

## 4、在TBlogServiceImpl新增 ##

/** * 更新文章 * @param params * @return */
        @Override
        public RespBean updateBlog(HashMap<String, Object> params) { 
            RespBean respBean = RespBean.build();
            //根据id查询文章
            TBlog tBlog = tBlogMapper.selectById(Long.parseLong(params.get("id").toString()));
            tBlog.setTitle((String) params.get("title"));
            tBlog.setDescription((String) params.get("description"));
            tBlog.setFirstPicture((String) params.get("first_picture"));
            tBlog.setContent((String) params.get("content"));
            tBlog.setTypeId(Long.parseLong(params.get("type_id").toString()));
            tBlog.setFlag((String) params.get("flag"));
            tBlog.setPublished(Boolean.valueOf(params.get("published").toString()));
            tBlog.setUpdateTime(LocalDateTime.now());
    
            //更新文章
            int result_blog = tBlogMapper.updateById(tBlog);
            int result_tag = 0;
            int resule_bt = 0;
            //先删除与这篇文章相关的标签和中间表记录
            QueryWrapper<TBlogTags> queryWrapper1 = new QueryWrapper<TBlogTags>();
            queryWrapper1.eq("blogs_id",tBlog.getId());
            List<TBlogTags> blogTagsList =  tBlogTagsMapper.selectList(queryWrapper1);
            for (TBlogTags bt : blogTagsList) { 
                //先删除标签表的数据
                tTagMapper.deleteById(bt.getTagsId());
                //再删除博客标签关联表的数据
                QueryWrapper<TBlogTags> queryWrapper = new QueryWrapper<TBlogTags>();
                queryWrapper.eq("tags_id",bt.getTagsId());
                //再删除博客标签关联表的数据
                tBlogTagsMapper.delete(queryWrapper);
            }
            //然后再重新添加标签
            List<String> tags = (List) params.get("tags");
            for (String tag : tags) { 
                //保存标签
                TTag tTag = new TTag();
                tTag.setName(tag);
                result_tag = tTagMapper.insert(tTag);
                //保存中间表记录
                TBlogTags tBlogTags = new TBlogTags();
                tBlogTags.setBlogsId(tBlog.getId());
                tBlogTags.setTagsId(tTag.getId());
                resule_bt = tBlogTagsMapper.insert(tBlogTags);
            }
            if (result_blog != 0 && result_tag != 0 && resule_bt !=0){ 
                respBean.setStatus(200);
                respBean.setMsg("更新博客成功！");
                return respBean;
            }
            respBean.setMsg("更新博客失败");
            return respBean;
        }
    
        /** * 逻辑删除博客 * @param id * @return */
        @Override
        public RespBean logicDeleteBlog(String id) { 
            RespBean respBean = RespBean.build();
            TBlog tBlog = tBlogMapper.selectById(id);
            if (tBlog != null){ 
                tBlog.setIsDelete(true);
                tBlog.setUpdateTime(LocalDateTime.now());
                tBlogMapper.updateById(tBlog);
                respBean.setStatus(200);
                respBean.setMsg("删除博客成功！");
                return respBean;
            }else { 
                respBean.setStatus(500);
                respBean.setMsg("删除博客失败");
                return respBean;
            }
        }
    
        /** * 删除博客和标签（彻底删除） * @param id * @return */
        @Override
        public RespBean deleteBT(String id) { 
            RespBean respBean = RespBean.build();
            TBlog tBlog = tBlogMapper.selectById(id);
            //删除与这篇文章相关的标签和中间表记录
            QueryWrapper<TBlogTags> queryWrapper1 = new QueryWrapper<TBlogTags>();
            queryWrapper1.eq("blogs_id",tBlog.getId());
            List<TBlogTags> blogTagsList =  tBlogTagsMapper.selectList(queryWrapper1);
            int r_tag = 0;
            int r_blog_tag = 0;
            for (TBlogTags bt : blogTagsList) { 
                //先删除标签表的数据
                r_tag = tTagMapper.deleteById(bt.getTagsId());
                //再删除博客标签关联表的数据
                QueryWrapper<TBlogTags> queryWrapper = new QueryWrapper<TBlogTags>();
                queryWrapper.eq("tags_id",bt.getTagsId());
                //再删除博客标签关联表的数据
                r_blog_tag = tBlogTagsMapper.delete(queryWrapper);
            }
            //删除博客文章
            int r_blog = tBlogMapper.deleteById(id);
            if (r_tag != 0 && r_blog_tag!= 0 && r_blog!= 0){ 
                respBean.setStatus(200);
                respBean.setMsg("删除博客和标签成功");
                return respBean;
            }else { 
                respBean.setStatus(500);
                respBean.setMsg("删除博客和标签失败");
                return respBean;
            }
    
        }
    
        /** * 还原删除的博客 * @param id * @return */
        @Override
        public RespBean recoveryBlog(String id) { 
            RespBean respBean = RespBean.build();
            TBlog tBlog = tBlogMapper.selectById(id);
            if (tBlog != null){ 
                tBlog.setIsDelete(false);
                tBlog.setUpdateTime(LocalDateTime.now());
                tBlogMapper.updateById(tBlog);
                respBean.setStatus(200);
                respBean.setMsg("还原博客成功！");
                return respBean;
            }else { 
                respBean.setStatus(500);
                respBean.setMsg("还原博客失败");
                return respBean;
            }
        }
    
        /** * 根据id查找博客 * @param id * @return */
        @Override
        public RespBean getByBlogId(String id) { 
            RespBean respBean = RespBean.build();
            respBean.setStatus(200);
            respBean.setObj(tBlogMapper.getByBlogId(id));
            return respBean;
        }

## 5、在TBlogController新增 ##

/** * 更新博客和标签 * @param params * @return */
        @PutMapping("/updateBlog")
        public RespBean updateBlog(@RequestBody HashMap<String,Object> params){ 
            RespBean checkUpdateBlog = BlogForm.check(params);
            if (checkUpdateBlog.getStatus() == 500) { 
                return checkUpdateBlog;
            }
            else { 
                return tBlogService.updateBlog(params);
            }
        }
    
        /** * 逻辑删除 * @param id * @return */
        @DeleteMapping("/logicDeleteBlog")
        public RespBean logicDeleteBlog(String id){ 
            TBlog tBlog = tBlogService.getById(id);
            if (tBlog != null){ 
                return tBlogService.logicDeleteBlog(id);
            }else { 
                respBean.setStatus(500);
                respBean.setMsg("没有数据");
                return respBean;
            }
        }
    
        /** * 删除博客和对应标签 * @param id * @return */
        @DeleteMapping("/deleteBlog")
        public RespBean deleteBlog(String id){ 
            TBlog tBlog = tBlogService.getById(id);
            if (tBlog != null){ 
                return tBlogService.deleteBT(id);
            }else { 
                respBean.setStatus(500);
                respBean.setMsg("没有数据");
                return respBean;
            }
        }
    
        /** * 还原删除的博客 * @param id * @return */
        @GetMapping("/recoveryBlog")
        public RespBean recoveryBlog(String id){ 
            return tBlogService.recoveryBlog(id);
        }
    
        /** * 根据id查找博客 * @param id * @return */
        @GetMapping("/getByBlogId")
        public RespBean getByBlogId(String id){ 
            respBean.setStatus(200);
            respBean.setMsg("查询成功");
            respBean.setObj(tBlogService.getById(id));
            return respBean;
        }

## 6、测试 ##

更新  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 39]

删除(逻辑删除)

## 7、修改实体类 ##

将TBlog、TBlogTags、TTag、TType实体类中所有Long类型的字段加上下面的注解：

@JsonSerialize(using = ToStringSerializer.class)

> 解析：后端向前端传递Long类型数据，会导致数据不一致，原因是Long类型太长，而Java序列化JSON会丢失精度。所以得加上`@ToStringSerializer`注解，让系统序列化时，保留相关精度。

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

# 四、编辑博客和删除博客前端 #

## 1、新建EditBlog.vue组件 ##

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

<template>
        <div class="m_container">
         
          
          <div class="m_content">
            <el-form ref="editForm" status-icon :model="editForm" :rules="rules1"  label-width="80px">
              <el-form-item label="标题" prop="title">
                <el-input v-model="editForm.title"></el-input>
              </el-form-item>
              <el-form-item label="描述" prop="description">
                <el-input v-model="editForm.description"></el-input>
              </el-form-item>
              <el-form-item label="首页图片" prop="first_picture">
                <el-input v-model="editForm.first_picture"></el-input>
              </el-form-item>
    
              <el-form-item label="文章标签">
                
                <el-tag
                  :key="index"
                  v-for="(tag,index) in editForm.tags"
                  closable
                  :disable-transitions="false"
                  @close="handleClose(tag)">
                  { { tag}}
                </el-tag>
                <el-input
                  style="width: 30%;margin-left: 10px;"
                  v-if="inputVisible"
                  v-model="inputValue"
                  ref="saveTagInput"
                  size="small"
                  @keyup.enter.native="handleInputConfirm"
                  @blur="handleInputConfirm"
                >
                </el-input>
                <el-button v-else class="button-new-tag" style="margin-left: 10px;" size="small" @click="showInput">+ New Tag</el-button>
              </el-form-item>
    
              <el-form-item label="分类专栏" prop="type_id">
                <el-select v-model="editForm.type_id" placeholder="请选择分类专栏">
                  <el-option v-for="(item,index) in getalltype" :key="item.index" :label="item.name" :value="item.id + ''"></el-option>
                </el-select>
                <el-button type="primary" size="small" @click="dialog2= true" style="margin-left: 10px;">新建分类专栏</el-button>
              </el-form-item>
              <el-form-item label="文章类型" prop="flag">
                <el-select v-model="editForm.flag" placeholder="请选择文章类型，默认为原创">
                  <el-option label="原创" value="原创"></el-option>
                  <el-option label="转载" value="转载"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="发布形式" prop="published">
                <el-select v-model="editForm.published" placeholder="请选择发布形式，默认为私密">
                  <el-option label="私密" value="false"></el-option>
                  <el-option label="公开" value="true"></el-option>
                </el-select>
              </el-form-item>
    
              <el-form-item label="内容" prop="content">
                <mavon-editor v-model="editForm.content"/>
              </el-form-item>
              <el-form-item style="margin: auto;">
                <el-button type="primary" @click="submitForm('editForm')"">保存发布</el-button>
                <router-link to="/admin/allblogs">
                  <el-button style="margin-left: 10px;">返回</el-button>
                </router-link>
              </el-form-item>
            </el-form>
          </div>
      
      
          
          <el-dialog
            title="新建分类专栏"
            :visible.sync="dialog2"
            width="30%"
            >
            <el-form status-icon :model="type" ref="type" :rules="rules2" label-width="120px">
              <el-form-item label="分类专栏名" prop="name">
                <el-input v-model="type.name" placeholder="请输入要新建的分类专栏名"></el-input>
              </el-form-item>
            </el-form>
             <span slot="footer" class="dialog-footer">
                <el-button @click="dialog2 = false">取 消</el-button>
                <el-button type="primary" @click="submitForm('type')">确 定</el-button>
              </span>
          </el-dialog>
      
      
        </div>
      </template>
      <script>
        export default { 
          name: "EditBlog",
          data() { 
            return { 
              // id:'',
              editForm: {   //博客文章表单
                id: null,
                title: '',
                description: '',
                first_picture: '',
                content: '',
                type_id: '',
                flag:'',
                published: null,
                tags:null,
              },
              oldtags:'',  //字符串类型的标签
              type:{   //分类专栏
                 name:''
              },
              getalltype:[], // 所有分类专栏
              dialogFormVisible: false,  //控制发布博客对话框
              dialog2: false,  //控制新增分类专栏对话框
              rules1: {   //表单校验
                title: [
                  { required: true, message: '请输入标题', trigger: 'blur'},
                  { min: 3, max: 100, message: '长度在 3 到 100 个字符', trigger: 'blur'}
                ],
                description: [
                  { required: true, message: '请输入摘要', trigger: 'blur'}
                ],
                first_picture: [
                  { required: true, message: '请输入图片地址', trigger: 'blur'}
                ],
                content: [
                  { required: true, message: '请输入文章内容', trigger: 'blur'}
                ],
                type_id: [
                  { required: true, message: '分类专栏不能为空', trigger: 'blur'}
                ],
                flag: [
                  { required: true, message: '文章类型不能为空', trigger: 'blur'}
                ],
                published: [
                  { required: true, message: '发布形式不能为空', trigger: 'blur'}
                ],
              },
              rules2:{  //表单校验
                name: [
                  { required: true, message: '分类专栏名不能为空', trigger: 'blur'}
                ],
              },
              formLabelWidth: '120px' , // 输入框的宽度
              inputVisible: false,
              inputValue: '',
              btags: null,
              tblogTags: [],
            }
          },
          props:['id'],
          mounted() { 
            this.initBlog()
            this.initType()
          },
          methods: { 
            handleClose(tag) { 
              this.editForm.tblogTags.splice(this.editForm.tblogTags.indexOf(tag), 1);
            },
    
            showInput() { 
              this.inputVisible = true;
              this.$nextTick(_ => { 
                this.$refs.saveTagInput.$refs.input.focus();
              });
            },
    
            handleInputConfirm() { 
              let inputValue = this.inputValue;
              if (inputValue) { 
                this.editForm.tags.push(inputValue);
              }
              this.inputVisible = false;
              this.inputValue = '';
            },
            //初始化博客数据
            initBlog(){ 
              const _this = this
              console.log(this.id)
              this.getRequest('/blog/getByBlogId?id=' + this.id).then(resp=>{ 
                  console.log(resp.obj)
                  _this.editForm = resp.obj
                  _this.editForm.published = resp.obj.published = true ? "公开":"私密"
                  _this.editForm.type_id = resp.obj.typeId + ''
                  _this.editForm.first_picture = resp.obj.firstPicture
    
                  _this.btags = resp.obj.tblogTags
                  _this.btags.forEach(element => { 
                      _this.tblogTags.push(element.ttag.name + '');                
                  });
                  _this.editForm.tags = _this.tblogTags
                  console.log(_this.editForm.tags)
    
                  // _this.editForm.tblogTags = resp.obj.tblogTags
                  
                  
              })
            },
            //初始化文章专栏
            initType(){ 
              const _this = this
              this.getRequest('/type/getAllType').then(resp=>{ 
                console.log(resp)
                _this.getalltype = resp.obj
              })
            },
            //添加新的分类专栏
            addNewType(){ 
              const _this = this 
              this.postRequest('/type/saveType',this.type).then(resp=>{ 
                if(resp){ 
                  _this.type.name = ''
                  this.initType()
                  _this.dialog2 = false
                }
              })
            },
            //校验添加分类专栏表单
            submitForm(formName) { 
              this.$refs[formName].validate((valid) => { 
                if (valid) { 
                  this.addNewType()
                } else { 
                  return false;
                }
              });
            },
            //校验博客基本内容表单
            submitForm(formName) { 
              this.$refs[formName].validate((valid) => { 
                if (valid) { 
                  //发布博客
                    this.putRequest('/blog/updateBlog',this.editForm).then(resp=>{ 
                        if(resp){ 
                          alert("更新成功，点击确定跳转到博客列表页面!")
                          _this.$router.push('/admin/allblogs')
                        }
                    })
                } else { 
                  return false;
                }
              });
            },
    
          }
        }
      </script>
      
      <style>
        .m_container{ 
          margin-top: 20px;
        }
      </style>

## 2、配置路由 ##

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

<template>
        <div class="m_container">
         
          
          <div class="m_content">
            <el-form ref="editForm" status-icon :model="editForm" :rules="rules1"  label-width="80px">
              <el-form-item label="标题" prop="title">
                <el-input v-model="editForm.title"></el-input>
              </el-form-item>
              <el-form-item label="描述" prop="description">
                <el-input v-model="editForm.description"></el-input>
              </el-form-item>
              <el-form-item label="首页图片" prop="first_picture">
                <el-input v-model="editForm.first_picture"></el-input>
              </el-form-item>
    
              <el-form-item label="文章标签">
                
                <el-tag
                  :key="index"
                  v-for="(tag,index) in editForm.tags"
                  closable
                  :disable-transitions="false"
                  @close="handleClose(tag)">
                  { { tag}}
                </el-tag>
                <el-input
                  style="width: 30%;margin-left: 10px;"
                  v-if="inputVisible"
                  v-model="inputValue"
                  ref="saveTagInput"
                  size="small"
                  @keyup.enter.native="handleInputConfirm"
                  @blur="handleInputConfirm"
                >
                </el-input>
                <el-button v-else class="button-new-tag" style="margin-left: 10px;" size="small" @click="showInput">+ New Tag</el-button>
              </el-form-item>
    
              <el-form-item label="分类专栏" prop="type_id">
                <el-select v-model="editForm.type_id" placeholder="请选择分类专栏">
                  <el-option v-for="(item,index) in getalltype" :key="item.index" :label="item.name" :value="item.id + ''"></el-option>
                </el-select>
                <el-button type="primary" size="small" @click="dialog2= true" style="margin-left: 10px;">新建分类专栏</el-button>
              </el-form-item>
              <el-form-item label="文章类型" prop="flag">
                <el-select v-model="editForm.flag" placeholder="请选择文章类型，默认为原创">
                  <el-option label="原创" value="原创"></el-option>
                  <el-option label="转载" value="转载"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="发布形式" prop="published">
                <el-select v-model="editForm.published" placeholder="请选择发布形式，默认为私密">
                  <el-option label="私密" value="false"></el-option>
                  <el-option label="公开" value="true"></el-option>
                </el-select>
              </el-form-item>
    
              <el-form-item label="内容" prop="content">
                <mavon-editor v-model="editForm.content"/>
              </el-form-item>
              <el-form-item style="margin: auto;">
                <el-button type="primary" @click="submitForm('editForm')"">保存发布</el-button>
                <el-button>返回</el-button>
              </el-form-item>
            </el-form>
          </div>
      
      
          
          <el-dialog
            title="新建分类专栏"
            :visible.sync="dialog2"
            width="30%"
            >
            <el-form status-icon :model="type" ref="type" :rules="rules2" label-width="120px">
              <el-form-item label="分类专栏名" prop="name">
                <el-input v-model="type.name" placeholder="请输入要新建的分类专栏名"></el-input>
              </el-form-item>
            </el-form>
             <span slot="footer" class="dialog-footer">
                <el-button @click="dialog2 = false">取 消</el-button>
                <el-button type="primary" @click="submitForm('type')">确 定</el-button>
              </span>
          </el-dialog>
      
      
        </div>
      </template>
      <script>
        export default { 
          name: "EditBlog",
          data() { 
            return { 
              // id:'',
              editForm: {   //博客文章表单
                id: null,
                title: '',
                description: '',
                first_picture: '',
                content: '',
                type_id: '',
                flag:'',
                published: null,
                tags:null,
              },
              oldtags:'',  //字符串类型的标签
              type:{   //分类专栏
                 name:''
              },
              getalltype:[], // 所有分类专栏
              dialogFormVisible: false,  //控制发布博客对话框
              dialog2: false,  //控制新增分类专栏对话框
              rules1: {   //表单校验
                title: [
                  { required: true, message: '请输入标题', trigger: 'blur'},
                  { min: 3, max: 100, message: '长度在 3 到 100 个字符', trigger: 'blur'}
                ],
                description: [
                  { required: true, message: '请输入摘要', trigger: 'blur'}
                ],
                first_picture: [
                  { required: true, message: '请输入图片地址', trigger: 'blur'}
                ],
                content: [
                  { required: true, message: '请输入文章内容', trigger: 'blur'}
                ],
                type_id: [
                  { required: true, message: '分类专栏不能为空', trigger: 'blur'}
                ],
                flag: [
                  { required: true, message: '文章类型不能为空', trigger: 'blur'}
                ],
                published: [
                  { required: true, message: '发布形式不能为空', trigger: 'blur'}
                ],
              },
              rules2:{  //表单校验
                name: [
                  { required: true, message: '分类专栏名不能为空', trigger: 'blur'}
                ],
              },
              formLabelWidth: '120px' , // 输入框的宽度
              inputVisible: false,
              inputValue: '',
              btags: null,
              tblogTags: [],
            }
          },
          props:['id'],
          mounted() { 
            this.initBlog()
            this.initType()
          },
          methods: { 
            handleClose(tag) { 
              this.editForm.tblogTags.splice(this.editForm.tblogTags.indexOf(tag), 1);
            },
    
            showInput() { 
              this.inputVisible = true;
              this.$nextTick(_ => { 
                this.$refs.saveTagInput.$refs.input.focus();
              });
            },
    
            handleInputConfirm() { 
              let inputValue = this.inputValue;
              if (inputValue) { 
                this.editForm.tags.push(inputValue);
              }
              this.inputVisible = false;
              this.inputValue = '';
            },
            //初始化博客数据
            initBlog(){ 
              const _this = this
              console.log(this.id)
              this.getRequest('/blog/getByBlogId?id=' + this.id).then(resp=>{ 
                  console.log(resp.obj)
                  _this.editForm = resp.obj
                  _this.editForm.published = resp.obj.published = true ? "公开":"私密"
                  _this.editForm.type_id = resp.obj.typeId + ''
                  _this.editForm.first_picture = resp.obj.firstPicture
    
                  _this.btags = resp.obj.tblogTags
                  _this.btags.forEach(element => { 
                      _this.tblogTags.push(element.ttag.name + '');                
                  });
                  _this.editForm.tags = _this.tblogTags
                  console.log(_this.editForm.tags)
    
                  // _this.editForm.tblogTags = resp.obj.tblogTags
                  
                  
              })
            },
            //初始化文章专栏
            initType(){ 
              const _this = this
              this.getRequest('/type/getAllType').then(resp=>{ 
                console.log(resp)
                _this.getalltype = resp.obj
              })
            },
            //添加新的分类专栏
            addNewType(){ 
              const _this = this 
              this.postRequest('/type/saveType',this.type).then(resp=>{ 
                if(resp){ 
                  _this.type.name = ''
                  this.initType()
                  _this.dialog2 = false
                }
              })
            },
            //校验添加分类专栏表单
            submitForm(formName) { 
              this.$refs[formName].validate((valid) => { 
                if (valid) { 
                  this.addNewType()
                } else { 
                  return false;
                }
              });
            },
            //校验博客基本内容表单
            submitForm(formName) { 
              this.$refs[formName].validate((valid) => { 
                if (valid) { 
                  //发布博客
                    this.putRequest('/blog/updateBlog',this.editForm).then(resp=>{ 
                        if(resp){ 
                          alert("更新成功，点击确定跳转到博客列表页面!")
                          _this.$router.push('/admin/allblogs')
                        }
                    })
                } else { 
                  return false;
                }
              });
            },
    
          }
        }
      </script>
      
      <style>
        .m_container{ 
          margin-top: 20px;
        }
      </style>

## 3、修改home.vue ##

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

v-if="!child.hidden"

## 4、修改BlogListCom.vue ##

<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 v-if="!scope.row.isDelete" style="float: right;" type="danger" size="mini" @click="logicDeleteBlog(scope.row.id)">删除</el-button>
                        <router-link :to=" '/admin/editblog/' + scope.row.id ">
                          <el-button v-if="!scope.row.isDelete" style="float: right; margin-right: 10px;" type="primary" size="mini">编辑</el-button>
                        </router-link>
                        <el-button v-if="scope.row.isDelete" style="float: right;" type="danger" size="mini" @click="deleteBlog(scope.row.id)">删除</el-button>
                        <el-button v-if="scope.row.isDelete" style="float: right; margin-right: 10px;" @click="recoveryBlog(scope.row.id)" 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>
     
      </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:{ 
        //删除博客(逻辑删除)
        logicDeleteBlog(id){ 
          const _this = this
          this.$confirm('此操作将删除该文章, 是否继续?', '提示', { 
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => { 
              this.deleteRequest('/blog/logicDeleteBlog?id=' + id).then(resp=>{ 
                alert("删除成功！")
                location.reload(true); // 刷新当前页面
              })
            }).catch(() => { 
              this.$message({ 
                type: 'info',
                message: '已取消删除'
              });          
            });
        },
        //彻底删除博客
        deleteBlog(id){ 
          const _this = this
          this.$confirm('此操作将彻底删除该文章, 是否继续?', '提示', { 
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => { 
              this.deleteRequest('/blog/deleteBlog?id=' + id).then(resp=>{ 
                alert("删除成功！")
                location.reload(true); // 刷新当前页面
              })
            }).catch(() => { 
              this.$message({ 
                type: 'info',
                message: '已取消删除'
              });          
            });
        },
        //还原博客
        recoveryBlog(id){ 
          const _this = this
          this.$confirm('确定要还原该博客吗?', '提示', { 
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => { 
              this.getRequest('/blog/recoveryBlog?id=' + id).then(resp=>{ 
                alert("还原成功！")
                location.reload(true); // 刷新当前页面
              })
            }).catch(() => { 
              this.$message({ 
                type: 'info',
                message: '已取消还原'
              });          
            });
        },
        //组件的index
        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=>{ 
            console.log(baseurl)
            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>

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

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

[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/20221120/7f9a9d964aa44873a57da08c39b02ebf.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20201217195526844.png?x-oss-process=image/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 2]: https://img-blog.csdnimg.cn/20201217195622851.png?x-oss-process=image/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 3]: https://img-blog.csdnimg.cn/20201217195714524.png?x-oss-process=image/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 4]: https://img-blog.csdnimg.cn/20201217195745932.png?x-oss-process=image/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 5]: https://img-blog.csdnimg.cn/20201217195956807.png?x-oss-process=image/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 6]: https://img-blog.csdnimg.cn/20201217200025592.png?x-oss-process=image/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 7]: https://img-blog.csdnimg.cn/20201217200102939.png?x-oss-process=image/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 8]: https://img-blog.csdnimg.cn/20201217200129668.png?x-oss-process=image/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 9]: https://img-blog.csdnimg.cn/20201217200158313.png?x-oss-process=image/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 10]: https://img-blog.csdnimg.cn/20201213130356557.png?x-oss-process=image/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 11]: https://img-blog.csdnimg.cn/20201214105541261.png?x-oss-process=image/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 12]: https://img-blog.csdnimg.cn/2020121313083895.png?x-oss-process=image/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 13]: https://img-blog.csdnimg.cn/20201213130942894.png?x-oss-process=image/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 14]: https://img-blog.csdnimg.cn/20201213131041205.png?x-oss-process=image/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 15]: https://img-blog.csdnimg.cn/20201213131422669.png?x-oss-process=image/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 16]: https://img-blog.csdnimg.cn/20201213131613449.png?x-oss-process=image/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 17]: https://img-blog.csdnimg.cn/20201213131830604.png?x-oss-process=image/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 18]: https://img-blog.csdnimg.cn/20201213131908531.png?x-oss-process=image/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 19]: https://img-blog.csdnimg.cn/20201213131955848.png?x-oss-process=image/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 20]: https://img-blog.csdnimg.cn/20201213132023460.png?x-oss-process=image/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 21]: https://img-blog.csdnimg.cn/20201214105949530.png?x-oss-process=image/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 22]: https://img-blog.csdnimg.cn/20201213160519263.png?x-oss-process=image/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 23]: https://img-blog.csdnimg.cn/20201213160555532.png?x-oss-process=image/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 24]: https://img-blog.csdnimg.cn/20201213162345578.png?x-oss-process=image/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 25]: https://img-blog.csdnimg.cn/20201212173240614.png?x-oss-process=image/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 26]: https://img-blog.csdnimg.cn/20201212173407128.png?x-oss-process=image/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 27]: https://img-blog.csdnimg.cn/20201212173522368.png?x-oss-process=image/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 28]: https://img-blog.csdnimg.cn/20201214111425145.png?x-oss-process=image/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 29]: https://img-blog.csdnimg.cn/20201214114734338.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw,size_16,color_FFFFFF,t_70
[20201214114507484.png]: https://img-blog.csdnimg.cn/20201214114507484.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 30]: https://img-blog.csdnimg.cn/20201214114813854.png?x-oss-process=image/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 31]: https://img-blog.csdnimg.cn/20201214114932116.png?x-oss-process=image/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 32]: https://img-blog.csdnimg.cn/20201214114951215.png?x-oss-process=image/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 33]: https://img-blog.csdnimg.cn/20201214115047773.png?x-oss-process=image/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 34]: https://img-blog.csdnimg.cn/20201214115200451.png?x-oss-process=image/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 35]: https://img-blog.csdnimg.cn/20201214115128849.png?x-oss-process=image/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 36]: https://img-blog.csdnimg.cn/20201214115423593.png?x-oss-process=image/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 37]: https://img-blog.csdnimg.cn/20201217181029346.png?x-oss-process=image/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 38]: https://img-blog.csdnimg.cn/20201217181155830.png?x-oss-process=image/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 39]: https://img-blog.csdnimg.cn/2020121513293534.png?x-oss-process=image/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 40]: https://img-blog.csdnimg.cn/20201217182041513.png?x-oss-process=image/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 41]: https://img-blog.csdnimg.cn/20201215134919768.png?x-oss-process=image/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 42]: https://img-blog.csdnimg.cn/20201215135025826.png?x-oss-process=image/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 43]: https://img-blog.csdnimg.cn/20201215135124241.png?x-oss-process=image/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 44]: https://img-blog.csdnimg.cn/2021030920181089.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw,size_16,color_FFFFFF,t_70