Go1.20＋React18 如何实现删除用户功能？

大家好，我是张大鹏，今天又来给大家分享技术文章了。

今天要分享的是 Go1.20 + React18 + MySQL8 这套架构中，如何前后端分离的实现删除用户的功能。

用户列表页面如下：

当用户点击删除的时候，弹出确认删除提示：

如果取消，则提示取消成功：

如果确认，则删除该用户，并提示删除结果：

功能比较简单，代码也不复杂。首先我们在用户列表页面添加删除按钮：

{

   console.log("删除用户", record)

   setDeleteId(record.id)

   setOpenDeleteUserModal(true)

}}>

   删除

接着，我们引入模态框：

// 显示模态框

const [openDeleteUserModal, setOpenDeleteUserModal] = useState(false);

// 要删除的用户ID

const [deleteId, setDeleteId] = useState(-999)

并在合适的位置放置模态框：

   title="操作确认"

   open={openDeleteUserModal}

   onOk={() => {

       apiDeleteUser(deleteId).then(() => {

           messageApi.open({

               type: 'success',

               content: '删除用户成功',

           });

           setTimeout(() => loadData(), 500)

       }).catch(err => {

           console.log("删除用户失败", err)

           messageApi.open({

               type: 'warning',

               content: '删除用户失败',

           });

       })

       setOpenDeleteUserModal(false)

   }}

   onCancel={() => {

       setDeleteId(-999)

       messageApi.open({

           type: 'success',

           content: '取消删除用户',

       });

       setOpenDeleteUserModal(false)

   }}

   okText="确认"

   cancelText="取消"

>

模态框的逻辑是比较清晰的。点击确认的时候执行删除逻辑，点击取消的时候执行取消逻辑。

接着给大家分享一下如何修改用户激活状态，代码如下：

{

   title: '是否激活',

   dataIndex: 'is_active',

   key: 'is_active',

   render: (active, record) => (

        {

           apiUpdateUserStatus({

               id: record.id,

               is_active: checked

           }).then(() => {

               messageApi.open({

                   type: 'success',

                   content: '更新用户状态成功',

               });

               setTimeout(() => loadData(), 500)

           }).catch(err => {

               console.log("更新用户失败：", err)

               messageApi.open({

                   type: 'warning',

                   content: '更新用户状态失败',

               });

           })

       }}/>

   ),

},

整体是不是特别简单呢？

到目前为止，我们的项目已经越来越完善了，目前已具备如下功能：

- 登录

- 注销

- 分页展示用户列表

- 修改用户

- 切换用户状态

- 删除用户

今天的分享就到这里了，谢谢大家~