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>

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