איך להשתמש בטפסים רשתיים ביישום פלאס

Flask Python

המחבר בחר לתת תרומה לקרן חופשית ופתוחת המקור כחלק מתוכנית כתיבה למען תרומות.

מבוא

טפסי אינטרנט, כמו שדות טקסט ואזורי טקסט, מאפשרים למשתמשים לשלוח נתונים ליישום שלך כדי להשתמש בו כדי לבצע פעולה, או לשלוח אזורי טקסט גדולים יותר ליישום. לדוגמה, ביישום מדיה חברתית, ייתכן שתיתן למשתמשים תיבה שבה הם יכולים להוסיף תוכן חדש לדפיהם. דוגמה נוספת היא דף כניסה, שם היית נותן למשתמש שדה טקסט להזנת שם המשתמש שלהם ושדה סיסמה להזנת הסיסמה שלהם. השרת (היישום Flask שלך במקרה זה) משתמש בנתונים שהמשתמש שלח ואו מחתיר אותם אם הנתונים תקפים, או מגיב בהודעה כמו Invalid credentials! כדי ליידע את המשתמש שהנתונים שהם שלחו אינם נכונים.

Flask היא מסגרת אינטרנט קלת משקל בפייתון שמספקת כלים ותכונות שימושיים ליצירת יישומי אינטרנט בשפת הפייתון. במדריך זה, תבנה יישום אינטרנט קטן שמדגים כיצד להשתמש בטפסים אינטרנטיים. היישום יכלול דף להצגת הודעות המאוחסנות ברשימת פייתון, ודף להוספת הודעות חדשות. תשתמש גם ב-הודעת פלאש כדי ליידע את המשתמשים על שגיאה כאשר הם מגישים נתונים לא חוקיים.

תנאים מוקדמים

סביבת פיתוח פייתון 3 מקומית, עקוב אחר המדריך עבור ההפצה שלך בסדרת כיצד להתקין ולהגדיר סביבת פיתוח מקומית עבור פייתון 3. במדריך זה, נקרא לתיקיית הפרויקט flask_app.
הבנה של מושגי בסיס ב-Flask, כגון נתיבים, פונקציות תצוגה ותבניות. אם אינך מכיר Flask, עיין ב-כיצד ליצור את היישום הרשתי הראשון שלך באמצעות Flask ו-Python וב-כיצד להשתמש בתבניות ביישום Flask.
הבנה של מושגי HTML בסיסיים. תוכל לסקור את סדרת המדריכים שלנו כיצד לבנות אתר עם HTML לידע רקע.

שלב 1 – הצגת הודעות

בשלב זה, תיצור יישום Flask עם דף ראשי להצגת הודעות המאוחסנות ברשימה של מילונים של Python.

ראשית, פתח קובץ חדש בשם app.py לעריכה:

nano app.py

הוסף את הקוד הבא בתוך קובץ app.py כדי ליצור שרת Flask עם נקודת סיום בודדת:

flask_app/app.py

from flask import Flask, render_template

app = Flask(__name__)

messages = [{'title': 'Message One',
             'content': 'Message One Content'},
            {'title': 'Message Two',
             'content': 'Message Two Content'}
            ]

@app.route('/')
def index():
    return render_template('index.html', messages=messages)

שמור וסגור את הקובץ.

בקובץ זה, תחילה אתה מייבא את המחלקה Flask ואת הפונקציה render_template() מהחבילה flask. לאחר מכן אתה משתמש במחלקה Flask כדי ליצור מופע חדש של יישום בשם app, ומעביר את המשתנה המיוחד __name__, שנחוץ ל-Flask כדי להגדיר מספר נתיבים ברקע. הצגת תבניות מוסברת במדריך כיצד להשתמש בתבניות ביישום Flask.

