Python + Flask 项目开发实践系列《六》

Wu_Candy

发布于 2022-07-04 17:29:17

40900

代码可运行

文章被收录于专栏：无量测试之道无量测试之道

运行总次数：0

代码可运行

今天开始我们讲讲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+" : <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查询条件进行数据查询并返回查询结果进行页面渲染。

友情提示：“无量测试之道”原创著作，欢迎关注交流，禁止第三方不显示文章来源时转载。

本文参与腾讯云自媒体同步曝光计划，分享自微信公众号。

原始发表：2020-07-26，如有侵权请联系 cloudcommunity@tencent.com 删除

java