تحقيق تفاعلية الويب باستخدام Flask: نقل البيانات من Python إلى HTML
في عالم تطوير الويب، تحمل العديد من التحديات والاحتياجات لتحقيق تفاعلية وديناميكية في صفحات الويب. يبدو أنك تسعى إلى نقل بيانات متغيرة من Python إلى قالب HTML أو موقع ويب باستخدام Flask. دعني أشرح لك كيف يمكن تحقيق ذلك بطريقة تسمح بتفاعل فعّال بين تطبيق Flask الخاص بك وصفحات الويب التي تقدمها.
أولًا وقبل كل شيء، يجب أن تكون قد قمت بتثبيت Flask على Raspberry Pi الخاص بك وقد أعدت بنية تطبيق Flask الأساسية. الآن، دعونا نتناول الجوانب التقنية لهذا السياق.
باستخدام Flask، يمكنك نقل البيانات من Python إلى HTML بسهولة باستخدام قوالب Jinja2 المدمجة. يمكنك تضمين البيانات المراد عرضها في القالب باستخدام العلامات المميزة لـ Jinja2. على سبيل المثال، إذا كان لديك متغير في Python يسمى “my_variable”، يمكنك نقله إلى الصفحة HTML كما يلي:
pythonfrom flask import Flask, render_template
app = Flask(__name__)
@app.route('/')
def index():
my_variable = "Hello from Python!"
return render_template('index.html', my_variable=my_variable)
if __name__ == '__main__':
app.run(debug=True)
وفي قالب HTML (index.html)، يمكنك عرض هذا المتغير كما يلي:
htmlhtml>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flask Data Transfertitle>
head>
<body>
<p>{{ my_variable }}p>
body>
html>
عندما يتم تشغيل التطبيق وتصفح الصفحة الرئيسية، ستظهر الرسالة “Hello from Python!” في الفقرة.
يمكنك أيضًا تحديث هذا المتغير ديناميًا بمرور الوقت أو بناءً على الإدخال من المستخدم أو أي حدث آخر في التطبيق الخاص بك. باستخدام هذه الأساسيات، يمكنك بناء تطبيق Flask ينقل البيانات بين Python وHTML بشكل فعّال، وبالتالي تحقيق تفاعلية أفضل في صفحات الويب الخاصة بك.
المزيد من المعلومات
بالطبع، دعني أضيف المزيد من المعلومات لتوضيح كيفية تحقيق نقل البيانات بين Python وHTML بشكل أكثر تفصيلاً باستخدام Flask.
استخدام النماذج (Forms) في Flask:
في كثير من الأحيان، يتعين على التطبيقات تفاعلية استخدام النماذج لتلقي بيانات من المستخدم ومن ثم تحويلها وعرضها. يمكنك استخدام Flask-WTF (وهو امتداد Flask لإدارة النماذج) لإنشاء نماذج وتجميع البيانات.
pythonfrom flask import Flask, render_template, request
from flask_wtf import FlaskForm
from wtforms import StringField, SubmitField
app = Flask(__name__)
app.config['SECRET_KEY'] = 'mysecretkey'
class MyForm(FlaskForm):
my_variable = StringField('Enter Variable:')
submit = SubmitField('Submit')
@app.route('/', methods=['GET', 'POST'])
def index():
form = MyForm()
if form.validate_on_submit():
my_variable = form.my_variable.data
return render_template('index.html', my_variable=my_variable)
return render_template('index.html', form=form)
if __name__ == '__main__':
app.run(debug=True)
وفي القالب HTML، يمكنك تضمين النموذج بشكل مباشر:
htmlhtml>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flask Data Transfertitle>
head>
<body>
<form method="POST">
{{ form.hidden_tag() }}
{{ form.my_variable.label }} {{ form.my_variable(size=32) }}
{{ form.submit() }}
form>
{% if my_variable %}
<p>Received Variable: {{ my_variable }}p>
{% endif %}
body>
html>
هذا يسمح للمستخدم بإدخال متغير في نموذج الصفحة وإرساله إلى الخادم Flask. يتم عرض النموذج والبيانات المدخلة أو المستلمة في الصفحة HTML بشكل دينامي.
استخدام AJAX لتحديث الصفحة دون إعادة تحميل:
لتحسين تجربة المستخدم، يمكنك استخدام تقنية AJAX لتحديث أجزاء معينة من الصفحة دون الحاجة إلى إعادة تحميل الصفحة بأكملها. يمكنك استخدام مكتبة JavaScript مثل jQuery لتسهيل هذا العمل.
html
<script src="https://code.jquery.com/jquery-3.6.0.min.js">script>
<script>
$(document).ready(function(){
$('#myForm').submit(function(e){
e.preventDefault();
$.ajax({
type: 'POST',
url: '/',
data: $('#myForm').serialize(),
success: function(response){
$('#result').html(response);
}
});
});
});
script>
<body>
<form method="POST" id="myForm">
form>
<div id="result">div>
body>
هذا يسمح بتحديث الصفحة بشكل دينامي دون إعادة تحميل الصفحة بأكملها عند استخدام النموذج.
هذه الأمثلة توضح كيف يمكنك استخدام Flask بشكل أفضل لنقل البيانات بين Python وHTML، سواء كان ذلك من خلال قوالب Jinja2 أو باستخدام نماذج Flask-WTF مع AJAX لتحديث الصفحة بشكل دينامي.
