Noua istorie

Construirea unui server web cu Python și Flask

de Ajay Krishnan Prabhakaran9m2025/01/02

FA-AF

Prea lung; A citi

Acest articol vă ghidează prin construirea unui server web simplu folosind Python și cadrul Flask. Veți învăța concepte cheie precum rutarea, șablonarea și gestionarea solicitărilor HTTP, toate în timp ce creați o aplicație web funcțională

featured image - Construirea unui server web cu Python și Flask

Era digitală necesită experiențe web dinamice și interactive. Construirea unui server web este piatra de temelie a acestui peisaj digital, permițându-vă să creați aplicații care depășesc paginile HTML statice. Python, cu sintaxa sa elegantă și bibliotecile extinse, oferă o bază puternică pentru dezvoltarea web. Flask, un microcadru ușor și versatil, simplifică și mai mult procesul. Combinând flexibilitatea Python cu abordarea simplificată a Flask, dezvoltatorii pot construi rapid și eficient servere web robuste. Această călătorie aprofundează în conceptele de bază ale dezvoltării web, de la gestionarea solicitărilor și răspunsurilor HTTP la rutare și șabloane, dându-vă puterea să construiți aplicații web captivante și funcționale care se pot conecta și informa lumea.

„Web-ul devine piața orașului pentru satul global de mâine”. - Bill Gates

Cerințe preliminare

Python 3.x
Balon

Instalați Flask folosind pip:

 pip install flask

Codul

Mai jos este codul complet pentru un sistem simplu de rezervare la Restaurant :

 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)

Importul modulelor Flask : Începem prin a importa modulele necesare din Flask. Flask este clasa principală pentru aplicația noastră, render_template este folosit pentru a reda șabloane HTML, iar cererea este folosită pentru a gestiona datele din formulare primite.
Crearea aplicației Flask : Creăm o instanță a clasei Flask, care va fi aplicația noastră WSGI (Web Server Gateway Interface).
Definirea rutelor :
- Index Route ('/') : Această rută redă șablonul index.html , care ar trebui să conțină formularul pentru ca utilizatorii să introducă detaliile rezervării.
- Submit Route ('/submit') : Această rută se ocupă de trimiterea formularului. Extrage datele din formular folosind request.form și construiește un mesaj de confirmare. Mesajul este apoi transmis șablonului result.html pentru randare.
Rularea aplicației:

 python app.py

Modul de depanare : dacă app.py include app.run(debug=True) , serverul va porni în modul de depanare, care este util pentru dezvoltare. Oferă mesaje de eroare detaliate și reîncarcă automat serverul atunci când modificați codul.

Port și gazdă : implicit, Flask rulează pe http://127.0.0.1:5000/ . Dacă trebuie să schimbați gazda sau portul, puteți modifica apelul app.run() în app.py :

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

Index.html

Fișierul index.html servește ca interfață cu utilizatorul pentru sistemul de rezervare, oferind un formular în care utilizatorii își pot introduce detalii precum numele, numărul de telefon, e-mailul, data și ora pentru rezervarea unei mese. Este stilat cu CSS pentru a oferi o experiență atrăgătoare din punct de vedere vizual și ușor de utilizat. La trimitere, datele formularului sunt trimise către server pentru procesare.

 <!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>

Rezultat.html

Fișierul result.html afișează un mesaj de confirmare pentru utilizator după ce formularul este trimis. Afișează în mod dinamic detaliile rezervării, confirmând rezervarea și asigură că a fost trimis un memento la informațiile de contact furnizate

 <!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>

Gânduri de închidere

Am aprofundat în principiile de bază ale dezvoltării web, de la gestionarea solicitărilor HTTP la redarea conținutului dinamic, punând o bază solidă pentru eforturile viitoare. Web-ul este un peisaj în continuă evoluție, plin de oportunități pentru inovație și creativitate. Acceptați această provocare, continuați să explorați posibilitățile vaste de dezvoltare web și să contribuiți la tapițeria în continuă creștere a internetului