今天开始我们讲讲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>&nbsp&nbsp"+          "<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

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 项目开发实践系列《五》