A19.从零开始前后端react+flask - 删除前后端数据

接上文 A18.从零开始前后端react+flask - 修改前后端数据

一

找到HomePage.js中

<Icon type="close" title="删除" style={{ color: '#ee6633', marginLeft:12}} onClick={() => this.deleteConfirm(staff)} />

说明点击“删除”图标后，调用了deleteConfirm()函数。

修改、添加函数：

    deleteConfirm = (staff)=>{
        var that = this;  // 下面的内嵌对象里面，this就改变了，这里在外面存一下。
        const modal = Modal.confirm({
            title: '确认',
            content: '确定要删除这条记录吗？',
            okText: '确认',
            cancelText:'取消',
            onOk(){
                that.removeData(staff.id);
                modal.destroy();
            },
            onCancel(){},
        });
    }
    removeData(id){
        HttpUtil.get(ApiUtil.API_STAFF_DELETE + id)
            .then(
                x =>{console.log('删除了');
                    this.getData();}
            )
    }

二

在run.py文件中，添加：

@app.route(apiPrefix + 'deleteStaff/<int:id>')
def deleteStaff(id):
    re = DBUtil.deleteStaff(id)
    return re

三

在Sqlite.py文件中，添加：

def deleteStaff(id):
    #根据staff的id号来删除该条记录
    try: 
        sql = "delete from t_staff where id=%d" % (id)
        print(sql)
        cursor.execute(sql)
        conn.commit()
        re = {
            'code':0,
            'message':'删除成功',
        }
        return json.dumps(re)
    except Exception as e:
        re = {
            'code': -1,
            'message': repr(e)
        }
        return json.dumps(re)

四

实验
删除前：

删除后：

成功！