欢迎关注【无量测试之道】公众号，回复【领取资源】,
Python编程学习资源干货、
Python+Appium框架APP的UI自动化、
Python+Selenium框架Web的UI自动化、
Python+Unittest框架API自动化、
资源和代码 免费送啦~
文章下方有公众号二维码，可直接微信扫一扫关注即可。
今天开始我们讲讲Flask Web实践项目开发中的查询功能是如何实现的。
Step1：html 部分
1 <div class="row" align="right"> 2 主要内容：<input type='text' id='contents' name='contents'> 3 <button class="btn btn-warning" id="select">查询</button> 4 <button class="btn btn-primary" id="adds">添加</button> 5 <button class="btn btn-danger" id="delete">删除</button> 6 </div>
Step2：javascript部分
1 2 $(function () { 3 $('#select').click(function(){ 4 callback1(1,"none") 5 }); 6 var callback1= function (page,contents){ 7 var contents=$('#contents').val(); 8 if(contents.length==0){ 9 alert("输出内容不能为空!"); 10 return ; 11 } 12 $.ajax({ 13 url: '/select/'+page+"/"+contents, 14 type: 'GET', 15 dataType: 'json', 16 async:false, 17 timeout: 1000, 18 cache: false, 19 beforeSend: LoadFunction, //加载执行方法 20 error: ErrFunction, //错误执行方法 21 success: function (data) { //成功执行的方法 22 var jsons=data ? data : []; 23 // 分页处理 24 $("#pageid").pager({ 25 pagenumber: jsons.pageNum, 26 pagecount: jsons.pages, 27 totalcount: jsons.amount, 28 buttonClickCallback: callback1 29 }); 30 lists="" 31 $.each(jsons.content, function (index, item) {//循环获取数据 32 lists +="<tr>"+ 33 "<td style='word-wrap:break-word;word-break:break-all; '><input type='checkbox' id='itemid' name='testid' value='"+item.id+"'>"+item.id+"</td>"+ 34 "<td style='word-wrap:break-word;word-break:break-all; '>"+item.pms_name+"</td>"+ 35 "<td style='word-wrap:break-word;word-break:break-all; '>"+item.content+"</td>"+ 36 "<td style='word-wrap:break-word;word-break:break-all; '>"+item.status+"</td>"+ 37 "<td style='word-wrap:break-word;word-break:break-all; '>"+item.mark+"</td>"+ 38 "<td style='word-wrap:break-word;word-break:break-all; '>"+item.create_time+"</td>"+ 39 "<td style='word-wrap:break-word;word-break:break-all; '>" + 40 "<button class='btn btn-info' id='update' align='center' onclick='update($(this))'>修改</button>  "+ 41 "<button class='btn btn-warning' id='updateother' align='center' onclick='detail($(this))'>查看详情</button>" + 42 "</td>" 43 "</tr>" 44 }); 45 $("#alldatas").html(lists); 46 } 47 }) 48 }; 49 function LoadFunction() { 50 $("#alldatas").html('加载的数据未找到，请重新添加!...'); 51 } 52 function ErrFunction() { 53 alert("数据加载失败!!!!"); 54 } 55 });
Step3：Python+Flask 部分
1 @app.route('/select/<page>/<contents>',methods=['get']) 2 def select(page,contents): 3 contents="'%"+str(contents)+"%'" 4 sql = "select count(*) from flask_info where content like "+contents 5 PageCount=10 6 All_Record = get_count(sql) 7 if (int(All_Record) % int(PageCount) == 0): 8 All_page = All_Record / PageCount 9 else: 10 All_page = All_Record / PageCount + 1 11 tiao=(int(page)-1)*int(PageCount) 12 print(contents) 13 sql1="select id,pms_name,content,status,mark,create_time from flask_info where content like "+contents+" order by create_time desc limit %s,%s"%(tiao,PageCount) 14 print(sql) 15 content=get_data(sql1) 16 pagedict={} 17 pagedict['content']=content 18 pagedict['pageNum']=page 19 pagedict['pages']=All_page 20 pagedict['amount']=All_Record 21 return jsonify(pagedict)
Step4: db部分
1 def get_data(sql1):#获取sql返回记录数 2 db = sqlite3.connect('test_flask.db') 3 cur = db.cursor() 4 print(sql1) 5 cur.execute(sql1) 6 results=cur.fetchall() 7 cloumn=get_table_colum() 8 res = {} 9 reslist = [] 10 print(results) 11 for r in range(len(list(results))): 12 for m in range(len(list(cloumn))): 13 res[str(list(cloumn)[m])] = str(list(results)[r][m]) 14 reslist.append(res) 15 res = {} 16 print(reslist) 17 cur.close() 18 db.close() 19 return reslist
页面查询效果如下图所示：
总结：本篇文章主要是通过一个文本框输入，然后点击查询按钮提交一个查询请求，请求中会带上被输入的内容进行查询匹配，等待查询出来的数据集进行页面数据的渲染即可。
备注：我的个人公众号已正式开通，致力于测试技术的分享，包含：大数据测试、功能测试，测试开发，API接口自动化、测试运维、UI自动化测试等，微信搜索公众号：“无量测试之道”，或扫描下方二维码：
添加关注，让我们一起共同成长！