bootstrap的Modal使用，flask+python+bootstrap

flask之前用過，不過前端點架構沒用過bootstrap，第一次使用終于通了。

期間好多地方不知道怎麼寫，使用bootstrap提供點模闆還是要修改一些東西才能夠用。

git項目

https://github.com/shasky2014/zgbgg_BV13r4y1T7hQ

遇到的問題：

1. 點選送出按鈕沒有反應
2. 送出後，在flask中request.form為空
3. flask js檔案引用靜态檔案問題

使用的模闆：bootstrap的Modal

這是bootstrap官網提供的modal模闆

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@mdo">Open modal for @mdo</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@fat">Open modal for @fat</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@getbootstrap">Open modal for @getbootstrap</button>

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="exampleModalLabel">New message</h4>
      </div>
      <div class="modal-body">
        <form>
          <div class="form-group">
            <label for="recipient-name" class="control-label">Recipient:</label>
            <input type="text" class="form-control" id="recipient-name">
          </div>
          <div class="form-group">
            <label for="message-text" class="control-label">Message:</label>
            <textarea class="form-control" id="message-text"></textarea>
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Send message</button>
      </div>
    </div>
  </div>
</div>
           

具體解決

在結合flask使用的時候，需要把這個modal裡的form表單送出到背景的接口，

需要對給的模闆做點改動，才能在flask中跑起來。

具體改動和需要注意的點，記錄如下：

<--具體的按鈕按自己點需求填就可以了，data-target="#exampleModal" 需要和下面的modal的ID對應上-->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@mdo">Open modal for @mdo</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@fat">Open modal for @fat</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@getbootstrap">Open modal for @getbootstrap</button>

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="exampleModalLabel">New message</h4>
      </div>
      <div class="modal-body">
<-- 這裡是要送出的表單，送出到那呢？要用action來指定請求的接口，method指定請求的類型：get、post -->
-       <form>
+       <form action="{{ url_for('insert') }}" method="POST">
          <div class="form-group">
            <label for="recipient-name" class="control-label">Recipient:</label>
<-- 這裡定義送出的表單内容，在flask中用request拿到請求的結果，但是id無法被拿到，需要用name，我這裡卡了很久沒找到原因，其他元素做同樣的修改 -->
-           <input type="text" class="form-control" id="recipient-name">
+           <input type="text" class="form-control" name="recipient-name">
          </div>
          <div class="form-group">
            <label for="message-text" class="control-label">Message:</label>
-           <textarea class="form-control" id="message-text"></textarea>
+           <textarea class="form-control" name="message-text"></textarea>
          </div>
<-- 1. form的送出需要用submit。也就是Send message的button的type，設定為submit，否則無法送出，點選按鈕沒反應-->
<-- 2. 本來送出btn在form外面，這個需要提到form内才能送出form的資訊-->
+         <div class="modal-footer">
+            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
+	         <button type="submit" class="btn btn-primary">Send message</button>
+	       </div>
        </form>
      </div>
-     <div class="modal-footer">
-       <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
-       <button type="button" class="btn btn-primary">Send message</button>
-     </div>
    </div>
  </div>
</div>
           

一直在看視訊寫【Flask實戰項目】2021最新Web全棧教程，0基礎入門全棧，手把手帶你了解前後端邏輯｜追光吧哥哥小網站

感謝大佬的視訊~