לאחר מכן אתה יוצר רשימה גלובלית של Python בשם messages, שיש בה מילונים של Python. כל מילון כולל שני מפתחות: title עבור כותרת ההודעה, ו-content עבור תוכן ההודעה. זוהי דוגמה מופשטת של שיטת אחסון נתונים; בתרחיש אמיתי, היית משתמש במסד נתונים ששומר באופן קבוע את הנתונים ומאפשר לך לתפעל אותם ביעילות רבה יותר.

לאחר יצירת רשימת Python, אתה משתמש בדקורטור @app.route() כדי ליצור פונקציית פונקציית תצוגה בשם index(). בתוכה, אתה מחזיר קריאה לפונקציה render_template(), שמציינת לFlask שהנתיב צריך להציג תבנית HTML. אתה קורא לתבנית זו index.html (תיצור אותה מאוחר יותר) ומעביר לה משתנה בשם messages. משתנה זה מחזיק את הרשימה messages שהכרזת קודם כערך ומאפשר לתבנית ה-HTML לגשת אליו. פונקציות תצוגה מוסברות במדריך כיצד ליצור את היישום הראשון שלך באמצעות Flask ו-Python 3.

לאחר מכן, צור תיקייה templates בתוך תיקיית flask_app שבה Flask מחפש תבניות, ואז פתח קובץ תבנית בשם base.html, שיכיל קוד שתבניות אחרות ירשמו ממנו כדי להימנע מחזרה קוד:

mkdir templates
nano templates/base.html

הוסף את הקוד הבא בתוך קובץ base.html כדי ליצור את התבנית הבסיסית עם סרגל ניווט ובלוק תוכן:

flask_app/templates/base.html


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{% block title %} {% endblock %} - FlaskApp</title>
    <style>
        .message {
            padding: 10px;
            margin: 5px;
            background-color: #f3f3f3
        }
        nav a {
            color: #d64161;
            font-size: 3em;
            margin-left: 50px;
            text-decoration: none;
        }

    </style>
</head>
<body>
    <nav>
        <a href="{{ url_for('index') }}">FlaskApp</a>
        <a href="#">About</a>
    </nav>
    <hr>
    <div class="content">
        {% block content %} {% endblock %}
    </div>
</body>
</html>

שמור וסגור את הקובץ.

תבנית הבסיס הזו כוללת את כל קוד ה-HTML הבסיסי שתצטרך להשתמש בו שוב בתבניות האחרות שלך. הבלוק title יוחלף כדי להגדיר כותרת לכל דף, והבלוק content יוחלף עם תוכן כל דף. סרגל הניווט כולל שני קישורים, אחד לדף האינדקס שבו אתה משתמש בפונקציה העזר url_for() כדי לקשר לפונקציית התצוגה index(), והשני לדף אודות אם תבחר לכלול אחד ביישום שלך.

לאחר מכן, פתח תבנית בשם index.html. זוהי התבנית שהתייחסת אליה בקובץ app.py:

nano templates/index.html

הוסף את הקוד הבא אליה:

flask_app/templates/index.html

{% extends 'base.html' %}

{% block content %}
    <h1>{% block title %} Messages {% endblock %}</h1>
    {% for message in messages %}
        <div class='message'>
            <h3>{{ message['title'] }}</h3>
            <p>{{ message['content'] }}</p>
        </div>
    {% endfor %}
{% endblock %}

שמור וסגור את הקובץ.

בקוד זה, אתה מרחיב את התבנית base.html ומחליף את תוכן הבלוק content. אתה משתמש בכותרת <h1> שגם משמשת ככותרת.

אתה משתמש בלולאת Jinja for בשורה {% for message in messages %} כדי לעבור על כל הודעה ברשימה messages. אתה משתמש בתג <div> כדי להכיל את כותרת ההודעה ותוכנה. אתה מציג את הכותרת בכותרת <h3> ואת התוכן בתג <p>.

בעוד שאתה בספריית flask_app עם הסביבה הווירטואלית שלך מופעלת, הודע ל-Flask על היישום (app.py במקרה זה) באמצעות משתנה הסביבה FLASK_APP:

