基于SpringBoot + Vue的个人博客系统16—

简介

删除文章

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

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

修改文章

在文章列表页面点击修改文章按钮
跳转到写文章页面，同时带上文章 id 作为参数
在写文章界面创建的时候判断，路由参数中是否有文章 id
如果有文章 id 就查询文章信息，并赋值给 this.article
如果没有文章 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-buttontype="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

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

基于SpringBoot + Vue的个人博客系统07——文章列表和文章详情
简介由于本人不是专业的前端,所以写出来的界面可能会稍微有些丑陋,甚至有些地方的写法不是很专业,还请大家见谅主界面 JS 部分首先是 js 逻辑部分我们先在@/http/request.js中定 ...
推荐一个基于Springboot+Vue的开源博客系统
简介这是一个基于Springboot2.x,vue2.x的前后端分离的开源博客系统,提供前端界面+管理界面+后台服务的整套系统源码.响应式设计,手机.平板.PC,都有良好的视觉效果! 你可以拿它 ...
基于SpringBoot + Vue的个人博客系统12——使用vue-admin-template展示文章列表（后台管理）
简介前面我们实现了博客系统的前台展示页面,还有留言功能没有实现,实现留言功能无非就是在后端增加留言表,对留言进行增删改查.和文章表类似,这里就不在赘述. 既然作为一款动态博客,那么后台管理是必不可少 ...
基于springboot + vue 的个人博客搭建过程（上线）
承接上文: 基于springboot + vue 的个人博客搭建过程(续) 目录 1. 搭建环境 1. 安装docker 2. 拉取并运行 2.1 拉取服务 2.2 部署运行mysql 2.3 部署运 ...
基于springboot + vue 的个人博客搭建过程（续）
承接上文:基于springboot + vue 的个人博客搭建过程目录 1. 评论列表 1.1 接口说明 1.2 controller 1.3 service 1.4 mapper 1.5 实体类 ...
基于springboot搭建的个人博客系统
源码下载地址:blog blog是基于springboot搭建的个人博客,响应式前端技术:html.css.js.jq.bootstrap 后台技术:springboot.thymeleaf.myb ...
基于SpringBoot + Vue的个人博客
博客介绍基于Springboot + Vue 开发的前后端分离博客在线地址项目链接: www.ttkwsd.top 后台链接: admin.ttkwsd.top Github地址: https: ...
java基于springboot+vue的旅游博客旅游经验分享系统
如今社会飞快发展,人们生活节奏不断加快,压力也随之变大.为了释放压力,缓解疲劳,大多数人会选择旅游.但是现在基本上很少有免费网站注重介绍张家界的,大部分都是以"商"为主提供导游.酒 ...
使用 ThinkJS + Vue.js 开发博客系统
编者注:ThinkJS 作为一款 Node.js 高性能企业级 Web 框架,收到了越来越多的用户的喜爱.今天我们请来了 ThinkJS 用户 @lscho 同学为我们分享他基于 ThinkJS 开发 ...

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

简介

删除文章

修改文章

前端

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

最新文章

热门文章