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

欢迎关注【无量测试之道】公众号，回复【领取资源】,
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>&nbsp&nbsp"+
    "<button class='btn btn-warning' id='updateother' align='center' onclick='detail($(this))'>查看详情</button>" +
    "</td>"
"</tr>"

Step2：javascript部分

function update(td) {
        document.getElementById("pageid").style.display="none"
        var tr=td.parent().parent()
        console.log(tr);
        var tdlist=tr.find("td");
        console.log(tdlist);
        // alert(tdlist[0].innerHTML)
        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 +=
                        "<form action='/updateOne/"+item.id+"' method='POST'>"+
                        name+":<input type='text' name='pms_name' value='"+item.pms_name+"'/><br />"+
                        content+":<input type='text' name='content' value='"+item.content+"'/><br />"+
                        status+":<input type='text' name='status' value='"+item.status+"'/><br />"+
                        remark+":<input type='text' name='mark' value='"+item.mark+"'/><br />"+
                        "<input class='btn btn-info' type='submit' value='提交' />"
                     });
                    $("#mainbody").html(lists);
                }
            })
}

Step3：Python+Flask 部分

 
@app.route('/updateOne/<id>',methods=['POST'])
def updateapi(id):
    pms_name= request.form.get("pms_name")
    content = request.form.get("content")
    status = request.form.get("status")
    mark = request.form.get("mark")
    sql="update flask_info set pms_name='"+pms_name+"',content='"+content+"',status='"+status+"',mark='"+mark+"' where id="+id
    print(sql)
    execute_sql(sql)
    return render_template("success.html")
 
@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 execute_sql(sql1):
    db = sqlite3.connect('test_flask.db')
    cur = db.cursor()
    print(sql1)
    cur.execute(sql1)
    cur.close()
    db.commit()
    db.close()

页面效果如下：

总结：修改这里有一个需要注意点的就是渲染修改页面前需要先获取要修改的信息，然后修改了相应的内容后再提交，提交就会入库，这个过程数据就会被Update成功。

备注：我的个人公众号已正式开通，致力于测试技术的分享，包含：大数据测试、功能测试，测试开发，API接口自动化、测试运维、UI自动化测试等，微信搜索公众号：“无量测试之道”，或扫描下方二维码：

 添加关注，让我们一起共同成长！