A20.從零開始前後端react+flask - 查找數據

接觸過數據庫的同學，都知道我們需要4個操作：“增刪改查”。

增：插入數據。A16.從零開始前後端react+flask - 將前端數據保存到數據庫
刪：刪除數據。A19.從零開始前後端react+flask - 刪除前後端數據
改：修改數據。A18.從零開始前後端react+flask - 修改前後端數據
查：查找數據。A20.從零開始前後端react+flask - 查找數據 今天講。

視頻講解見評論區，代碼見qq羣（952211102）。

項目背景

插入一條數據時，同一個用戶一般擁有 卡號，姓名，手機號 是相同的，
那麼我們的需求就是，當下次用戶續卡時，只要輸入 卡號，姓名，手機號 中的一個，點擊查詢，就能將其他兩項自動填充好，這樣就變得更加智能。

一

InfoDialog.js
卡號，姓名，手機號 這塊增加對應的search按鈕

                        <Form.Item label="卡號" {...styles.my_card}>
                            <Row gutter={20}>
                                <Col span={22}>
                                    {getFieldDecorator('card_number', {
                                    rules: [{required: true, message:"請填寫卡號！"}]
                                    })(
                                        <Input placeholder="" item="card_number" onChange={this.handleTextChange}/> 
                                    )}
                                </Col>
                                <Col span={2}>
                                    <Button shape="circle" icon="search" onClick={this.handleSearch}/>
                                </Col>
                            </Row>
                            
                        </Form.Item>

二

多了2個對應的函數。如下：

    searchItems = {};

    handleTextChange = (e)=>{
        let attr = e.target.getAttribute('item');
        if(attr){
            this.searchItems[attr] = e.target.value;
            // console.log(attr +':'+ e.target.value);
        }
    }
    
    handleSearch = ()=>{
        // console.log("hi",this.searchItems);
        let where = JSON.stringify(this.searchItems);
        let url = ApiUtil.API_STAFF_SEARCH_3 + "?where=" + encodeURI(where);
        HttpUtil.get(url)
            .then(
                res =>{
                    // console.log(res); // ["2", "2", "2"]  ("card_number", "name", "phone")
                    var tmp;
                    if(res!==null){
                        tmp = res;
                    }else{
                        tmp = ["", "", ""];
                    }
                    this.props.form.setFieldsValue({card_number:tmp[0], name: tmp[1], phone: tmp[2]}); 
                }
            )
    }

三

run.py

@app.route(apiPrefix + 'searchStaff_3')
def searchStaff_3():
    data = request.args.get('where')
    print('searchStaff_3:', data)
    where = json.loads(data)
    array = DBUtil.searchStaff_3(where)
    jsonStaffs = DBUtil.getStaffsFromData_3(array)
    re = json.dumps(jsonStaffs)
    return re

四

在SqliteUtil.py中加入

def searchStaff_3(where):
    #只搜索3個屬性
    try:
        sql_where = ''
        sql_like = ''
        
        if where.get('job', 0) > 0:
            sql_where = ("where job=" + str(where['job']))

        where_like_items = []
        for key, value in where.items():
            if value=="":
                #如果爲空的話，就不把該字段計入了
                continue
            if isinstance(value, str) and len(value.strip()) > 0:
                where_item = (key + " like '%" + value + "%'")
                where_like_items.append(where_item)

        if len(where_like_items) > 0:
            sql_like = "(%s)" % ' or '.join(where_like_items)

        if len(sql_where) > 0:
            if len(sql_like) > 0:
                sql_where += (" and " + sql_like)
        else:
            if len(sql_like) > 0:
                sql_where = "where " + sql_like

        my_tmp_staffColumns = ("card_number", "name", "phone")
        columns = ','.join(my_tmp_staffColumns)
        order = ' order by id desc'
        sql = "select %s from t_staff %s%s" % (columns, sql_where, order)
        print(sql)

        cursor.execute(sql)

        dateList = cursor.fetchall()     # fetchall() 獲取所有記錄
        return dateList
    except Exception as e:
        print(repr(e))
        return []

def getStaffsFromData_3(dataList):
    #只取第一條數據，因爲只想獲得"card_number", "name", "phone"
    itemArray = dataList[0] if dataList else None
    # print("itemArray:",itemArray)  #itemArray: ('1', '1', '12')
    return itemArray

五 效果

原始值：

點擊添加後，
1，在 卡號，姓名，手機號 中選擇一個輸入（不要同時寫兩個）
2，點擊右邊的搜索按鈕

結果：
自動填充其他兩項。（如果有數據的話）

如果多次操作可能有點bug，刷新一下就好。
（最近事情也挺多的，沒細細的debug了）