构建Flask前后端不分离项目（附Python Demo）

码农研究僧

于 2024-07-31 08:00:00 发布

阅读量459

点赞数 6

分类专栏：项目实战文章标签： python python web Flask

本文链接：https://blog.csdn.net/weixin_47872288/article/details/140748230

版权

项目实战专栏收录该内容

21 篇文章 18 订阅

订阅专栏

前言

本文侧重的思想是教大家如何构建python前后端不分离项目
如何驱动如何跑

对于Java更多的知识推荐阅读：

基本的项目结构如下：

Flask用来构建后端 API，并且能够处理静态文件和模板渲染

my_project/
├── app/
│   ├── static/
│   │   └── style.css
│   ├── templates/
│   │   └── index.html
│   ├── __init__.py
│   ├── routes.py
└── run.py

1. Flask应用

app/__init__.py：

from flask import Flask

def create_app():
    app = Flask(__name__)
    from . import routes
    app.register_blueprint(routes.bp)
    return app

app/routes.py：

from flask import Blueprint, render_template

bp = Blueprint('main', __name__)

@bp.route('/')
def index():
    return render_template('index.html')

run.py：

from app import create_app

app = create_app()

if __name__ == '__main__':
    app.run(host='0.0.0.0', port=5000, debug=True)

2. 前端

基本的前端如下：

app/templates/index.html：

<!DOCTYPE html>
<html>
<head>
    <title>My Project</title>
    <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='style.css') }}">
</head>
<body>
    <h1>Welcome to My Project!</h1>
</body>
</html>

app/static/style.css：

body {
    font-family: Arial, sans-serif;
}

之后执行run文件就可正常访问：

在这里插入图片描述

3. 升级（前后交互）

如果需要进行前后端交互，只需要修改前端的界面以及后端的接口即可

更新 Flask 后端逻辑，app/routes.py

在 Flask 路由中添加一个新的路由来处理计算请求

这个路由会接收用户的输入，进行计算，并将结果返回给前端

from flask import Blueprint, render_template, request, jsonify
from datetime import datetime

bp = Blueprint('main', __name__)

@bp.route('/')
def index():
    return render_template('index.html')

@bp.route('/calculate', methods=['POST'])
def calculate():
    data = request.get_json()
    number = data.get('number', 0)
    today_day = datetime.now().day
    result = number * 2024 + 1999 + today_day
    return jsonify({'result': result})

更新前端模板，app/templates/index.html

在前端页面中添加一个表单，让用户输入数值，并使用 JavaScript 发送 POST 请求到 Flask 后端的 /calculate 路由

<!DOCTYPE html>
<html>
<head>
    <title>My Project</title>
    <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='style.css') }}">
    <script>
        function calculate() {
            const number = document.getElementById('numberInput').value;
            fetch('/calculate', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({ number: parseInt(number, 10) })
            })
            .then(response => response.json())
            .then(data => {
                document.getElementById('result').textContent = 'Result: ' + data.result;
            })
            .catch(error => console.error('Error:', error));
        }
    </script>
</head>
<body>
    <h1>Welcome to My Project!</h1>
    <label for="numberInput">Enter a number:</label>
    <input type="number" id="numberInput" />
    <button onclick="calculate()">Calculate</button>
    <p id="result"></p>
</body>
</html>