Python web+Bootstrap+Jquery+flask前后端框架完整登录项目

以下是一个简化的Python Flask前后端框架的登录示例，使用了Bootstrap和JQuery来增强用户界面。

首先，安装所需的Flask包：




pip install Flask

下面是简单的Flask后端代码：




from flask import Flask, render_template, request, redirect, url_for
 
app = Flask(__name__)
 
@app.route('/')
def index():
    return render_template('index.html')
 
@app.route('/login', methods=['POST'])
def login():
    username = request.form['username']
    password = request.form['password']
    # 这里应该是进行用户验证的逻辑，例如查询数据库
    # 假设用户名和密码都是'user'
    if username == 'user' and password == 'user':
        return '登录成功'
    return '登录失败'
 
if __name__ == '__main__':
    app.run(debug=True)

以下是前端HTML和JavaScript代码，使用Bootstrap和JQuery：




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Login Page</title>
    <!-- 引入Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script>
        $(document).ready(function() {
            $('#loginForm').submit(function(event) {
                event.preventDefault();
                $.post('/login', $(this).serialize(), function(response) {
                    $('#loginMessage').text(response);
                });
            });
        });
    </script>
</head>
<body>
    <div class="container mt-5">
        <div class="row justify-content-center">
            <div class="col-md-6">
                <div class="card">
                    <h5 class="card-header">Login</h5>
                    <div class="card-body">
                        <form id="loginForm">
                            <div class="form-group">
                                <label for="username">Username</label>
                                <input type="text" class="form-control" id="username" name="username">
                            </div>
                            <div class="form-group">
                                <label for="password">Password</label>
                                <input type="password" class="form-control" id="password" name="password">
                            </d

Python web+Bootstrap+Jquery+flask前后端框架完整登录项目

评论已关闭

推荐阅读