在Bootstrap頂部使用燒瓶wtf從另一個頁面登錄模式內容，如何獲得表單答案？-有解無憂

我是 HTML 編程的新手，所以我會盡力描述我的問題。這是改編自 Miguel Grinberg 的 Flask 教程，使用 Boostrap 4.6，經過大量研究。我的頁面是從基本模板擴展而來的。我的基地包含一個登錄模式頁面的鏈接，該頁面從一個單獨的 HTML 檔案中獲取其內容。我正在為這個登錄模式頁面使用 Flask WTF。當我登錄并單擊“注冊”按鈕時，似乎它重新加載了我所在的頁面。我認為它向該頁面的路由發送 form.submit 答案（例如，在 VS Code 的終端中，它說有一個到 /index 的 POST），所以問題是我怎樣才能獲得登錄的“登錄”按鈕答案路線？我已經找到了類似這個問題的答案，但還不足以實作它們。

（相關）routes.py：

from app import app, db
from app.models import User, Notification, Rule
from flask import render_template, flash, redirect, url_for, request, g, jsonify
from flask_login import current_user, login_user, logout_user, login_required
from app.forms import LoginForm, RegistrationForm, RuleForm

@app.route('/')
@app.route('/index', methods=['GET', 'POST'])
def index():
    if not current_user.is_authenticated:
        current_user.username="Guest User"
    return render_template('index.html', title='Home')

@app.route('/login', methods=['GET', 'POST'])
def login_modal():
    print("login_modal init")
    if current_user.is_authenticated:
        return redirect(url_for('index'))
    form = LoginForm()
    if form.validate_on_submit():
        print("validate form")
        user = User.query.filter_by(username=form.username.data).first()
        if user is None or not user.check_password(form.password.data):
            flash('Invalid username or password!', 'warning')
            return redirect(url_for('login'))
        login_user(user, remember=form.remember_me.data)
        flash('Successfull login!', 'success')
        return redirect(url_for('index'))
    return render_template('login-modal.html', title='Sign In', form=form)

這是我的基地：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">

    <!-- Custom fonts for this template-->
    <link href="{{ url_for('static', filename='fontawesome-free/css/all.min.css') }}" rel="stylesheet" type="text/css"> 
    <link
        href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i"
        rel="stylesheet">

    <!-- Custom styles for this template-->
    <link href="{{ url_for('static', filename='css/notificationservice.min.css') }}" rel="stylesheet">
    
    <link href="{{ url_for('static', filename='css/dataTables.bootstrap4.min.css') }}" rel="stylesheet">
    
    <link href="https://cdn.jsdelivr.net/gh/Eonasdan/tempus-dominus@master/dist/css/tempus-dominus.css"
    rel="stylesheet" crossorigin="anonymous">
    
    <!-- Bootstrap core JavaScript-->
    <script src="{{ url_for('static', filename='js/jquery/jquery.min.js') }}"></script> 
    <script src="{{ url_for('static', filename='bootstrap-v4.6.0-dist/js/bootstrap.bundle.min.js') }}"></script> 
    <script src="{{ url_for('static', filename='bootstrap-v4.6.0-dist/js/bootstrap.min.js') }}"></script> 

    <!-- Core plugin JavaScript-->
    <script src="{{ url_for('static', filename='js/jquery-easing/jquery.easing.min.js') }}"></script> 

    <!-- Custom scripts for all pages-->
    <script src="{{ url_for('static', filename='js/notificationservice.min.js') }}"></script> 

    <!-- Page level plugins -->
    <script src="{{ url_for('static', filename='js/jquery/jquery.dataTables.min.js') }}"></script> 
    <script src="{{ url_for('static', filename='js/dataTables.bootstrap4.min.js') }}"></script> 

    <!-- Page level custom scripts -->
    <script src="{{ url_for('static', filename='js/datatables-demo.js') }}"></script>
    
    
    <!-- Favicon -->
    <link rel="icon" type="image/x-icon" href="{{ url_for('static', filename='smartphone.ico') }}"> 
    
    <title>Notification Service - {{title}}</title>

</head>

