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

简介

删除文章

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

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 删除
• 删除成功后弹出提示，并刷新数据

效果展示：

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 属性

效果：

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