export FLASK_APP=app

ואז הגדר את משתנ הסביבה FLASK_ENV ל-development כדי להפעיל את היישום במצב פיתוח ולקבל גישה למפתח ה-debugger. למידע נוסף על מפתח ה-debugger של Flask, ראה כיצד לטפל בשגיאות ביישום Flask. השתמש בפקודות הבאות כדי לעשות זאת (ב-Windows, השתמש ב-set במקום export):

export FLASK_ENV=development

לאחר מכן, הפעל את היישום:

flask run

עם שרת הפיתוח פועל, בקר בכתובת ה-URL הבאה באמצעות הדפדפן שלך:

http://127.0.0.1:5000/

תראה את הודעות ברשימה messages מוצגות בדף הבית:

כעת, לאחר שהגדרת את יישום האינטרנט שלך והצגת את הודעות, תצטרך דרך לאפשר למשתמשים להוסיף הודעות חדשות לדף הבית. זה נעשה דרך טפסים אינטרנט, שתגדיר בשלב הבא.

שלב 2 — הגדרת טפסים

בשלב זה, תיצור דף ביישום שלך שמאפשר למשתמשים להוסיף הודעות חדשות לרשימת הודעות דרך טופס אינטרנט.

השאר את שרת הפיתוח פועל ופתח חלון מסוף חדש.

ראשית, פתח את קובץ app.py שלך:

nano app.py

הוסף את הנתיב הבא לסוף הקובץ:

flask_app/app.py

# ...

@app.route('/create/', methods=('GET', 'POST'))
def create():
    return render_template('create.html')

שמור וסגור את הקובץ.

הנתיב /create כולל את הפרמטר methods עם הטאפל ('GET', 'POST') כדי לקבל גם בקשות GET וגם POST. GET ו-POST הם שיטות HTTP. כברירת מחדל, מתקבלות רק בקשות GET, שמשמשות לאחזר נתונים, כמו בקשת דף הבית או דף אודות מהשרת. בקשות POST משמשות לשליחת נתונים לנתיב מסוים, מה שלעתים קרובות משנה את הנתונים בשרת.

בדוגמה זו, תבקש את דף create באמצעות בקשת GET. דף היצירה יכלול טופס אינטרנט עם שדות קלט וכפתור שליחה. כאשר משתמש ממלא את הטופס האינטרנטי ולוחץ על כפתור השליחה, נשלחת בקשת POST לנתיב /create. שם אתה מתמודד עם הבקשה, מוודא את הנתונים שנשלחו כדי לוודא שהמשתמש לא שלח טופס ריק, ומוסיף אותו לרשימת messages.

הפונקציה create() כרגע עושה רק דבר אחד: מעבדת תבנית בשם create.html כאשר היא מקבלת בקשת GET רגילה. עכשיו תיצור את התבנית הזו, ואז תערוך את הפונקציה כדי לטפל בבקשות POST בשלב הבא.

פתח קובץ תבנית חדש בשם create.html:

nano templates/create.html

הוסף את הקוד הבא לתוכו:

flask_app/templates/create.html

{% extends 'base.html' %}

{% block content %}
    <h1>{% block title %} Add a New Message {% endblock %}</h1>
    <form method="post">
        <label for="title">Title</label>
        <br>
        <input type="text" name="title"
               placeholder="Message title"
               value="{{ request.form['title'] }}"></input>
        <br>

        <label for="content">Message Content</label>
        <br>
        <textarea name="content"
                  placeholder="Message content"
                  rows="15"
                  cols="60"
                  >{{ request.form['content'] }}</textarea>
        <br>
        <button type="submit">Submit</button>
    </form>
{% endblock %}

שמור וסגור את הקובץ.

בקוד זה, אתה מרחיב את התבנית base.html ומחליף את הבלוק content עם כותרת <h1> שמשמשת ככותרת לדף. בתג <form>, אתה מגדיר את התכונה method ל-post כך שהנתונים של הטופס נשלחים לשרת כבקשת POST.

