大家好，我是金魚座，一個(gè)走在測(cè)試領(lǐng)域這片藍(lán)海中， 蹉跎前行的技術(shù)渣渣，唯有一直走下去，也許能改變點(diǎn)什么，加油！

最近在開發(fā)測(cè)試用例管理平臺(tái)時(shí)， 由于之前的案例一直都是采用添加和編輯頁面都是獨(dú)立html方案，后面的視圖方法中最終總是可以通過wtform中的方式進(jìn)行數(shù)據(jù)回顯， 編輯頁面時(shí)可以顯示他對(duì)應(yīng)的值，考慮到日常平臺(tái)使用，這種頁面層級(jí)過長(zhǎng)，使用不便，所以自己想升級(jí)使用彈出框的大眾方案

在這過程中，突然發(fā)現(xiàn)一個(gè)問題， 就是彈出框形式無法像html一樣，通過render_template來將form表單的值回顯到頁面中，通過個(gè)人的咨詢， 考慮使用最簡(jiǎn)單的Ajax請(qǐng)求來獲取數(shù)據(jù)需要的數(shù)據(jù)，然后在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)         # 該內(nèi)容可以讓編輯頁面默認(rèn)顯示當(dāng)前的內(nèi)容
    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)

優(yōu)點(diǎn)：前后端只需要通過form來完成數(shù)據(jù)回填和顯示， 操作簡(jiǎn)單
缺點(diǎn)：頁面層級(jí)增加一級(jí)，總是需要回退，較為麻煩

方案如下：
思路：通過Ajax請(qǐng)求獲得數(shù)據(jù)，然后進(jìn)行js數(shù)據(jù)回填

表單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">所屬產(chǎn)品:</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">期望結(jié)果:</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">關(guān)閉</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>

視圖函數(shù)

@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;
##################
//此處注意，主要是為了實(shí)現(xiàn)編輯彈出框可以更加點(diǎn)擊的記錄實(shí)時(shí)顯示值，并且提交到執(zhí)行的后端處理
                document.getElementById("editform").setAttribute("action", "/cases_/case/edit/"+data.caseid);
##################
                $('#editcase').modal('show');
            }
            else {
                alert(data.msg);
            }
        },
        error: function () {
            console.log(data);
            alert("獲取數(shù)據(jù)失敗，請(qǐng)重新打開編輯頁面");
        }
    });
}

優(yōu)點(diǎn)：界面顯示操作符合大眾操作習(xí)慣，使用起來簡(jiǎn)便
缺點(diǎn)：涉及到Ajax，視圖處理多了一個(gè)ajax處理

有些同學(xué)可能對(duì)第二個(gè)彈出框方案中有疑問，既然無法使用render_template進(jìn)行模板渲染，為什么彈出框中依舊用的form模板渲染格式呢，
此處我想解釋下，上述的渲染我是在列表頁面中渲染出來了，也就是說無論添加框還是編輯框全部在打開列表頁面時(shí)就已經(jīng)渲染html出來了