今天开始我们讲讲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+" : "+item.pms_name+"
"+ content+" : "+item.content+"
"+ status+" : "+item.status+"
"+ remark+" : "+item.mark+"
" }); $("#mainbody").html(lists); } })}
Step3:Python+Flask 部分
@app.route('/getOne/',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查询条件进行数据查询并返回查询结果进行页面渲染。
友情提示:“无量测试之道”原创著作,欢迎关注交流,禁止第三方不显示文章来源时转载。更多原创文章请扫码关注查看,交流与合作请联系:loadkernel@126.com。
QQ技术交流群:41564936
![20043e466bdc48640240da9266798eba.png](https://i-blog.csdnimg.cn/blog_migrate/424f006309b0fd5de7e84a3ea3de76de.png)
Shell 编程核心技术《一》
Shell 编程核心技术《二》
Pytest 可视化测试报告之 Allure
python+Appium之APP自动化测试
Python+appium框架原生代码实现App自动化测试
AirTest-selenium基于Web实现UI自动化测试
Python API自动化测试实操
Python 测试框架之 Unittest & Pytest
Python + Flask 项目开发实践系列《一》
Python + Flask 项目开发实践系列《二》
Python + Flask 项目开发实践系列《三》
Python + Flask 项目开发实践系列《四》
Python + Flask 项目开发实践系列《五》