淘先锋技术网

首页 1 2 3 4 5 6 7

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

感谢大佬的视频~