前言
本文侧重的思想是教大家如何构建python前后端不分离项目
如何驱动如何跑
基本的项目结构如下：
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>
最后的效果如下：