בטופס, יש לך שדה קלט טקסט בשם title; זהו השם שתשתמש בו ביישום כדי לגשת לנתונים של הטופס של הכותרת. אתה נותן לתג <input> ערך של {{ request.form['title'] }}. זה שימושי לשחזור הנתונים שהמשתמש מזין כך שהם לא יאבדו כשמשהו הולך לאיבוד. למשל, אם המשתמש שכח למלא את השדה הנדרש של content באזור הטקסט, בקשה נשלחת לשרת והודעת שגיאה תחזור כתגובה, אך הנתונים בכותרת לא יאבדו כי הם יישמרו באובייקט הגלובלי request, וניתן לגשת אליהם דרך request.form['title'].

לאחר שדה הקלט של הכותרת, אתה מוסיף אזור טקסט בשם content עם הערך {{ request.form['content'] }} מאותן סיבות שצוינו קודם.

לבסוף, יש לך כפתור הגשה בסוף הטופס.

עכשיו, עם שרת הפיתוח פועל, השתמש בדפדפן שלך כדי לנווט לנתיב /create:

http://127.0.0.1:5000/create

תראה דף "הוסף הודעה חדשה" עם שדה קלט לכותרת הודעה, אזור טקסט לתוכן ההודעה, וכפתור הגשה.

טופס זה שולח בקשה של POST לפונקציית התצוגה create() שלך. עם זאת, אין עדיין קוד לטיפול בבקשה של POST בפונקציה, כך שאין שום דבר לאחר מילוי הטופס ושליחתו. בשלב הבא, תטפל בבקשת POST הנכנסת כאשר טופס נשלח. תבדוק האם הנתונים שנשלחו תקפים (לא ריקים), ותוסיף את כותרת הודעת הודעה ותוכן לרשימת messages.

שלב 3 — טיפול בבקשות טופס

בשלב זה, תטפל בבקשות הטופס בצד היישום. תגיע לנתונים שהמשתמש שולח דרך הטופס שיצרת בשלב הקודם ותוסיף אותם לרשימת הודעות. תשתמש גם בהודעות מהירות כדי ליידע משתמשים כאשר הם שולחים נתונים לא תקפים. ההודעה המהירה תוצג רק פעם אחת ותיעלם בבקשה הבאה (אם אתה נavigate לדף אחר למשל).

פתח את קובץ app.py לעריכה:

nano app.py

ראשית, תייבא את הדברים הבאים ממסגרת Flask:

האובייקט הגלובלי request לגישה לנתונים הנכנסים שיוגשו דרך הטופס ה-HTML שבנית בשלב הקודם.
הפונקציה url_for() ליצירת כתובות URL.
הפונקציה flash() להצגת הודעה כאשר בקשה מתופענתת (כדי ליידע את המשתמש שהכל עבר בהצלחה, או ליידע אותם על בעיה אם הנתונים שהוגשו אינם תקפים).
הפונקציה redirect() להפניה של הלקוח למיקום אחר.

הוסף את הייבואים האלה לשורה הראשונה בקובץ:

flask_app/app.py

from flask import Flask, render_template, request, url_for, flash, redirect

# ...

הפונקציה flash() מאחסנת הודעות מוצפנות בסשן הדפדפן של הלקוח, מה שדורש הגדרת מפתח סודי. מפתח סודי זה משמש לאבטחת הסשנים, שמאפשרים ל-Flask לזכור מידע מבקשה אחת לאחרת, כגון מעבר מדף הודעה חדשה לדף הראשי. המשתמש יכול לגשת למידע המאוחסן בסשן, אך לא לשנות אותו אלא אם יש להם את המפתח הסודי, כך שאסור לך לאפשר לכל אחד לגשת למפתח הסודי שלך. עיין ב-תיעוד Flask עבור סשנים למידע נוסף.

