Νέα ιστορία

Δημιουργία διακομιστή Web με Python και Flask

με Ajay Krishnan Prabhakaran9m2025/01/02

FA-AF

Πολύ μακρύ; Να διαβασω

Αυτό το άρθρο σας καθοδηγεί στη δημιουργία ενός απλού διακομιστή ιστού χρησιμοποιώντας Python και το πλαίσιο Flask. Θα μάθετε βασικές έννοιες όπως η δρομολόγηση, η διαμόρφωση προτύπων και ο χειρισμός αιτημάτων HTTP, όλα αυτά κατά τη δημιουργία μιας λειτουργικής εφαρμογής Ιστού

featured image - Δημιουργία διακομιστή Web με Python και Flask

Η ψηφιακή εποχή απαιτεί δυναμικές και διαδραστικές εμπειρίες στο διαδίκτυο. Η δημιουργία ενός διακομιστή ιστού είναι ο ακρογωνιαίος λίθος αυτού του ψηφιακού τοπίου, δίνοντάς σας τη δυνατότητα να δημιουργήσετε εφαρμογές που υπερβαίνουν τις στατικές σελίδες HTML. Η Python, με την κομψή σύνταξη και τις εκτεταμένες βιβλιοθήκες της, παρέχει μια ισχυρή βάση για την ανάπτυξη Ιστού. Το Flask, ένα ελαφρύ και ευέλικτο μικροπλαίσιο, απλοποιεί περαιτέρω τη διαδικασία. Συνδυάζοντας την ευελιξία της Python με την απλοποιημένη προσέγγιση του Flask, οι προγραμματιστές μπορούν να κατασκευάσουν γρήγορα και αποτελεσματικά ισχυρούς διακομιστές Ιστού. Αυτό το ταξίδι εμβαθύνει στις βασικές έννοιες της ανάπτυξης ιστού, από το χειρισμό αιτημάτων και απαντήσεων HTTP έως τη δρομολόγηση και τη διαμόρφωση προτύπων, δίνοντάς σας τη δυνατότητα να δημιουργήσετε ελκυστικές και λειτουργικές εφαρμογές Ιστού που μπορούν να συνδεθούν και να ενημερώσουν τον κόσμο.

"Ο Ιστός γίνεται η πλατεία της πόλης για το παγκόσμιο χωριό του αύριο." - Μπιλ Γκέιτς

Προαπαιτούμενα

Python 3.x
Φλάσκα

Εγκαταστήστε το Flask χρησιμοποιώντας pip:

 pip install flask

Ο Κώδικας

Παρακάτω είναι ο πλήρης κωδικός για ένα απλό σύστημα κρατήσεων σε Εστιατόριο :

 from flask import Flask, render_template, request app = Flask(__name__) @app.route('/') def index(): return render_template('index.html') @app.route('/submit', methods=['POST']) def submit(): # Extract form data name = request.form['name'] phone = request.form['phone'] email = request.form['email'] date = request.form['date'] time = request.form['time'] # Create a message for the result page message = ( f"Hello, {name.split()[0]}! Your reservation has been booked for {date} at {time}. " f"A reminder has been sent to {phone} and {email}" ) return render_template('result.html', message=message) if __name__ == '__main__': app.run(debug=True)

Εισαγωγή μονάδων Flask : Ξεκινάμε εισάγοντας τις απαραίτητες μονάδες από το Flask. Το Flask είναι η κύρια κατηγορία για την εφαρμογή μας, το render_template χρησιμοποιείται για την απόδοση προτύπων HTML και το request χρησιμοποιείται για το χειρισμό εισερχόμενων δεδομένων φόρμας.
Δημιουργία της εφαρμογής Flask : Δημιουργούμε μια παρουσία της κλάσης Flask, η οποία θα είναι η εφαρμογή WSGI (Διασύνδεση πύλης διακομιστή Web).
Καθορισμός Διαδρομών :
- Διαδρομή ευρετηρίου ('/') : Αυτή η διαδρομή αποδίδει το πρότυπο index.html , το οποίο θα πρέπει να περιέχει τη φόρμα για να εισάγουν οι χρήστες τα στοιχεία της κράτησής τους.
- Υποβολή διαδρομής ('/submit') : Αυτή η διαδρομή χειρίζεται την υποβολή της φόρμας. Εξάγει τα δεδομένα από τη φόρμα χρησιμοποιώντας request.form και δημιουργεί ένα μήνυμα επιβεβαίωσης. Στη συνέχεια, το μήνυμα μεταβιβάζεται στο πρότυπο result.html για απόδοση.
Εκτέλεση της εφαρμογής:

 python app.py

Λειτουργία εντοπισμού σφαλμάτων : Εάν το app.py σας περιλαμβάνει app.run(debug=True) , ο διακομιστής θα ξεκινήσει σε λειτουργία εντοπισμού σφαλμάτων, η οποία είναι χρήσιμη για ανάπτυξη. Παρέχει λεπτομερή μηνύματα σφάλματος και επαναφορτώνει αυτόματα τον διακομιστή όταν κάνετε αλλαγές στον κώδικά σας.

