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>

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

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

「点点赞赏,手留余香」

0

给作者打赏,鼓励TA抓紧创作!

微信微信 支付宝支付宝

还没有人赞赏,快来当第一个赞赏的人吧!

声明:本站所有资源及文章均来源于网络及用户分享或为本站原创,仅限用于学习和研究,任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
码云笔记 » P34:后台管理系统开发13-实现删除文章功能

发表评论

IT互联网行业相关广告投放 更专业 更精准

立即查看 联系我们