P34：后台管理系统开发13-实现删除文章功能

在上节我们完成了实现左侧菜单的文章列表功能，但是列表就是为了更方便的管理博客文章，本文我们就一起来完成文章的删除功能。这个删除操作需要注意的是要防止误删，即不小心删错了，所以在删除前我们需要再次向用户询问是否删除。

删除文章中台方法

我们还是从中台开始编写，先把操作数据库的方法编写好，然后再来编写管理 UI 部分。

这个方法写在/servie/app/controller/admin/main.js文件里，这里我命名为delArticle()，代码如下：

// 删除文章
async delArticle() {
  const id = this.ctx.params.id;
  const res = await this.app.mysql.delete('article', { id });
  this.ctx.body = { data: res };
}

写好方法后，还是需要到/servie/app/router/admin.js文件中进行路由的配置：

'use strict';
module.exports = app => {
  const { router, controller } = app;
  // const adminauth = app.middleware.adminauth();
  router.get('/admin/index', controller.admin.main.index);
  router.post('/admin/checkLogin', controller.admin.main.checkLogin);
  router.get('/admin/getTypeInfo', controller.admin.main.getTypeInfo);
  router.post('/admin/addArticle', controller.admin.main.addArticle);
  router.post('/admin/updateArticle', controller.admin.main.updateArticle);
  router.get('/admin/getArticleList', controller.admin.main.getArticleList);
  router.get('/admin/delArticle/:id', controller.admin.main.delArticle);
};

主要写的就是最后一句，其他都是我们以前增加的路由。

编写 apiUrl.js 文件

到/admin/src/config/apiUrl.js里面，把这个路径添加上就可以了。

let ipUrl = 'http://127.0.0.1:7001/admin/' 

let servicePath = {
    getTypeInfo: ipUrl + 'getTypeInfo', // 获得文章类别信息
    checkLogin: ipUrl + 'checkLogin', // 检查用户名密码是否正确
    addArticle: ipUrl + 'addArticle', // 添加文章
    updateArticle: ipUrl + 'updateArticle', // 修改文章
    getArticleList: ipUrl + 'getArticleList',  // 文章列表 
    delArticle: ipUrl + 'delArticle/', // 删除文章
}

export default servicePath;

这步做完就可以写前台的业务逻辑了。

管理页面删除方法

到/admin/src/pages/ArticleList文件中编写一个delArticle方法，在这个方法里我们要再次向用户确认是否删除这篇文章，如果用户同意才会确认删除。

// 删除文章方法
const delArticle = (id) => {
    confirm({
        title: '确定要删除这篇文章吗？',
        content: '如果你点击 OK 按钮，文章将永远被删除，无法恢复！',
        onOk(){
            axios(servicePath.delArticle+id,{ withCredentials: true}).then(
                res => {
                    message.success('文章删除成功');
                    getList();
                }
            )
        },
        onCancel(){
            message.success('取消成功！');
        }
    })
}

在删除之后，我们又进行了一次数据库查询方法getList()，虽然这不太环保，但是对于这样小概率事件是完全无所谓的。方法写完之后，就可以给按钮添加触发事件了。

<Button onClick={()=>{delArticle(item.id)}} >删除 </Button>

这样就可以实现删除了，我们可以到浏览器中进行测试一下，对不满意的地方进行微调即可。

以上关于P34：后台管理系统开发13-实现删除文章功能的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。