欢迎关注【无量测试之道】公众号,回复【领取资源】,
Python编程学习资源干货、
Python+Appium框架APP的UI自动化、
Python+Selenium框架Web的UI自动化、
Python+Unittest框架API自动化、
资源和代码 免费送啦~
文章下方有公众号二维码,可直接微信扫一扫关注即可。
今天开始我们讲讲Flask Web实践项目开发中的查看详情功能是如何实现的。
Step1:html 部分
lists +="<tr>"+ //拼凑一段html片段
"<td style='word-wrap:break-word;word-break:break-all; '><input type='checkbox' id='itemid' name='testid' value='"+item.id+"'>"+item.id+"</td>"+
"<td style='word-wrap:break-word;word-break:break-all; '>"+item.pms_name+"</td>"+
"<td style='word-wrap:break-word;word-break:break-all; '>"+item.content+"</td>"+
"<td style='word-wrap:break-word;word-break:break-all; '>"+item.status+"</td>"+
"<td style='word-wrap:break-word;word-break:break-all; '>"+item.mark+"</td>"+
"<td style='word-wrap:break-word;word-break:break-all; '>"+item.create_time+"</td>"+
"<td style='word-wrap:break-word;word-break:break-all; '>" +
"<button class='btn btn-info' id='update' align='center' onclick='update($(this))'>修改</button>  "+
"<button class='btn btn-warning' id='updateother' align='center' onclick='detail($(this))'>查看详情</button>" +
"</td>"
"</tr>"
});
Step2:javascript部分
function detail(td) {
document.getElementById("pageid").style.display="none"
var tr=td.parent().parent()
console.log(tr);
var tdlist=tr.find("td");
console.log(tdlist);
var id=$(tdlist[0]).find('input').val()
$.ajax({
url: '/getOne/'+id,
type: 'GET',
dataType: 'json',
timeout: 1000,
cache: false,
beforeSend: function () {
$("#mainbody").html('加载中...');
}, //加载执行方法
error: function () {
alert("数据加载失败!!!");
}, //错误执行方法
success: function (data) {
$("#mainbody").html('');
lists=""
var jsons=data ? data : [];
$.each(jsons, function (index, item) {//循环获取数据
lists +=
name+" : <span>"+item.pms_name+"</span><br />"+
content+" : <span>"+item.content+"</span><br />"+
status+" : <span>"+item.status+"</span><br />"+
remark+" : <span>"+item.mark+"</span><br />"
});
$("#mainbody").html(lists);
}
})
}
Step3:Python+Flask 部分
@app.route('/getOne/<id>',methods=['GET'])
def getapi(id):
sql="select id,pms_name,content,status,mark,create_time from flask_info where id="+id
api = get_data(sql)
return jsonify(api)
Step4: db部分
def get_data(sql1):#获取sql返回记录数
db = sqlite3.connect('test_flask.db')
cur = db.cursor()
print(sql1)
cur.execute(sql1)
results=cur.fetchall()
cloumn=get_table_colum()
res = {}
reslist = []
print(results)
for r in range(len(list(results))):
for m in range(len(list(cloumn))):
res[str(list(cloumn)[m])] = str(list(results)[r][m])
reslist.append(res)
res = {}
print(reslist)
cur.close()
db.close()
return reslist
查询后得到的数据显示效果如下图所示:
总结:本篇文章主要就是点击每一行数据后面的操作列表里面的【查看详情】按钮,当按钮被点击时$this(也就是当前这一行td标准单元格)会被当成一个参数传入,然后经过javascript 获取到当前这一行数据的id信息,最后将id作为sql里面的where查询条件进行数据查询并返回查询结果进行页面渲染。
备注:我的个人公众号已正式开通,致力于测试技术的分享,包含:大数据测试、功能测试,测试开发,API接口自动化、测试运维、UI自动化测试等,微信搜索公众号:“无量测试之道”,或扫描下方二维码:
添加关注,让我们一起共同成长!