<body id="page-top">        
    <!-- Page Wrapper -->
    <div id="wrapper">

        <!-- Sidebar -->
        <ul class="navbar-nav bg-gradient-primary sidebar sidebar-dark accordion" id="accordionSidebar">

            <!-- Sidebar - Brand -->
            <a class="sidebar-brand d-flex align-items-center justify-content-center" href="{{url_for('index')}}">
                <div class="sidebar-brand-icon">
                    <i class="fas fa-satellite-dish"></i>
                </div>
                <div class="sidebar-brand-text mx-3">Notification Service</div>
            </a>

            <!-- Divider -->
            <hr class="sidebar-divider">
            <!-- Nav Item - Notifications -->
            <li class="nav-item">
                <a class="nav-link" href="{{url_for('notifications')}}">
                    <i class="fas fa-bullhorn"></i>
                    <span >Notifications</span></a>
                <p></p>
            </li>

            <!-- Divider -->
            <hr class="sidebar-divider d-none d-md-block">
            <!-- Nav Item - Rules -->
            <li class="nav-item">
                <a class="nav-link" href="{{url_for('rules')}}">
                    <i class="fas fa-scroll"></i>
                    <span>Rules</span></a>
                <p></p>
            </li>

            {%if current_user.username == 'admin' %}
            <!-- Divider -->
            <hr class="sidebar-divider">
            <!-- Nav Item - Manage Accounts -->
            <li class="nav-item">
                <a class="nav-link" href="{{url_for('accounts')}}">
                    <i class="fas fa-tools"></i>
                    <span>Manage Accounts</span></a>
                <p></p>
            </li>
              <!-- Divider -->
              <hr class="sidebar-divider">
              <!-- Nav Item - Manage Accounts -->
              <li class="nav-item">
                  <a class="nav-link" href="{{url_for('rules_configure')}}">
                      <i class="fas fa-tools"></i>
                      <span>Configure Rules</span></a>
                  <p></p>
              </li>
            {% endif %}
            
            <!-- Divider -->
            <hr class="sidebar-divider d-none d-md-block">
            <!-- Sidebar Toggler (Sidebar) -->
            <div class="text-center d-none d-md-inline">
                <button class="rounded-circle border-0" id="sidebarToggle"></button>
            </div>

        </ul>
        <!-- End of Sidebar -->

        <!-- Content Wrapper -->
        <div id="content-wrapper" class="d-flex flex-column">

            <!-- Main Content -->
            <div id="content">

                <!-- Topbar -->
                <nav class="navbar navbar-expand navbar-light bg-white topbar mb-4 static-top shadow">
                    <div class="container" style="display:flex;justify-content:center;">
                        <div class="container" style="display:inline;text-align:center;width:auto;">
                            {% with messages = get_flashed_messages(with_categories=true) %}
                                {% if messages %}
                                {% for category, message in messages %}
                                    {% if category == 'message' %}
                                        <div class="alert alert-primary alert-dismissible" id="alert" role="alert" 
                                            style="margin-bottom: 0rem;">
                                    {% else %}
                                        <div class="alert alert-{{ category }} " id="alert" role="alert" 
                                            style="margin-bottom: 0rem;">
                                    {% endif %}
                                        {{ message }}
                                    </div>
                                {% endfor %}
                                {% endif %}
                            {% endwith %}
                        </div>
                    </div>
                    <!-- Sidebar Toggle (Topbar) -->
                    <button id="sidebarToggleTop" class="btn btn-link d-md-none rounded-circle mr-3">
                        <i class="fa fa-bars"></i>
                    </button>


                    <!-- Topbar Navbar -->
                    <ul class="navbar-nav ml-auto">
                        <div class="topbar-divider d-none d-sm-block"></div>

                        <!-- Nav Item - User Information -->
                        <li class="nav-item dropdown no-arrow">
                            <a class="nav-link dropdown-toggle" id="userDropdown" role="button"
                                data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                <span class="mr-2 d-none d-lg-inline text-gray-600 small">{% if current_user.is_authenticated %}
                                    {{current_user.username}}{%else%}Guest User{% endif %}</span>
                                <div class="sidebar-brand-icon">
                                    {% if current_user.is_authenticated %}
                                        <i class="fas fa-user-check fa-2x"></i>
                                    {%else%}
                                        <i class="fas fa-user-times fa-2x"></i>
                                    {% endif %}
                                    
                                    <!--<i ></i>-->
                                </div>
                            </a>
                            {% if current_user.is_authenticated %}
                            <!-- Dropdown - User Information -->
                            <div class="dropdown-menu dropdown-menu-right shadow animated--grow-in"
                                aria-labelledby="userDropdown">
                                <a class="dropdown-item" href="{{url_for('profile', username=current_user.username)}}">
                                    <i class="fas fa-user fa-sm fa-fw mr-2 text-gray-400"></i>
                                    Profile
                                </a>
                                <div class="dropdown-divider"></div>
                                <a class="dropdown-item" href="{{url_for('logout')}}" data-toggle="modal" data-target="#logoutModal">
                                    <i class="fas fa-sign-out-alt fa-sm fa-fw mr-2 text-gray-400"></i>
                                    Logout
                                </a>
                            </div>
                            {% else %}
                            <div class="dropdown-menu dropdown-menu-right shadow animated--grow-in"
                                aria-labelledby="userDropdown">
                                <a class="dropdown-item" href="{{url_for('login_modal')}}" data-toggle="modal" 
                                    data-target="#loginModal">
                                    <i class="fas fa-sign-in-alt fa-sm fa-fw mr-2 text-gray-400"></i>
                                    Login
                                </a>
                                <div class="dropdown-divider"></div>
                                <a class="dropdown-item" href="{{url_for('register')}}">
                                    <i class="fas fa-book fa-sm fa-fw mr-2 text-gray-400"></i>
                                    Register
                                </a>
                            </div>
                            {%endif%}
                        </li>

                    </ul>

                </nav>
                <!-- End of Topbar -->

                <!-- Begin Page Content -->
                <div class="container-fluid">
                    {% block app_content %}
                    {% endblock %}
                </div>
                
            </div>
            <!-- End of Main Content -->

            <!-- Footer -->
            <footer class="sticky-footer bg-white">
                <div class="container my-auto">
                    <div class="copyright text-center my-auto">
                        <span>NS 2022 &copy;</span>
                    </div>
                </div>
            </footer>
            <!-- End of Footer -->

        </div>
        <!-- End of Content Wrapper -->

    </div>
    <!-- End of Page Wrapper -->

    <!-- Scroll to Top Button-->
    <a class="scroll-to-top rounded" href="#page-top">
        <i class="fas fa-angle-up"></i>
    </a>   
    <!-- Login Modal-->
    <div class="modal fade" id="loginModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
        aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
            </div>
        </div>
    </div>
    <!-- Logout Modal-->
    <div class="modal fade" id="logoutModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
        aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Ready to Leave?</h5>
                    <button class="close" type="button" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">×</span>
                    </button>
                </div>
                <div class="modal-body">Select "Logout" below if you are ready to end your current session.</div>
                <div class="modal-footer">
                    <button class="btn btn-secondary" type="button" data-dismiss="modal">Cancel</button>
                    <a class="btn btn-primary" href="{{url_for('logout')}}">Logout</a>
                </div>
            </div>
        </div>
    </div>

    <script>
        $('body').on('click', '[data-target="#loginModal"]', function(){
            $($(this).data("target") ' .modal-content').load($(this).attr('href'));
        }); 
    </script>

    <script type="text/javascript">
        $(document).ready(function() {
        setTimeout(function() {
            $('#alert').fadeOut('slow');
        }, 3000); // <-- time in milliseconds
        });
    </script>

    <script type="text/javascript">
        $(document).ready(function() {
            $("#sidebarToggle").click(function(e) {
                e.preventDefault();
                $("#accordionSidebar").toggleClass("toggled");
                $('#accordionSidebar.toggled').find("#sidebar").find(".collapse").collapse('hide');
            });
        });
    </script>

    </body>

