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基础入门全栈，手把手带你理解前后端逻辑｜追光吧哥哥小网站

感谢大佬的视频~