המפתח הסודי צריך להיות מחרוזת אקראית ארוכה. אתה יכול ליצור מפתח סודי באמצעות המודול os עם השיטה os.urandom(), שמחזירה מחרוזת של בתים אקראיים המתאימים לשימוש קריפטוגרפי. כדי לקבל מחרוזת אקראית באמצעות זה, פתח מסוף חדש ופתח את מעטפת ה-Python האינטראקטיבית באמצעות הפקודה הבאה:

python

במעטפת ה-Python האינטראקטיבית, ייבא את המודול os מהספרייה הסטנדרטית וקרא לשיטה os.urandom() כדלקמן:

import os
os.urandom(24).hex()

תקבל מחרוזת דומה לבאה:

Output
'df0331cefc6c2b9a5d0208a726a5d1c0fd37324feba25506'

אתה יכול להשתמש במחרוזת שקיבלת כמפתח הסודי שלך.

כדי להגדיר את המפתח הסודי, הוסף תצורה של SECRET_KEY ליישום שלך דרך אובייקט app.config. הוסף אותו ישירות לאחר הגדרת ה-app לפני הגדרת המשתנה messages:

flask_app/app.py


# ...
app = Flask(__name__)
app.config['SECRET_KEY'] = 'your secret key'


messages = [{'title': 'Message One',
             'content': 'Message One Content'},
            {'title': 'Message Two',
             'content': 'Message Two Content'}
            ]
# ...

לאחר מכן, שנה את פונקציית התצוגה create() להיראות בדיוק כדלקמן:

flask_app/app.py

# ...

@app.route('/create/', methods=('GET', 'POST'))
def create():
    if request.method == 'POST':
        title = request.form['title']
        content = request.form['content']

        if not title:
            flash('Title is required!')
        elif not content:
            flash('Content is required!')
        else:
            messages.append({'title': title, 'content': content})
            return redirect(url_for('index'))

    return render_template('create.html')

בהצהרת if אתה מוודא שהקוד שמתבצע אחריה מתבצע רק כאשר הבקשה היא בקשת POST באמצעות ההשוואה request.method == 'POST'.

אז אתה מוצא את הכותרת והתוכן שהוגשו מהאובייקט request.form שמאפשר לך גישה לנתוני הטופס בבקשה. אם הכותרת לא סופקה, התנאי if not title יתמלא. במקרה זה, אתה מציג הודעה למשתמש הודעה למשתמש שהכותרת נדרשת באמצעות הפונקציה flash(). זה מוסיף את ההודעה לרשימה של הודעות מוצצות. באופן דומה, אם התוכן לא סופק, התנאי elif not content יתמלא. אם כן, אתה מוסיף את ההודעה 'Content is required!' לרשימת ההודעות המוצצות.

אם הכותרת והתוכן של ההודעה נשלחו כראוי, אתה משתמש בשורה messages.append({'title': title, 'content': content}) כדי להוסיף מילון חדש לרשימה messages, עם הכותרת והתוכן שהמשתמש סיפק. לאחר מכן אתה משתמש בפונקציה redirect() כדי להפנות את המשתמשים חזרה לדף הבית. אתה משתמש בפונקציה url_for() כדי לקשר לדף הבית.

שמור וסגור את הקובץ.

עכשיו, נווט לנתיב /create באמצעות הדפדפן שלך:

http://127.0.0.1:5000/create

מלא את הטופס עם כותרת לבחירתך ותוכן כלשהו. לאחר שתשלח את הטופס, תראה את ההודעה החדשה שמופיעה בדף הבית.

לבסוף, אתה תציג הודעות מוצצות ותוסיף קישור לדף "הודעה חדשה" לסרגל הניווט בתבנית base.html כדי לקבל גישה קלה לדף זה. פתח את קובץ התבנית הבסיסי:

nano templates/base.html