Θύρα και κεντρικός υπολογιστής : Από προεπιλογή, το Flask εκτελείται στη http://127.0.0.1:5000/ . Εάν πρέπει να αλλάξετε τον κεντρικό υπολογιστή ή τη θύρα, μπορείτε να τροποποιήσετε την κλήση app.run() στο app.py σας:

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

Index.html

Το αρχείο index.html χρησιμεύει ως διεπαφή χρήστη για το σύστημα κρατήσεων, με μια φόρμα όπου οι χρήστες μπορούν να εισάγουν τα στοιχεία τους, όπως όνομα, αριθμό τηλεφώνου, email, ημερομηνία και ώρα για την κράτηση ενός τραπεζιού. Είναι σχεδιασμένο με CSS για να παρέχει μια οπτικά ελκυστική και φιλική προς το χρήστη εμπειρία. Μετά την υποβολή, τα δεδομένα της φόρμας αποστέλλονται στον διακομιστή για επεξεργασία.

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Restaurant Table Booking</title> <style> body { font-family: Arial, sans-serif; background-image: url('https://img.freepik.com/premium-vector/delicious-food-menu-landing-page-template-homepage-design_631465-116.jpg?w=2000'); background-size: cover; background-position: center; margin: 0; padding: 0; display: flex; justify-content: center; align-items: center; height: 100vh; } .form-container { background-color: rgba(255, 255, 255, 0.8); padding: 40px; border-radius: 8px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); max-width: 300px; width: 100%; } h1 { text-align: center; color: #333; } label { display: block; margin-bottom: 8px; color: #555; } input[type="text"], input[type="email"], input[type="tel"], input[type="date"], input[type="time"] { width: 100%; padding: 10px; margin-bottom: 15px; border: 1px solid #ccc; border-radius: 4px; } input[type="submit"] { width: 100%; padding: 10px; background-color: #4CAF50; color: white; border: none; border-radius: 4px; cursor: pointer; font-size: 16px; } input[type="submit"]:hover { background-color: #45a049; } </style> </head> <body> <div class="form-container"> <h1>Book a Table</h1> <form action="/submit" method="POST"> <label for="name">Name:</label> <input type="text" id="name" name="name" required> <label for="phone">Phone Number:</label> <input type="tel" id="phone" name="phone" required> <label for="email">Email:</label> <input type="email" id="email" name="email" required> <label for="date">Date:</label> <input type="date" id="date" name="date" required> <label for="time">Time:</label> <input type="time" id="time" name="time" required> <input type="submit" value="Submit"> </form> </div> </body> </html>

Result.html

Το αρχείο result.html εμφανίζει ένα μήνυμα επιβεβαίωσης στον χρήστη μετά την υποβολή της φόρμας. Εμφανίζει δυναμικά τις λεπτομέρειες της κράτησης, επιβεβαιώνοντας την κράτηση και διασφαλίζει ότι έχει σταλεί μια υπενθύμιση στα στοιχεία επικοινωνίας που παρέχονται

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Reservation Confirmation</title> <link href="https://fonts.googleapis.com/css2?family=Lobster&display=swap" rel="stylesheet"> <style> body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background-image: url('https://img.freepik.com/free-vector/minimal-doodle-frame-background-social-story-highlight_53876-97970.jpg?t=st=1735447681~exp=1735451281~hmac=d8f33db86d2b336838279674afb91df8c2089c7e8be13d316dc26982e0b30ac2&w=2000'); background-size: cover; background-position: center; margin: 0; padding: 0; display: flex; justify-content: center; align-items: center; height: 100vh; color: #fff; } .form-container { background-color: rgba(0, 0, 0, 0.7); padding: 40px; border-radius: 10px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); max-width: 400px; width: 100%; text-align: center; } h1 { font-family: 'Lobster', cursive; font-size: 32px; margin-bottom: 20px; } p { font-size: 18px; line-height: 1.5; } </style> </head> <body> <div class="form-container"> <h1>Reservation Confirmed!</h1> <p>{{ message }}</p> </div> </body> </html>

Κλείσιμο Σκέψεις

Έχουμε εμβαθύνει στις βασικές αρχές της ανάπτυξης ιστού, από το χειρισμό αιτημάτων HTTP έως την απόδοση δυναμικού περιεχομένου, θέτοντας γερές βάσεις για μελλοντικές προσπάθειες. Ο Ιστός είναι ένα συνεχώς εξελισσόμενο τοπίο, γεμάτο ευκαιρίες για καινοτομία και δημιουργικότητα. Αγκαλιάστε αυτήν την πρόκληση, συνεχίστε να εξερευνάτε τις τεράστιες δυνατότητες ανάπτυξης ιστού και συνεισφέρετε στη διαρκώς αναπτυσσόμενη ταπετσαρία του Διαδικτύου