A17.从零开始前后端react+flask - 读取数据库显示在前端

接A16节

前端

1，HomePage.js 中加入：

    getData(){
        HttpUtil.get(ApiUtil.API_STAFF_LIST+0) //获取所有数据
            .then(
                staffList =>{
                    this.mAllData = staffList;
                    this.setState({
                        mData: staffList,
                        showInfoDialog: false,
                    });
                }
            ).catch(error=>{
                message.error(error.message);
            });
    }

componentDidMount()函数中加入this.getData(); 即：

    componentDidMount() {
        columns.push(this.admin_item); //加了一列的
        this.columns2 = columns;

        this.getData(); //初始化，获取数据并显示
        this.getMyColumns(); //获取列名
    }

加入：

    handleInfoDialogClose = (staff)=>{
        if(staff){
            if(staff.id){
                //修改；暂时用不到
                let datas = [...this.state.mData];
                for(let i=0;i<datas.length;i++){
                    if(datas[i].id === staff.id){
                        //如果相等，表示更新该条数据
                        datas[i] = staff;
                        this.setState({
                            mData: datas,
                            showInfoDialog: false,
                        });
                        break; //找到了，就不必后面的了
                    }
                }
            }else{
                //新增 staff.id为0
                console.log("新增数据");
                this.getData();
            }
        }else{
            //删除
            this.getData();
        }
    }

修改state为：

    state = {
        showInfoDialog: false, //显示添加对话框
        editingItem: null, //对话框编辑的内容
        mData: [], //table里的数据
        my_columns:[], //列名
        showAdmin: false, //是否为管理员，即是否增加一列
        show_back: "none", //是否显示“back”
    }

修改Table为：

                        <Table 
                            columns={this.state.my_columns}
                            dataSource={this.state.mData} 
                            rowKey={item=>item.id}  
                            pagination={{ pageSize: 20 }} 
                            scroll={{ y: 340 }} />

InfoDialog.js不需要修改。

 

后端

run.py加入：

@app.route(apiPrefix + 'getStaffList/<int:job>')
def getStaffList(job):
    array = DBUtil.getStaffList(job)  # [('1', '1', '1', '1', '1'), ('1', '1', '2', '3', '4'), ...] 二维数组
    jsonStaffs = DBUtil.getStaffsFromData(array)
    # print("jsonStaffs:", jsonStaffs)
    return json.dumps(jsonStaffs)

SqliteUtil.py加入：

def getStaffList(job):
    # 当job为0时，表示获取所有数据
    tableName = 't_staff'
    where = ''

    columns = ','.join(staffColumns)
    order = ' order by id desc'  #按照id的递减顺序排列，之后要改
    sql = "select %s from %s%s%s" % (columns, tableName, where, order)
    print(sql)

    cursor.execute(sql)

    dateList = cursor.fetchall()     # fetchall() 获取所有记录
    return dateList

def getStaffsFromData(dataList):
    staffs = []
    for itemArray in dataList:   # dataList数据库返回的数据集，是一个二维数组
        #itemArray: ('1', '1', '2', '3', '4')
        staff = {}
        for columnIndex, columnName in enumerate(staffColumns):
            columnValue = itemArray[columnIndex]
            # if columnValue is None: #后面remarks要用，现在不需要
            #     columnValue = 0 if columnName in (
            #         'job', 'education', 'birth_year') else ''
            staff[columnName] = columnValue

        staffs.append(staff)

    return staffs

结果

补充

关于ant design table加scroll属性后列跟表头不对齐 https://blog.csdn.net/YAOYU007/article/details/83026107 

（确实出现这个问题，后续再做一些修正）

 

完成。

对应视频见评论。

完整代码见qq群。