Flask探索- 使用模态框进行编辑数据回显和传统处理方案的比较

大家好，我是金鱼座，一个走在测试领域这片蓝海中， 蹉跎前行的技术渣渣，唯有一直走下去，也许能改变点什么，加油！

最近在开发测试用例管理平台时， 由于之前的案例一直都是采用添加和编辑页面都是独立html方案，后面的视图方法中最终总是可以通过wtform中的方式进行数据回显， 编辑页面时可以显示他对应的值，考虑到日常平台使用，这种页面层级过长，使用不便，所以自己想升级使用弹出框的大众方案

在这过程中，突然发现一个问题， 就是弹出框形式无法像html一样，通过render_template来将form表单的值回显到页面中，通过个人的咨询， 考虑使用最简单的Ajax请求来获取数据需要的数据，然后在Ajax中success中通过js回填

回顾老的方案：
思路：通过render_template渲染，将Form中的值，渲染到页面中
form表单

     {% for msg in get_flashed_messages(category_filter=["no"]) %}
        

            ×
            
 添加失败!
            {{ msg }}
        
     {% endfor %}
     {% for msg in get_flashed_messages(category_filter=["ok"]) %}
        

            ×
            
 添加成功!
            {{ msg }}
        
     {% endfor %}
    

        

            {{ form.code.label }}
{#                            #}
            {{ form.code }}
        
        {% for err in form.code.errors %}
            

                {{ err }}
            
        {% endfor %}
        

            {{ form.name.label }}
{#                            #}
            {{ form.name }}
        
        {% for err in form.name.errors %}
            

                {{ err }}
            
        {% endfor %}

    
    

    

{#                        Submit#}
        {{ form.submit }}
        {{ form.csrf_token }}
    

视图处理

@admin.route('/prd/edit/', methods=["POST", "GET"])
def product_edit(id=None):
    product = Product.query.get(id)
    productform = ProductForm(name=product.name, code=product.code)         # 该内容可以让编辑页面默认显示当前的内容
    if productform.validate_on_submit():
        data = productform.data
        count = Product.query.filter_by(name=data["name"]).count()
        if count == 1:
            if data["name"] == product.name and data["code"] == product.code:
                flash("模型未修改", "no")
                return redirect(url_for("admin.product_edit", id=id))
            else:
                flash("模型已存在", "no")
                return redirect(url_for("admin.product_edit", id=id))
        product.name = data["name"]
        product.code = data["code"]
        db.session.merge(product)
        db.session.commit()
        flash("模型修改成功", "ok")
        return redirect(url_for("admin.product_edit", id=id))
    return render_template("product/product_edit.html", form=productform, model=product)

优点：前后端只需要通过form来完成数据回填和显示， 操作简单
缺点：页面层级增加一级，总是需要回退，较为麻烦

方案如下：
思路：通过Ajax请求获得数据，然后进行js数据回填

表单form

    

        

            

                

                    
                        ×
                    
编辑用例
                
                

                    

                        所属产品:
                        

{#                                                    #}
                            {{ form.proid }}
                        
                    
                    

                        操作步骤:
                        

{#                                                    #}
                            {{ form.casestep }}
                        
                    
                    

                        期望结果:
                        

{#                                                    #}
                            {{ form.caseresult }}
                        
                    
                
                

                    

                        关闭
{#                                                提交#}
                        {{ form.submit }}
                        {{ form.csrf_token }}
                    
                
            
        
        
    
                            

视图函数

@case_app.route("/get_case_message", methods=["POST"])
def get_case_message():
    data = json.loads(request.values.get('data'))
    id = data["id"]
    case = _Case.query.filter_by(id=id).first()
    success = {'status': 'success', 'msg': "重置成功"}
    success["caseid"] = case.id
    success["proid"] = case.proid
    success["menuid"] = case.menuid
    success["casecode"] = case.casecode
    success["casetype"] = case.casetype
    success["casepre"] = case.casepre
    success["casedesc"] = case.casedesc
    success["casestep"] = case.casestep
    success["caseresult"] = case.caseresult
    data = json.dumps(success)
    return Response(data, content_type='application/json')

ajax处理

function getmessage(obj) {
{#    $('#edit').click( function () {#}

    debugger;
    var id = $(obj).attr("id");
    $.ajax({
        type: 'post',
        url: '{{ url_for("case_app.get_case_message") }}',
        dataType: 'json',
        data: {
            data: JSON.stringify({
                'id': id
            })
        },
        success: function (data) {
            if (data.status == 'success') {
                document.getElementsByName("proid")[1].value = data.proid;
                document.getElementsByName("menuid")[1].value = data.menuid;
                document.getElementsByName("casecode")[1].value = data.casecode;
                document.getElementsByName("casetype")[1].value = data.casetype;
                document.getElementsByName("casepre")[1].value = data.casepre;
                document.getElementsByName("casedesc")[1].value = data.casedesc;
                document.getElementsByName("casestep")[1].value = data.casestep;
                document.getElementsByName("caseresult")[1].value = data.caseresult;
##################
//此处注意，主要是为了实现编辑弹出框可以更加点击的记录实时显示值，并且提交到执行的后端处理
                document.getElementById("editform").setAttribute("action", "/cases_/case/edit/"+data.caseid);
##################
                $('#editcase').modal('show');
            }
            else {
                alert(data.msg);
            }
        },
        error: function () {
            console.log(data);
            alert("获取数据失败，请重新打开编辑页面");
        }
    });
}

优点：界面显示操作符合大众操作习惯，使用起来简便
缺点：涉及到Ajax，视图处理多了一个ajax处理

有些同学可能对第二个弹出框方案中有疑问，既然无法使用render_template进行模板渲染，为什么弹出框中依旧用的form模板渲染格式呢，
此处我想解释下，上述的渲染我是在列表页面中渲染出来了，也就是说无论添加框还是编辑框全部在打开列表页面时就已经渲染html出来了