SpringBoot+Vue豆宝社区前后端分离项目手把手实战系列教程21---帖子修改和删除功能实现

豆宝社区项目实战教程简介

本项目实战教程配有免费视频教程，配套代码完全开源。手把手从零开始搭建一个目前应用最广泛的Springboot+Vue前后端分离多用户社区项目。本项目难度适中，为便于大家学习，每一集视频教程对应在Github上的每一次提交。

项目首页截图

代码开源地址

前端 后端

视频教程地址

视频教程

前端技术栈

Vue Vuex Vue Router Axios Bulma Buefy Element Vditor DarkReader

后端技术栈

Spring Boot Mysql Mybatis MyBatis-Plus Spring Security JWT Lombok

更新删除博客前端

1.API

src\api\post.js

// 更新博客
export function update(topic) {
  return request({
    url: '/post/update',
    method: 'post',
    data: topic
  })
}

// 根据id删除博客
export function deleteTopic(id) {
  return request({
    url: `/post/delete/${id}`,
    method: 'delete'
  })
}

路由

src\router\index.js

// 文章修改编辑
  {
    name: 'topic-edit',
    path: '/topic/edit/:id',
    component: () => import('@/views/post/Edit'),
    meta: {
      title: '编辑',
      requireAuth: true
    }
  }

新增Edit页面

src\views\post\新增Edit.vue

<template>
  <section>
    <div class="columns">
      <div class="column is-full">
        <el-card class="box-card" shadow="never">
          <div slot="header" class="clearfix">
            <span><i class="fa fa fa-book"> 主题 / 更新主题</i></span>
          </div>
          <div>
            <el-form :model="topic" ref="topic" class="demo-topic">
              <el-form-item prop="title">
                <el-input
                  v-model="topic.title"
                  placeholder="输入新的主题名称"
                ></el-input>
              </el-form-item>

              <!--Markdown-->
              <div id="vditor"></div>

              <b-taginput
                v-model="tags"
                class="my-3"
                maxlength="15"
                maxtags="3"
                ellipsis
                placeholder="请输入主题标签，限制为 15 个字符和 3 个标签"
              />
              <el-form-item class="mt-3">
                <el-button type="primary" @click="handleUpdate()"
                  >更新
                </el-button>
                <el-button @click="resetForm('topic')">重置</el-button>
              </el-form-item>
            </el-form>
          </div>
        </el-card>
      </div>
    </div>
  </section>
</template>

<script>
import { getTopic, update } from "@/api/post";
import Vditor from "vditor";
import "vditor/dist/index.css";
export default {
  name: "TopicEdit",
  components: {},
  data() {
    return {
      topic: {},
      tags: [],
    };
  },
  created() {
    this.fetchTopic();
  },
  methods: {
    renderMarkdown(md) {
      this.contentEditor = new Vditor("vditor", {
        height: 460,
        placeholder: "输入要更新的内容",
        preview: {
          hljs: { style: "monokai" },
        },
        mode: "sv",
        after: () => {
          this.contentEditor.setValue(md);
        },
      });
    },
    fetchTopic() {
      getTopic(this.$route.params.id).then((value) => {
        this.topic = value.data.topic;
        this.tags = value.data.tags.map(tag => tag.name);
        this.renderMarkdown(this.topic.content);
      });
    },
    handleUpdate: function () {
      this.topic.content = this.contentEditor.getValue();
      update(this.topic).then((response) => {
        const { data } = response;
        console.log(data);
        setTimeout(() => {
          this.$router.push({
            name: "post-detail",
            params: { id: data.id },
          });
        }, 800);
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
      this.contentEditor.setValue("");
      this.tags = "";
    },
  },
};
</script>

<style>
.vditor-reset pre > code {
  font-size: 100%;
}
</style>

更新删除博客后端

BmsPostController

/**
 * 修改文章
 * @param userName
 * @param post
 * @return
 */
@PostMapping("/update")
public ApiResult<BmsPost> update(@RequestHeader(value = "userName") String userName, @Valid @RequestBody BmsPost post) {
    post = postService.updateById(userName, post);
    return ApiResult.success(post);
}

@DeleteMapping("/delete/{id}")
public ApiResult<String> delete(@RequestHeader(value = "userName") String userName, @PathVariable("id") String id) {
    postService.deleteById(userName,id);
    return ApiResult.success(null, "删除成功");
}

BmsPostService

public BmsPost updateById(String userName, BmsPost post) {
       
        // 获取用户信息
        UmsUser umsUser = userService.getOne(new LambdaQueryWrapper<UmsUser>().eq(UmsUser::getUsername, userName));
        Assert.notNull(umsUser, "用户不存在");
        Assert.isTrue(umsUser.getId().equals(post.getUserId()), "非本人无权修改");
        post.setModifyTime(new Date());
        post.setContent(EmojiParser.parseToAliases(post.getContent()));
        this.updateById(post);
        return post;
    }

    public void deleteById(String userName, String id) {
        UmsUser umsUser = userService.getOne(new LambdaQueryWrapper<UmsUser>().eq(UmsUser::getUsername, userName));
        Assert.notNull(umsUser, "用户不存在");
        BmsPost post = this.getById(id);
        Assert.notNull(post, "来晚一步，话题已不存在");
        Assert.isTrue(post.getUserId().equals(umsUser.getId()), "你为什么可以删除别人的话题？？？");
        this.removeById(id);
    }