Ny historie

Opbygning af en webserver med Python og Flask

ved Ajay Krishnan Prabhakaran9m2025/01/02

FA-AF

For langt; At læse

Denne artikel guider dig gennem opbygningen af en simpel webserver ved hjælp af Python og Flask-rammen. Du lærer nøglebegreber som routing, skabeloner og håndtering af HTTP-anmodninger, alt imens du opretter en funktionel webapplikation

featured image - Opbygning af en webserver med Python og Flask

Den digitale tidsalder kræver dynamiske og interaktive weboplevelser. Opbygning af en webserver er hjørnestenen i dette digitale landskab, der gør det muligt for dig at skabe applikationer, der rækker ud over statiske HTML-sider. Python giver med sin elegante syntaks og omfattende biblioteker et kraftfuldt grundlag for webudvikling. Flask, en let og alsidig mikroramme, forenkler processen yderligere. Ved at kombinere Pythons fleksibilitet med Flasks strømlinede tilgang kan udviklere hurtigt og effektivt konstruere robuste webservere. Denne rejse dykker ned i kernekoncepterne for webudvikling, fra håndtering af HTTP-anmodninger og -svar til routing og skabeloner, hvilket giver dig mulighed for at bygge engagerende og funktionelle webapplikationer, der kan forbinde og informere verden.

"Nettet er ved at blive byens torv for morgendagens globale landsby." - Bill Gates

Forudsætninger

Python 3.x
Kolbe

Installer kolben ved hjælp af pip:

 pip install flask

Koden

Nedenfor er den komplette kode til et simpelt restaurantreservationssystem :

 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)

Import af Flask-moduler : Vi starter med at importere de nødvendige moduler fra Flask. Flask er hovedklassen for vores applikation, render_template bruges til at gengive HTML-skabeloner, og anmodning bruges til at håndtere indgående formulardata.
Oprettelse af Flask-appen : Vi opretter en forekomst af Flask-klassen, som vil være vores WSGI (Web Server Gateway Interface)-applikation.
Definition af ruter :
- Indeksrute ('/') : Denne rute gengiver skabelonen index.html , som skal indeholde formularen, hvor brugerne kan indtaste deres reservationsdetaljer.
- Send rute ('/submit') : Denne rute håndterer formularindsendelsen. Den udtrækker dataene fra formularen ved hjælp af request.form og konstruerer en bekræftelsesmeddelelse. Meddelelsen sendes derefter til skabelonen result.html til gengivelse.
Kørsel af appen:

 python app.py

Debug Mode : Hvis din app.py inkluderer app.run(debug=True) , starter serveren i fejlretningstilstand, hvilket er nyttigt til udvikling. Det giver detaljerede fejlmeddelelser og genindlæser automatisk serveren, når du foretager ændringer i din kode.

Port og vært : Som standard kører Flask på http://127.0.0.1:5000/ . Hvis du har brug for at ændre værten eller porten, kan du ændre app.run() -kaldet i din app.py :

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

Indeks.html

index.html -filen fungerer som brugergrænseflade for reservationssystemet, og indeholder en formular, hvor brugerne kan indtaste deres detaljer såsom navn, telefonnummer, e-mail, dato og tidspunkt for bordbestilling. Den er stylet med CSS for at give en visuelt tiltalende og brugervenlig oplevelse. Ved indsendelse sendes formulardataene til serveren til behandling.

 <!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 -filen viser en bekræftelsesmeddelelse til brugeren, efter at formularen er sendt. Det viser dynamisk reservationsdetaljerne, bekræfter reservationen og sikrer, at en påmindelse er blevet sendt til de angivne kontaktoplysninger

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

Afsluttende tanker

Vi har dykket ned i kerneprincipperne for webudvikling, fra håndtering af HTTP-anmodninger til gengivelse af dynamisk indhold, der lægger et solidt fundament for fremtidige bestræbelser. Nettet er et landskab i konstant udvikling, fyldt med muligheder for innovation og kreativitet. Tag imod denne udfordring, fortsæt med at udforske de enorme muligheder for webudvikling og bidrag til internettets stadigt voksende billedtæppe