前后端分离程序开发示例

最新推荐文章于 2025-04-03 16:49:51 发布

cultivate1

最新推荐文章于 2025-04-03 16:49:51 发布

阅读量226

点赞数 3

文章标签： python flask windows 后端前端

本文链接：https://blog.youkuaiyun.com/cultivate1/article/details/140356300

版权

#前端程序：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Flask App Login</title>
</head>
<body>
    <h1>Login to Flask App</h1>
    <input type="text" id="username" placeholder="Username" />
    <input type="password" id="password" placeholder="Password" />
    <button onclick="performLogin()">Log In</button>
    <script>
        // 定义后端服务的URL，根据实际情况进行修改, 确保baseUrl与后端服务的实际URL相匹配
const baseUrl = 'http://localhost:8080'; // 后端服务的URL
function performLogin() {
    const username = document.getElementById('username').value;
    const password = document.getElementById('password').value;

    const loginData = {
        username: username,
        password: password
    };

    fetch(baseUrl + '/login', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify(loginData)
    })
    .then(response => {
        // 检查响应的HTTP状态码
        if (!response.ok) {
            // 如果响应不是ok，将抛出一个包含状态码和状态文本的错误
            throw new Error('Network response was not ok: ' + response.status + ' ' + response.statusText);
        }
        return response.json(); // 解析JSON数据
    })
    .then(data => {
        console.log('Login Response:', data.message);
        // 这里可以添加登录成功后的逻辑
    })
    .catch(error => {
        // 打印出错误信息，包括之前抛出的错误
        console.error('Error during login:', error.message);
    });
}

        // 请求首页的函数
        function requestHomepage() {
            fetch(baseUrl + '/')
            .then(response => response.text())
            .then(data => {
                console.log('Homepage Data:', data);
                // 这里可以根据需要处理首页的数据
            })
            .catch(error => {
                console.error('Error during homepage request:', error);
            });
        }
    </script>
</body>
</html>

#后端代码

# 导入Flask模块
from flask import Flask, request, jsonify
from flask_cors import CORS

app = Flask(__name__)
#解决跨域访问
CORS(app)
# 假设的用户数据库，实际应用中应该是数据库查询
users_db = {
    "user1": "password1",
    "user2": "password2"
}

@app.route("/login", methods=['POST'])
def login():
    # 获取请求体中的数据，这里假设前端发送的是JSON格式
    data = request.get_json()
    
    # 获取用户名和密码
    username = data.get('username')
    password = data.get('password')
    
    # 检查用户名是否存在
    if username not in users_db:
        return jsonify({'message': 'User not found'}), 200
    
    # 检查密码是否正确
    if users_db[username] == password:
        # 如果用户名和密码都正确，返回成功消息
        return jsonify({'message': 'Login successful'}), 200
    else:
        # 如果密码错误，返回错误消息
        return jsonify({'message': 'Incorrect password'}), 200

# if __name__ == '__main__':
#     # 运行Flask应用，设置debug=True可以在开发过程中提供调试信息
#     app.run(debug=True)

以代码为前后端如何调用的示例，仅供参考。前后端发布后即可调用。
后端发布方法可参考：https://blog.youkuaiyun.com/cultivate1/article/details/140352411
前端发布可参考：https://blog.youkuaiyun.com/cultivate1/article/details/140356796