</html>

這是我的 index.html：

{% extends 'base.html' %}
{% set active_page = "index" %}

{% block app_content %}
    <h1 class="header_text">Some content...</h1>
{% endblock %}

登錄頁面：

<div class="card-body p-0">
    <!-- Nested Row within Card Body -->
    <div class="row">
        <div class="col-lg-12">
            <div class="p-5">
                <div class="text-center">
                    <h1 class="h4 text-gray-900 mb-4">Login</h1>
                </div>
                <form class="user" action="" method="post" id="loginForm" novalidate>
                    <div class="form-group has-validation">
                        <div>
                        {{ form.username(   
                            (" is-invalid" if form.username.errors else ""), placeholder="Username", 
                            id="inputValUsername", size=32, **{"aria-describedby": "inputValUsername", 
                            "required": ""}) }}
                        </div>
                        {% for error in form.username.errors %}
                        <div class="text-danger">
                            <small>{{ error }}</small>
                        </div>
                        {% endfor %}
                    </div>
                    <div class="form-group has-validation">
                        <div>
                        {{ form.password(   
                            (" is-invalid" if form.password.errors else ""), placeholder="Password", 
                            id="inputValPassword", size=32, **{"aria-describedby": "inputValPassword", 
                            "required": ""}) }}
                        </div>
                        {% for error in form.password.errors %}
                        <div class="text-danger">
                            <small>{{ error }}</small>
                        </div>
                        {% endfor %}
                    </div>
                    <div class="form-group">
                        <div class="custom-control custom-checkbox small">
                            {{ form.remember_me() }} {{ form.remember_me.label }}
                        </div>
                    </div>
                    {{ form.submit(, id='form-submit') }}
                </form>
                <hr>
                <div class="text-center">
                    <a class="small" href="{{url_for('forgot')}}">Forgot Password?</a>
                </div>
                <div class="text-center">
                    <a class="small" href="{{url_for('register')}}">Create an Account!</a>
                </div>
                <div class="text-center">
                    <a class="small" href="{{url_for('index')}}">Back to Notification Service Home</a>
                </div>
            </div>
        </div>
    </div>
</div>

uj5u.com熱心網友回復：

在您的表單中，html 元素更改action=""為action="/login"

轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/467334.html

標籤：javascript Python 烧瓶

上一篇：限制上傳燒瓶或瓶子中特定影像以外的任何影像

下一篇：如果燒瓶IF陳述句為真，則更改HTML并顯示導航欄