基于SpringBoot + Vue的个人博客系统16——文章的修改和删除

落日映苍穹つ 2022-12-03 05:24 188阅读 0赞

## 简介 ##

#### 删除文章 ####

删除功能比较简单，只需进行如下操作：

1.  调用删除接口删除文章
2.  然后再刷新文章列表

#### 修改文章 ####

1.  在文章列表页面点击修改文章按钮
2.  跳转到写文章页面，同时带上文章 id 作为参数
3.  在写文章界面创建的时候判断，路由参数中是否有文章 id
4.  如果有文章 id 就查询文章信息，并赋值给 this.article
5.  如果没有文章 id 就不执行其他操作

## 前端 ##

1、在`@/api/article.js`中添加调用修改文章、删除文章、根据 id 获取文章信息 api 的方法

/** * 根据 id 删除文章 * @param {id:number} id 文章 id */
    export function deleteArticleById(id) { 
      return request({ 
        url: '/auth/article/' + id,
        method: "delete"
      })
    }
    
    /** * 根据 id 更新文章 * @param {id:number} id 文章 id * @param {*} params 要更新的字段 */
    export function updateArticleById(id,params){ 
      return request({ 
        url: '/auth/article/' + id,
        method: "put",
        data:{ 
          title: params.title,
          content: params.content,
          category: params.category,
          tags: params.tags.join(),
          tabloid: params.tabloid,
          type: params.type ? 1 : 0,
          author: params.author,
        }
      })
    }
    
    /** * 根据文章 id 获取文章信息 * @param {id:number} id 文章id */
    export function getArticleById(id){ 
      return request({ 
        url: '/article/' + id,
        method: 'get'
      })
    }

2、给`@/views/table/index.vue` 中的删除按钮添加点击事件，将文章 id、文章标题 传进去

<el-table-column label="操作" align="center" width="230">
        <template slot-scope="scope">
          <el-button type="primary" size="mini" @click="handleDel(scope.row.id,scope.row.title)">删除</el-button>
          <el-button type="primary" size="mini">修改</el-button>
        </template>
      </el-table-column>

3、实现 handleDel 函数

import {  getArticleList, deleteArticleById } from "@/api/article";
    
    export default { 
    //...
      methods: { 
    //...
        handleDel(id, title) { 
          this.$confirm("此操作将永久删除该文章, 是否继续?", "提示", { 
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          }).then(() => { 
            deleteArticleById(id, title).then((res) => { 
              this.$notify({ 
                title: "提示",
                message: `文章《${ title}》删除成功`,
                type: "success",
              });
              this.fetchData(this.pageInfo.current, 10);
            });
          });
        },
      },
    };

说明：

*  删除的时候先弹出提示框，用户点击确认删除的时候才进行删除
 *  调用删除 api 删除
 *  删除成功后弹出提示，并刷新数据

效果展示：

![删除确认][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpMzQ1NTI3NzkyNQ_size_16_color_FFFFFF_t_70_pic_center]

![删除成功][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpMzQ1NTI3NzkyNQ_size_16_color_FFFFFF_t_70_pic_center 1]

4、修改`@/views/table/index.vue`，当点击修改按钮的时候，跳转到`/example/editor`路由，并传入文章 id 作为参数

<el-table-column label="操作" align="center" width="230">
        <template slot-scope="scope">
          <el-button type="primary" size="mini" @click="handleDel(scope.row.id,scope.row.title)">删除</el-button>
          <el-button type="primary" size="mini" @click="$router.push({ name: 'Editor', params: { articleId: scope.row.id}})" >修改</el-button>
        </template>
      </el-table-column>

5、在`@/views/editor/index.vue`组件创建时检查是否存在`articleId`，如果存在就获取文章信息

import {  getAllCategories } from "@/api/category";
    import {  postArticle, getArticleById, updateArticleById } from "@/api/article";
    //...
      created() { 
        const articleId = this.$route.params.articleId;
        if (articleId) { 
          getArticleById(articleId).then((res) => { 
            this.article = res.data;
            this.article.type = this.article.type === "原创";
          });
        }
        getAllCategories().then((res) => { 
          this.categories = res.data.map((item) => item.name);
        });
      },

说明：

*  注意要对文章类型进行处理

6、在提交文章的时候也要判断一下是不是更新操作

handleSubmit() { 
          if (
            this.assertNotEmpty(this.article.category, "分类不能为空") &&
            this.assertNotEmpty(this.article.tags.join(), "文章标签不能为空") &&
            this.assertNotEmpty(this.article.tabloid, "文章摘要不能为空") &&
            this.assertNotEmpty(this.article.author, "文章作者不能为空")
          ) { 
            this.showDialog = false;
            if (this.article.id) { 
              updateArticleById(this.article.id, this.article).then((res) => { 
                this.$notify({ 
                  title: "提示",
                  message: `文章《${ this.article.title}》更新成功`,
                  type: "success",
                });
                this.$router.push("/example/table");
              });
            } else { 
              postArticle(this.article).then((res) => { 
                this.$notify({ 
                  title: "提示",
                  message: `文章《${ this.article.title}》发布成功`,
                  type: "success",
                });
                this.$router.push("/example/table");
              });
            }
          }
        },

说明：

*  判断是不是更新文章的依据是 this.article 中有没有 id 属性，因为如果是写文章的话 this.article 中是没有 id 属性的，但是如果是更新文章的话，文章信息是从后端获取的，自然会有 id 属性

效果：

![文章更新成功][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpMzQ1NTI3NzkyNQ_size_16_color_FFFFFF_t_70_pic_center 2]

参考代码：https://gitee.com/qianyucc/QBlog2/tree/v-11.0

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpMzQ1NTI3NzkyNQ_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/f153b72415f44d57a5a0cc5d29b28fb9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpMzQ1NTI3NzkyNQ_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221123/c754ca44bb2448b29404db642fab20ff.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpMzQ1NTI3NzkyNQ_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20221123/e7ab2b23f6984e6baacd5930953d2975.png