【flask】 flask+AJAX+html+CSS+js实现一个简单的注册登录系统

以下是一个使用Flask、AJAX和HTML/CSS/JS实现的简单注册登录系统的例子。

首先，安装Flask:

pip install Flask

然后，创建一个简单的Flask应用:

from flask import Flask, render_template, request, jsonify
 
app = Flask(__name__)
 
@app.route('/')
def index():
    return render_template('index.html')
 
@app.route('/api/register', methods=['POST'])
def register():
    # 注册逻辑，这里仅打印信息示例
    username = request.json.get('username')
    password = request.json.get('password')
    print(f'User {username} registered with password {password}')
    return jsonify({'message': 'Registered successfully!'}), 200
 
@app.route('/api/login', methods=['POST'])
def login():
    # 登录逻辑，这里仅打印信息示例
    username = request.json.get('username')
    password = request.json.get('password')
    print(f'User {username} logged in with password {password}')
    return jsonify({'message': 'Logged in successfully!'}), 200
 
if __name__ == '__main__':
    app.run(debug=True)

在同一目录下创建static文件夹，用于存放CSS和JS文件。然后在static/css下创建style.css，在static/js下创建script.js，并在templates文件夹下创建index.html。

static/css/style.css:

/* 这里添加CSS样式 */

static/js/script.js:

// 使用jQuery发送AJAX请求
$(document).ready(function() {
    $('#registerForm').submit(function(e) {
        e.preventDefault();
        var data = {
            username: $('#registerUsername').val(),
            password: $('#registerPassword').val()
        };
        $.ajax({
            type: 'POST',
            url: '/api/register',
            contentType: 'application/json',
            data: JSON.stringify(data),
            success: function(response) {
                alert(response.message);
            },
            error: function(xhr) {
                alert("An error occurred!");
            }
        });
    });
 
    $('#loginForm').submit(function(e) {
        e.preventDefault();
        var data = {
            username: $('#loginUsername').val(),
            password: $('#loginPassword').val()
        };
        $.ajax({
            type: 'POST',