简介
删除文章
删除功能比较简单,只需进行如下操作:
- 调用删除接口删除文章
- 然后再刷新文章列表
修改文章
- 在文章列表页面点击修改文章按钮
- 跳转到写文章页面,同时带上文章 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-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