ערוך את הקובץ על ידי הוספת תג <a> חדש אחרי הקישור FlaskApp בסרגל הניווט בתוך תג ה-<nav>. לאחר מכן, הוסף לולאת for חדשה ישירות מעל בלוק ה-content כדי להציג את הודעות ה-flashed מתחת לסרגל הניווט. הודעות אלו זמינות בפונקציה המיוחדת get_flashed_messages() שFlask מספק. לאחר מכן, הוסף מאפיין מחלקה הנקרא alert לכל הודעה ותן לו תכונות CSS בתוך תג ה-<style>:

flask_app/templates/base.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{% block title %} {% endblock %} - FlaskApp</title>
    <style>
        .message {
            padding: 10px;
            margin: 5px;
            background-color: #f3f3f3
        }
        nav a {
            color: #d64161;
            font-size: 3em;
            margin-left: 50px;
            text-decoration: none;
        }

        .alert {
            padding: 20px;
            margin: 5px;
            color: #970020;
            background-color: #ffd5de;
        }

    </style>
</head>
<body>
    <nav>
        <a href="{{ url_for('index') }}">FlaskApp</a>
        <a href="{{ url_for('create') }}">Create</a>
        <a href="#">About</a>
    </nav>
    <hr>
    <div class="content">
        {% for message in get_flashed_messages() %}
            <div class="alert">{{ message }}</div>
        {% endfor %}
        {% block content %} {% endblock %}
    </div>
</body>
</html>

שמור וסגור את הקובץ, ולאחר מכן טען מחדש https://127.0.0.1:5000 בדפדפן שלך. סרגל הניווט יכיל כעת פריט "צור" שמקשר לנתיב /create.

כדי לראות כיצד עובדות הודעות flash, עבור לדף "צור", ולחץ על כפתור השליחה מבלי למלא את שני השדות. תקבל הודעה שנראית כך:

חזור לדף הבית ותראה שהודעות ה-flashed מתחת לסרגל הניווט נעלמות, למרות שהן מוצגות כחלק מהתבנית הבסיסית. אם הן לא היו הודעות flash, הן היו מוצגות גם בדף הבית, מכיוון שהוא גם יורש מהתבנית הבסיסית.

נסה להגיש את הטופס עם כותרת אך ללא תוכן. תראה את הודעת "תוכן נדרש!" תחץ על הקישור FlaskApp בסרגל הניווט כדי לחזור לדף הבית, ולאחר מכן לחץ על כפתור החזרה כדי לחזור לדף היצירה. תראה שהודעת התוכן עדיין קיימת. זה עובד רק אם תלחץ על כפתור החזרה, כי זה שומר על הבקשה הקודמת. לחיצה על הקישור יצירה בסרגל הניווט תשלח בקשה חדשה, שמנקה את הטופס, וכתוצאה מכך, הודעת הפלאש תיעלם.

כעת אתה יודע כיצד לקבל קלט מהמשתמש, לאמת אותו, ולהוסיף אותו למקור נתונים.

הערה:הודעות שאתה מוסיף לרשימה messages תיעלמנה בכל פעם שהשרת נעצר, כי רשימות פייתון נשמרות רק בזיכרון, כדי לשמור את הודעותיך לצמיתות, תצטרך להשתמש במסד נתונים כמו SQLite. עיין בכיצד להשתמש במודול sqlite3 בפייתון 3 כדי ללמוד כיצד להשתמש בSQLite עם פייתון.

סיכום

יצרת יישום Flask שבו משתמשים יכולים להוסיף הודעות לרשימת הודעות המוצגת בדף הבית. יצרת טופס אינטרנט, טיפלת בנתונים שהמשתמש שולח דרך הטופס, והוספת אותם לרשימת ההודעות שלך. כמו כן השתמשת בהודעות מצורפות כדי ליידע את המשתמש כאשר הם שולחים נתונים לא תקינים.

אם תרצה לקרוא עוד על Flask, תוכל לבדוק את שאר המדריכים בסדרת Flask.

Source:
https://www.digitalocean.com/community/tutorials/how-to-use-web-forms-in-a-flask-application