Question

我需要开发后端系统，并将（第一次）Flask和mongodb用于数据库。基本上，我需要在网页中使用“添加”按钮将数据添加到表中的动态表，并为每行数据添加“更新”按钮。到目前为止，一旦页面被访问，我已经设法从数据库加载数据（用于表）并将新数据添加到表和数据库中。但是我无法在每一行中实现“更新”按钮，因为我不知道如何检测表中单击了哪个按钮。我试图通过分配给资格ID（表中的任何行）的按钮值来获取它。下表是表格，我使用了引导程序模态（内部具有“ html表单”）进行添加和更新

<table class="table table-condensed">
    <thead>
    <tr>
        <th>Qualification</th>
        <th>Calculation of overall result</th>
        <th>Minimum Score</th>
        <th>Maximum Score</th>
        <th></th>
    </tr>
    </thead>
    <tbody>
    {% for qual in qualifications %}
    <tr>
        <td>{{ qual.qualificationName }}</td>
        <td>{{ qual.calculation }}</td>
        <td>{{ qual.minimumScore }}</td>
        <td>{{ qual.maximumScore }}</td>
        <td>
            <!-- Button trigger modal -->
            <form method="post" action="">
                <<button type="submit" class="btn btn-danger" data-toggle="modal" data-target="#updateModalCenter"
                        name="updateBtn" value="{{ qual._id }}">Update
                </button>
            </form>
            <!-- Modal -->
            <div class="modal fade" id="updateModalCenter" tabindex="-1" role="dialog" aria-labelledby="updateModalCenterTitle" aria-hidden="true">
                <div class="modal-dialog modal-dialog-centered" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="updateModalLongTitle">Update Qualification</h5>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div class="modal-body">
                            <form method="post" action="{{setupQual/qual._id}}">
                                <div class="form-group">
                                    <label>Qualification Name</label>
                                    <input type="text" class="form-control" name="qualNameUpdate">
                                </div>
                                <div class="form-group">
                                    <label>Calculation of result by average of how many subjects: </label>
                                    <select multiple class="form-control" name="calculationUpdate">
                                        <option>1 subject</option>
                                        <option>2 subjects</option>
                                        <option>3 subjects</option>
                                        <option>4 subjects</option>
                                        <option>5 subjects</option>
                                        <option>6 subjects</option>
                                        <option>7 subjects</option>
                                        <option>8 subjects</option>
                                    </select>
                                </div>
                                <div class="form-group">
                                    <label>Minimum Score</label>
                                    <input type="number" class="form-control" name="minScoreUpdate" placeholder="Enter number(s) only">
                                </div>
                                <div class="form-group">
                                    <label>Maximum Score</label>
                                    <input type="number" class="form-control" name="maxScoreUpdate" placeholder="Enter number(s) only">
                                </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                            <input type="submit" class="btn btn-primary" value="Save">
                        </div>
                        </form>
                    </div>
                </div>
            </div>
        </td>
    </tr>
    {% endfor %}
    </tbody>
</table>

用于添加的后端代码

@app.route("/setupQual/add", methods = ['POST'])   #addding to db from modal
def addQualification():

qualName = request.form['qualName']
calc = request.form['calculation']
minScore = request.form['minScore']
maxScore = request.form['maxScore']

addToDB = {
        "qualificationName": qualName,
        "calculation": calc,
        "minimumScore": minScore,
        "maximumScore": maxScore
    }
db.qualifications.insert_one(addToDB)
return redirect(url_for('setupQual'))

我尝试了许多方法，但都失败了，而我最近更新的代码是：

@app.route("/setupQual/<string: _id>" , methods = ['GET', 'POST']) #loading 
from db for modal updating
def loadQualToUpdate():
updateBtnId = request.form['updateBtn']
qualUpdate = "myUni"#delete later, only for testing
updateQualifications = db.qualifications.findOne({
    "_id": updateBtnId
})
qualName = request.form['qualNameUpdate']
calc = request.form['calculationUpdate']
minScore = request.form['minScoreUpdate']
maxScore = request.form['maxScoreUpdate']

updateDB = {
    "$set": {
        "qualificationName": qualName,
        "calculation": calc,
        "minimumScore": minScore,
        "maximumScore": maxScore
    }
}
db.qualifications.updateOne(updateQualifications, updateDB)
return redirect(url_for('setupQual'))

很显然，单击“更新”按钮后，页面不应重新加载。因此，使用Flask python捕获表中“正确”更新按钮的任何建议。

Answer 1

我通过将ID值分配给隐藏的输入来实现

<input type="hidden" name="id" value="{{ qual._id }}" />

从烧瓶请求并通过id找到数据并在mongodb上更新

如何检测Flask python（mongoDB）单击了哪个更新按钮

1 个答案: