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

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

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

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

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

<form role="form" method="post">
     {% for msg in get_flashed_messages(category_filter=["no"]) %}
        <div class="alert alert-danger alert-dismissible">
            <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
            <h4><i class="icon fa fa-ban"></i> 添加失败!</h4>
            {{ msg }}
        </div>
     {% endfor %}
     {% for msg in get_flashed_messages(category_filter=["ok"]) %}
        <div class="alert alert-success alert-dismissible">
            <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
            <h4><i class="icon fa fa-ban"></i> 添加成功!</h4>
            {{ msg }}
        </div>
     {% endfor %}
    <div class="box-body">
        <div class="form-group">
            <label for="InputCode">{{ form.code.label }}</label>
{#                            <input type="text" class="form-control" id="exampleInputEmail1" placeholder="Model Code">#}
            {{ form.code }}
        </div>
        {% for err in form.code.errors %}
            <div class="col-md-12">
                <font style="color: red">{{ err }}</font>
            </div>
        {% endfor %}
        <div class="form-group">
            <label for="InputName">{{ form.name.label }}</label>
{#                            <input type="text" class="form-control" id="exampleInputPassword1" placeholder="Model Name">#}
            {{ form.name }}
        </div>
        {% for err in form.name.errors %}
            <div class="col-md-12">
                <font style="color: red">{{ err }}</font>
            </div>
        {% endfor %}

    </div>
    <!-- /.box-body -->

    <div class="box-footer">
{#                        <button type="submit" class="btn btn-primary">Submit</button>#}
        {{ form.submit }}
        {{ form.csrf_token }}
    </div>
</form>

视图处理

@admin.route('/prd/edit/<int:id>', 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

<div id="editcase" class="modal inmodal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog">
        <form class="form-horizontal"  role="form" method="post" id="editform" >
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">×</span></button>
                    <h4 class="modal-title">编辑用例</h4>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <label class="col-sm-2 control-label">所属产品:</label>
                        <div class="col-sm-10">
{#                                                    <input type="text" class="form-control" name="a" placeholder="Model Code">#}
                            {{ form.proid }}
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">操作步骤:</label>
                        <div class="col-sm-10">
{#                                                    <input type="text" class="form-control" name="a" placeholder="Model Code">#}
                            {{ form.casestep }}
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">期望结果:</label>
                        <div class="col-sm-10">
{#                                                    <input type="text" class="form-control" name="a" placeholder="Model Code">#}
                            {{ form.caseresult }}
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <div class="box-footer">
                        <button type="button" class="btn btn-default pull-left" data-dismiss="modal">关闭</button>
{#                                                <button type="submit" class="btn btn-info pull-right">提交</button>#}
                        {{ form.submit }}
                        {{ form.csrf_token }}
                    </div>
                </div>
            </div>
        </form>
        <!-- /.modal-content -->
    </div>
                            <!-- /.modal-dialog -->
</div>

视图函数

@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出来了