接触过数据库的同学，都知道我们需要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=="":#如果为空的话，就不把该字段计入了continueif 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_likemy_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 dateListexcept 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了）

A20.从零开始前后端react+flask - 查找数据相关推荐

A16.从零开始前后端react+flask - 将前端数据保存到数据库
上一节,我们讲了如何将前后端联系起来. A15.从零开始前后端react+flask - 将前后端联系起来 https://blog.csdn.net/GreatXiang888/article/de ...
A19.从零开始前后端react+flask - 删除前后端数据
接上文 A18.从零开始前后端react+flask - 修改前后端数据一找到HomePage.js中 <Icon type="close" title="删除 ...
A15.从零开始前后端react+flask - 将前后端联系起来
视频链接:https://www.bilibili.com/video/av78415640 前端:react,后端:flask,我们在前面课程中都已经分别单独学习. 那么,怎么把前后端联系起来呢? ...
A04.从零开始前后端react+flask - 用flask说hello
视频链接:https://www.bilibili.com/video/av77344039 ps:安装python和flask见前文. 文档 flask中文官方文档: https://dormous ...
ajax获取checkbox循环出来的值_Django:前后端异步加载数据(循环大法)
距离上一次发文过去两个月,这段时间将Django,Bootstrap,JQuery收入囊中开始写Django的一些笔记,祭奠那掉了一地的头发关于Django项目创建和基础介绍,本篇不做介绍,主要介 ...
基于Vue.js+Go的Web3D宇宙空间数据可视化系统设计报告+前后端源码及数据
资源下载地址:https://download.csdn.net/download/sheziqiong/85609658 Explore Space Explore Space 1.基本介绍 2.亮 ...
手写数字识别画板前后端实现 | Flask+深度神经网络
1. 系统概要手写数字识别画板系统,按照MVC原则开发,主要由两部分组成:交互界面(视图View)部分是传统的HTML +CSS+JS网页(这同样也是一种遵循MVC开发方式):手写数字识别部分(模型 ...
【Java】若依前后端分离，分页数据为null报错
今天用若依开发的时候又发生了报错. 1. 表象报错前端: 查看控制台: 这一看就不是前端的错误了,明显是后台返回出错了! 后端: 很明显,后端报错空指针错误. 2. 分析 2.1 初步分析 // c ...
超详细总结：前后端数据交互原理
最近开始接触前后端的一些知识,查了很多资料,今天把互联网产品的前后端数据交互做个总结留做笔记. 互联网产品的前后端数据交互是通过一个通讯协议完成.前后台交互的协议主要包括HTTP,FTP,SMTP,T ...

A20.从零开始前后端react+flask - 查找数据

项目背景

一

二

三

四

五效果

A20.从零开始前后端react+flask - 查找数据相关推荐

最新文章

热门文章

A20.从零开始前后端react+flask - 查找数据

项目背景

一

二

三

四

五 效果

A20.从零开始前后端react+flask - 查找数据相关推荐

最新文章

热门文章

五效果