时间戳

首页 > 解决方案 > 在进入 Jinja2 模板中动态创建的链接之前，如何使用确认模型？

html - 在进入 Jinja2 模板中动态创建的链接之前，如何使用确认模型？

问题描述

我正在尝试删除插入到在 Jinja2 模板内创建的 HTML 表中的记录。我想在删除前确认。如果这很重要，我正在使用 Bootstrap5。

这有效，但没有确认模型。

<table class="table table-striped">
    <thead>      
      <tr>        
        <th>Name</th>
        <th>Email</th>
        <th>Password</th>
        <th> </th>
        <th> </th>
      </tr>
    </thead>
    <tbody>
      {% for u in users %}
        {% set uid = u[0] %}
        {% set first = u[2] %}
        {% set last = u[3] %}
        {% set email = u[4] %}
        {% set password = u[5] %}
        <tr>
          
          <td>{{last}}, {{first}}</td>
          <td>{{email}}</td>
          <td>{{password}}</td>   
          <td>
            <a href="/processDeleteUser/{{uid}}" class="btn btn-light" role="button"><i style="color:red" class="fa fa-times fa-1x"></i></a>

          </td>
        </tr>
      {% endfor %}      
    </tbody>
  </table>

但是，当我尝试使用确认模型删除时，URL 中的 UID（记录 ID）会更改为表中的第一条记录。这当然会导致错误的记录被删除。以下是带有确认模型的代码：

<table class="table table-striped">
    <thead>      
      <tr>        
        <th>Name</th>
        <th>Email</th>
        <th>Password</th>
        <th> </th>
        <th> </th>
      </tr>
    </thead>
    <tbody>
      {% for u in users %}
        {% set uid = u[0] %}
        {% set first = u[2] %}
        {% set last = u[3] %}
        {% set email = u[4] %}
        {% set password = u[5] %}
        <tr>
          
          <td>{{last}}, {{first}}</td>
          <td>{{email}}</td>
          <td>{{password}}</td>          
          <td>
            <!-- Button trigger modal -->
            <button type="button" class="btn btn-light" data-bs-toggle="modal" data-bs-target="#confirmModal">
              <i style="color:red" class="fa fa-times fa-1x"></i>
            </button>
            
            <!-- Modal -->
            <div class="modal fade" id="confirmModal" tabindex="-1" aria-labelledby="confirmModalLabel" aria-hidden="true">
              <div class="modal-dialog">
                <div class="modal-content">
                  <div class="modal-header">
                    <h5 class="modal-title" id="confirmModalLabel">Confirm Delete</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                  </div>
                  <div class="modal-body">
                    Are you sure you want to delete this user?
                  </div>
                  <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                    <a href="/processDeleteUser/{{uid}}" class="btn btn-danger" role="button">Delete</a>
                  </div>
                </div>
              </div>
            </div>
          </td>                     
        </tr>
      {% endfor %}      
    </tbody>
  </table>

使用模型时如何防止 UID 发生变化？

标签： htmljinja2crudbootstrap-5

解决方案

我可以从您的代码中看到一些问题。

  1. 您正在尝试使用锚标记来删除某些内容，这不符合 HTTP 标准，因为它正在执行GET请求。您应该改用DELETErequest 。
  2. 您正在为每个行记录创建一个模式。这很好，但它们都使用相同的 id，如果您在浏览器中打开控制台，它将呈现警告。当您尝试通过 id（按钮的操作）调用您的模式时，调用将是一个不可预知的操作。
<table class="table table-striped">
    <thead>      
      <tr>        
        <th>Name</th>
        <th>Email</th>
        <th>Password</th>
        <th> </th>
        <th> </th>
      </tr>
    </thead>
    <tbody>
      {% for u in users %}
        {% set uid = u[0] %}
        {% set first = u[2] %}
        {% set last = u[3] %}
        {% set email = u[4] %}
        {% set password = u[5] %}
        <tr>
          
          <td>{{last}}, {{first}}</td>
          <td>{{email}}</td>
          <td>{{password}}</td>          
          <td>
            <!-- Button trigger modal -->
            <button type="button" class="btn btn-light" data-bs-toggle="modal" data-bs-target="#confirmModal-{{uid}}">
              <i style="color:red" class="fa fa-times fa-1x"></i>
            </button>
            
            <!-- Modal -->
            <div class="modal fade" id="confirmModal-{{uid}}" tabindex="-1" aria-labelledby="confirmModalLabel" aria-hidden="true">
              <div class="modal-dialog">
                <div class="modal-content">
                  <div class="modal-header">
                    <h5 class="modal-title" id="confirmModalLabel-{{uid}}">Confirm Delete</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                  </div>
                  <div class="modal-body">
                    Are you sure you want to delete this user?
                  </div>
                  <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                    <button onclick="deleteUser({{uid}})" class="btn btn-danger" role="button">Delete</a>
                  </div>
                </div>
              </div>
            </div>
          </td>                     
        </tr>
      {% endfor %}      
    </tbody>
  </table>
  <script>
  function deleteUser(uid) {
    fetch('/processDeleteUser/' + uid, {
        method: 'DELETE'
    })
    .then(response => console.log(response.json()))
    .catch(error => console.log(error))
  }
  </script>

我已经更改了模态框的 id，它以 uid 为后缀，使它们独一无二。这仅适用于模板，从processDeleteUser烧瓶中的端点，您需要更改接受的方法才能DELETE使其工作。您可能还想更改控制台日志以以更自定义的方式处理删除响应。

另一个值得注意的项目是您使用 list 作为您的 users 对象，它会起作用，但建议使用Userclass 代替。

推荐阅读