Erstellen Sie eine Website mit Python
Flask ist ein Webentwicklungsrahmen. Bei Python gibt es zwei Module, die man für die Webentwicklung verwenden kann: Django und Flask. Flask ist jedoch leichter und leichter zu lernen. In diesem Tutorial erstellen wir eine sehr einfache Website mit Pythons Flask -Modul.
app = Flask (__ Name__)
@app.Route('/')
Def Index ():
Rückkehr "Hallo Welt"
Wenn "__name__" == "__main__":
App.run (debug = true)
$ env: Flask_app = "Main.py "
Flasklauf
Kalyanis Lebenslauf
app = Flask (__ Name__)
@app.Route('/')
Def Index ():
return render_template ("index.html ")
Wenn "__name__" == "__main__":
App.run (debug = true)
Rand: 0;
Farbe: #333
Schriftfamilie: Verdana;
Schriftgröße: 20px;
Hintergrundfarbe: RGB (201, 76, 76);
.gestylt
Hintergrundfarbe: #92A8D1;
Schriftfamilie: Verdana;
Schriftgröße: 20px;
Kalyanis Lebenslauf<br><link rel="stylesheet" type="text/css" href=" url_for('static', filename='main.css')"><br><br><br><h1><br>Kalyanis Lebenslauf<br>Diese Seite enthält meinen Lebenslauf<br></h1><br></body><br></html> <p>Die Hauptpython -Datei - Haupt.py - bleibt gleich.</p> aus Flask -Importflächen render_template<br>app = Flask (__ Name__)<br>@app.Route('/')<br>Def Index ():<br>return render_template ("index.html ")<br>Wenn "__name__" == "__main__":<br>App.run (debug = true) <p>Schritt 4: Hinzufügen eines Bildes</p> <p>Fügen wir nun der von uns erstellten HTML -Seite ein Bild hinzu! Dafür verwenden wir den "statischen" Ordner, den wir erstellt haben. Innerhalb des Ordners „Statisch“ habe ich einen weiteren Ordner mit dem Namen "Bilder" erstellt. Innerhalb des Bilderordners habe ich ein Bild platziert. Fügen wir nun das Bild wie folgt zum HTML -Code hinzu: . In diesem Fall habe ich die Höhe des Bildes auf 200 festgelegt, aber Sie können es auf das ändern, was Sie wollen, und CSS hinzufügen, wenn Sie möchten. </p> <p>Der HTML -Code würde wie folgt aussehen:</p> <br><html lang="en"><br><head><br><meta charset="UTF-8"><br><title>Kalyanis Lebenslauf
Diese Seite enthält meinen Lebenslauf
[/cce_python]
In diesem Fall würde der HTML -Code so aussehen:
[CC Lang = "html" width = "100%" height = "100%" entsieped = "true" thema = "Blackboard" Nowrap = "0"]
Kalyanis Lebenslauf<br><link rel="stylesheet" type="text/css" href=" url_for('static', filename='main.css')"><br><br><br><br><h1><br>Kalyanis Lebenslauf<br></h1><br>Diese Seite enthält meinen Lebenslauf<br></body><br></html> <p>Schritt 5: Hinzufügen von JavaScript</p> <p>Es gibt zwei Möglichkeiten, wie Sie JavaScript hinzufügen können. In dieser ersten Demo werde ich einen Knopf erstellen. Wenn die Taste gedrückt wird, aktiviert sie eine Funktion namens MyFunction (), die JavaScript (im Tag gefunden) sein wird (im Tag). Setzen Sie dafür die Taste ein. Richten Sie dann ein Skript -Tag im Kopf des HTML -Code ein und definieren Sie eine Funktion. In meinem Fall habe ich eine Funktion definiert, die beim Schaltflächenklick den „ganzen Lebenslauf“ zu einem P -Element hinzufügt. </p> <p>Sie können es dem Index hinzufügen.HTML -Datei wie folgt:</p> <br><html lang="en"><br><head><br><meta charset="UTF-8"><br><title>Kalyanis Lebenslauf<br><link rel="stylesheet" type="text/css" href=" url_for('static', filename='main.css')"><br>Funktion myfunction () <br>dokumentieren.GetElementById ("Para").Innerhtml = "Ganzer Lebenslauf";<br><br><br><br><br><br><h1><br>Kalyanis Lebenslauf<br></h1><br>Diese Seite enthält meinen Lebenslauf<br><br><br><br><br><br><button type="button" onclick="myFunction()"> Klicken Sie hier, um den Lebenslauf anzuzeigen </button><br></body><br></html> <p>In den meisten Fällen sind JavaScript -Dateien jedoch tendenziell Dokumente selbst und keine Liner. In solchen Fällen hätten wir eine .JS -Datei, die wir verlinken müssen. In meinem Fall würde ich schreiben: . Ähnlich wie bei der Bilddatei verknüpfen wir die JS -Datei wie folgt:</p> <br><html lang="en"><br><head><br><meta charset="UTF-8"><br><title>Kalyanis Lebenslauf<br><link rel="stylesheet" type="text/css" href=" url_for('static', filename='main.css')"><br><br><br><br><br><br><h1><br>Kalyanis Lebenslauf<br></h1><br>Diese Seite enthält meinen Lebenslauf<br><br><br><br><br><br><button type="button" onclick="myFunction()"> Klicken Sie hier, um den Lebenslauf anzuzeigen </button><br></body><br></html> <p>Alternativ können Sie dies auch verwenden: . Letzteres würde diesen HTML -Code generieren:</p> <br><html lang="en"><br><head><br><meta charset="UTF-8"><br><title>Kalyanis Lebenslauf<br><link rel="stylesheet" type="text/css" href=" url_for('static', filename='main.css')"><br>><script src=" url_for('static', filename='javascript/javascript.js')"<br><br><br><br><br><h1><br>Kalyanis Lebenslauf<br></h1><br>Diese Seite enthält meinen Lebenslauf<br><br><br><br><br><br><button type="button" onclick="myFunction()"> Klicken Sie hier, um den Lebenslauf anzuzeigen </button><br></body><br></html> <p>Abschluss </p> <p>Flask ist ein Micro-Framework, das benutzerfreundlich und gut für Anfänger ist. Insbesondere ist die Dokumentation selbst großartig und findet sich in https: // Flask.palletsProjects.com/en/2.0.X/QuickStart/#statische Akten. In diesem Tutorial haben wir gelernt, wie man eine einfache Website erstellt, CSS hinzufügt, Bilder hinzufügt und JavaScript mit dem Python -Flask -Modul der Website hinzugefügt wird. Wir hoffen, dass Sie diesen Artikel hilfreich gefunden haben, und finden Sie in Linux Hint, um mehr informative Artikel zu erhalten. </p>
</div>
<div class="rek-block rek-block-article">
</div>
<ul class="prev-next">
<li class="prev-next__item prev-next__item--left"><a href="http://www.cyberaxe.org/article/array-every-method-in-javascript">« Array jede Methode in JavaScript</a></li>
<li class="prev-next__item prev-next__item--right"><a href="http://www.cyberaxe.org/article/when-to-use-ethernet-loopback-plug">Wann verwenden Sie den Ethernet -Loopback -Stecker? »</a></li>
</ul>
<style>
.prev-next {
display: flex;
align-items: center;
justify-content: space-between;
margin: 0;
padding: 20px 0;
list-style: none;
gap: 30px;
}
.prev-next li {
max-width: 50%;
}
.prev-next__item {
display: inline-block;
font-weight: bold;
}
.prev-next__item--left {
text-align: left;
}
.prev-next__item--right {
text-align: right;
}
@media(max-width: 768px) {
.prev-next li {
max-width: 85%;
}
.prev-next__item--left {
align-self: flex-start;
}
.prev-next__item--right {
align-self: flex-end;
}
.prev-next {
display: flex;
flex-direction: column;
}
}
</style> </div>
<div class="col-xl-4">
<div class="sidebar-news">
<div class="rek-block rek-block-sidebar">
</div>
<div class="white-news white-news--article">
<div class="white-news__cat">
<a href="http://www.cyberaxe.org/category/php">Php</a>
</div>
<div class="white-news__name">
<a href="http://www.cyberaxe.org/article/how-to-use-while-loop-in-php">Wie man während der Schleife in PHP verwendet?</a>
</div>
<div class="white-news__text">
Die while -Schleife ist ein entscheidendes Konzept, das verwendet wird, um einen Codeblock wiederhol...
</div>
<div class="white-news__author">
<a href="http://www.cyberaxe.org/author/stephan-harms">Stephan Harms</a>
</div>
</div>
<div class="white-news white-news--article">
<div class="white-news__cat">
<a href="http://www.cyberaxe.org/category/php">Php</a>
</div>
<div class="white-news__name">
<a href="http://www.cyberaxe.org/article/how-to-use-scandir-function-in-php">So verwenden Sie die Scandir -Funktion in PHP</a>
</div>
<div class="white-news__text">
Die Funktion scandir () in PHP scannt ein Verzeichnis für Dateien und Verzeichnisse. Es gibt ein Arr...
</div>
<div class="white-news__author">
<a href="http://www.cyberaxe.org/author/fr-chris-frisch">Fr. Chris Frisch</a>
</div>
</div>
<div class="white-news white-news--article">
<div class="white-news__cat">
<a href="http://www.cyberaxe.org/category/c">C ++</a>
</div>
<div class="white-news__name">
<a href="http://www.cyberaxe.org/article/what-is--in-c">Was ist += in C++?</a>
</div>
<div class="white-news__text">
In C ++ ist das+= eine Kombination von zwei Operatoren, einer ist der Additionsoperator und der zwei...
</div>
<div class="white-news__author">
<a href="http://www.cyberaxe.org/author/christopher-lammert">Christopher Lammert</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="my-slider">
<div>
<div>
<div class="header-news">
<div class="header-news__cat">
<a href="http://www.cyberaxe.org/category/python">Python</a>
</div>
<div class="header-news__name">
<a href="http://www.cyberaxe.org/article/pandas-to-latex">Pandas nach Latex</a>
</div>
<div class="header-news__author">
<a href="http://www.cyberaxe.org/author/fr-chris-frisch">Fr. Chris Frisch</a>
</div>
</div>
</div>
</div>
<div>
<div>
<div class="header-news">
<div class="header-news__cat">
<a href="http://www.cyberaxe.org/category/python">Python</a>
</div>
<div class="header-news__name">
<a href="http://www.cyberaxe.org/article/python-list-to-comma-separated-string">Python -Liste zu comma getrennter Zeichenfolge</a>
</div>
<div class="header-news__author">
<a href="http://www.cyberaxe.org/author/gian-eisenlauer">Gian Eisenlauer</a>
</div>
</div>
</div>
</div>
<div>
<div>
<div class="header-news">
<div class="header-news__cat">
<a href="http://www.cyberaxe.org/category/python">Python</a>
</div>
<div class="header-news__name">
<a href="http://www.cyberaxe.org/article/seaborn-axis-labels">Etiketten der Seeborn -Achse</a>
</div>
<div class="header-news__author">
<a href="http://www.cyberaxe.org/author/mohamed-flore">Mohamed Flore</a>
</div>
</div>
</div>
</div>
<div>
<div>
<div class="header-news">
<div class="header-news__cat">
<a href="http://www.cyberaxe.org/category/docker">Docker</a>
</div>
<div class="header-news__name">
<a href="http://www.cyberaxe.org/article/what-are-the-steps-to-deploy-a-nginx-image-using-docker">Was sind die Schritte zum Bereitstellen eines Nginx -Bildes mit Docker?</a>
</div>
<div class="header-news__author">
<a href="http://www.cyberaxe.org/author/christopher-lammert">Christopher Lammert</a>
</div>
</div>
</div>
</div>
<div>
<div>
<div class="header-news">
<div class="header-news__cat">
<a href="http://www.cyberaxe.org/category/oracle-database">Oracle -Datenbank</a>
</div>
<div class="header-news__name">
<a href="http://www.cyberaxe.org/article/is-oracle-database-similar-to-mysql-database--explained">Ist die Oracle -Datenbank ähnlich wie bei der MySQL -Datenbank? | Erklärt</a>
</div>
<div class="header-news__author">
<a href="http://www.cyberaxe.org/author/ansgar-radtke">Ansgar Radtke</a>
</div>
</div>
</div>
</div>
<div>
<div>
<div class="header-news">
<div class="header-news__cat">
<a href="http://www.cyberaxe.org/category/powershell">Power Shell</a>
</div>
<div class="header-news__name">
<a href="http://www.cyberaxe.org/article/how-to-use-the-get-service-command-in-powershell">So verwenden Sie den Befehl „Get-Service“ in PowerShell</a>
</div>
<div class="header-news__author">
<a href="http://www.cyberaxe.org/author/fr-chris-frisch">Fr. Chris Frisch</a>
</div>
</div>
</div>
</div>
<div>
<div>
<div class="header-news">
<div class="header-news__cat">
<a href="http://www.cyberaxe.org/category/powershell">Power Shell</a>
</div>
<div class="header-news__name">
<a href="http://www.cyberaxe.org/article/how-to-use-the-move-item-cmdlet-in-powershell">So verwenden Sie das CMDLet für Bewegung in PowerShell?</a>
</div>
<div class="header-news__author">
<a href="http://www.cyberaxe.org/author/jessica-schimmer">Jessica Schimmer</a>
</div>
</div>
</div>
</div>
<div>
<div>
<div class="header-news">
<div class="header-news__cat">
<a href="http://www.cyberaxe.org/category/python">Python</a>
</div>
<div class="header-news__name">
<a href="http://www.cyberaxe.org/article/what-is-b-string-in-python">Was ist B String in Python?</a>
</div>
<div class="header-news__author">
<a href="http://www.cyberaxe.org/author/jean-dengler">Jean Dengler</a>
</div>
</div>
</div>
</div>
<div>
<div>
<div class="header-news">
<div class="header-news__cat">
<a href="http://www.cyberaxe.org/category/c">C ++</a>
</div>
<div class="header-news__name">
<a href="http://www.cyberaxe.org/article/how-to-declare-variables-in-c">So deklarieren Sie Variablen in C++?</a>
</div>
<div class="header-news__author">
<a href="http://www.cyberaxe.org/author/gian-eisenlauer">Gian Eisenlauer</a>
</div>
</div>
</div>
</div>
<div>
<div>
<div class="header-news">
<div class="header-news__cat">
<a href="http://www.cyberaxe.org/category/sqlite">Sqlite</a>
</div>
<div class="header-news__name">
<a href="http://www.cyberaxe.org/article/what-are-sqlite-and-sqlite3-are-they-the-same">Was sind SQLite und SQLite3? Sind sie gleich?</a>
</div>
<div class="header-news__author">
<a href="http://www.cyberaxe.org/author/fr-chris-frisch">Fr. Chris Frisch</a>
</div>
</div>
</div>
</div>
</div>
</div>
<footer>
<div class="container">
<div class="footer">
<div class="footer__about">Eine Seite über das Linux-Betriebssystem. Hier finden Sie viele interessante Artikel und nützliche Ratgeber</div>
<div class="footer__cats">
<ul class="sub-menu">
<li class="menu-item"><a href="http://www.cyberaxe.org/category/python">Python</a></li>
<li class="menu-item"><a href="http://www.cyberaxe.org/category/postgresql">PostgreSQL</a></li>
<li class="menu-item"><a href="http://www.cyberaxe.org/category/oracle-linux">Oracle Linux</a></li>
<li class="menu-item"><a href="http://www.cyberaxe.org/category/c">C ++</a></li>
<li class="menu-item"><a href="http://www.cyberaxe.org/category/windows-os">Windows OS</a></li>
</li>
</ul>
</div>
<div class="footer__cats">
<ul class="sub-menu">
<li class="menu-item"><a href="http://www.cyberaxe.org/category/docker">Docker</a></li>
<li class="menu-item"><a href="http://www.cyberaxe.org/category/c-sharp">c scharf</a></li>
<li class="menu-item"><a href="http://www.cyberaxe.org/category/r">R</a></li>
<li class="menu-item"><a href="http://www.cyberaxe.org/category/oracle-database">Oracle -Datenbank</a></li>
</li>
<li class="menu-item"><a href="http://www.cyberaxe.org/all-categories"><b>Alle Kategorien</b></a></li>
</ul>
</div>
</div>
</div>
</footer>
<script src="/assets/artline/js/app.min.js"></script>
<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.0/cookieconsent.min.css" />
<script src="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.0/cookieconsent.min.js"></script>
<script>
window.addEventListener("load", function(){
window.cookieconsent.initialise({
"palette": {
"popup": {
"background": "#edeff5",
"text": "#838391"
},
"button": {
"background": "#4b81e8"
}
},
"theme": "classic",
"position": "bottom-right"
})});
</script>
<script>
const images = document.querySelectorAll('img');
for (let i = 0; i < images.length; i++) {
images[i].onerror = function() {
this.src = 'https://cyberaxe.org/storage/img/nophoto.jpg';
}
}
</script>
</body>
</html>
Zunächst mit einem Flask einbauen:
PIP -Kolben installierenSchritt 1: Minimale Webanwendung
Die minimale Anwendung finden Sie unter https: // Flask.palletsProjects.com/en/2.0.X/QuickStart/#a-Minimal-Anwendung. Dies ist eine Webseite, auf der "Hello World" angezeigt wird. Das erste, was wir getan haben, war eine Instanz von Flask () mit „__name__“ als Argument. Der Routendekorator wird verwendet, um den Flask die URL zu informieren, die die von uns geschriebene Funktion aktiviert.
aus Flask -Importkolbenapp = Flask (__ Name__)
@app.Route('/')
Def Index ():
Rückkehr "Hallo Welt"
Wenn "__name__" == "__main__":
App.run (debug = true)
Geben Sie als nächstes im Terminal von Pycharm Folgendes ein (wobei der Name meiner Python -Datei Haupt.py; Ersetzen Sie in Ihrem Fall das Haupt.Py mit dem Dateinamen Ihres Python):
Setzen Sie Flask_App = Main.py$ env: Flask_app = "Main.py "
Flasklauf
Sobald Sie "Flask Run" ausgeführt haben. In dieser URL: Port wird die Webseite geladen. Sie können immer Kontroll + C drücken, um aufzuhören. In meinem Fall heißt es: „Laufen auf http: // 127.0.0.1: 5000/ (drücken Sie Strg+C, um zu beenden) ”. Öffnen Sie also Ihren Webbrowser und kopieren Sie die angegebene URL. In meinem Fall habe ich „http: // 127 eingefügt und eingefügt.0.0.1: 5000/”. Bitte beachten Sie auch, dass die vorherigen Zeilen jedes Mal ausgeführt werden müssen, wenn Sie Pycharm neu starten, damit es funktioniert:
Schritt 2: Hinzufügen von HTML
Das erste, was Sie tun müssen, ist, den Ordner zu öffnen, in dem sich das Python -Skript befindet, und einen Ordner namens "Vorlagen" erstellen. Als ich das zum ersten Mal leitete, habe ich versucht, den Namen „Vorlage“ als Ordnername zu setzen, und das gesamte Programm stürzte ab und arbeitete nicht. Es ist also unbedingt erforderlich, dass Sie den Ordner nennenVorlagen”. Erstellen Sie in diesem Ordner "Vorlagen" einen Index.HTML -Datei mit Ihrem HTML -Code. Verwenden Sie dann render_template () und übergeben Sie „Index“.html ”als Argument. Wenn Sie nun im Terminal "Flask Run" ausführen, sollte Ihr HTML -Code gerendert werden:
Mein HTML -Code (Index.HTML) Im Moment ist wie folgt:
Kalyanis Lebenslauf
Diese Seite enthält meinen Lebenslauf
Und mein Python -Dateicode (Haupt.py) ist wie folgt:
aus Flask -Importflächen render_templateapp = Flask (__ Name__)
@app.Route('/')
Def Index ():
return render_template ("index.html ")
Wenn "__name__" == "__main__":
App.run (debug = true)
Letzteres macht eine einfache HTML -Seite.
Schritt 3: Hinzufügen von CSS
Jetzt möchte ich meinem HTML CSS hinzufügen. Erstellen Sie dazu einen Ordner namens "statisch" und erstellen Sie eine Datei namens "Main".CSS ”. Hier kann der Name der tatsächlichen CSS -Datei alles sein. Ich habe beschlossen, mein Main zu nennen.CSS ”. Der Name des Ordners muss jedoch "statisch" sein! In der Tat kann man im „statischen“ Ordner alles platzieren, was statisch ist, wie CSS, JavaScript und Bilder. Wenn Sie also Bilder, JavaScript und CSS einstellen möchten, möchten Sie möglicherweise Unterordner erstellen.
Lassen Sie uns zunächst das CSS (Haupt.CSS) Ich will:
KörperRand: 0;
Farbe: #333
Schriftfamilie: Verdana;
Schriftgröße: 20px;
Hintergrundfarbe: RGB (201, 76, 76);
.gestylt
Hintergrundfarbe: #92A8D1;
Schriftfamilie: Verdana;
Schriftgröße: 20px;
Hier im Index.HTML, wir müssen schreiben < link rel = ”stylesheet” type = ”text/css” href = ”url_for ('static', fileName =" Main.CSS ")"> Im Kopf der HTML -Datei. Hier ist der Dateiname der Name der CSS -Datei (Mine ist Haupt.CSS). Wenn zum Beispiel das „Haupt.CSS ”befindet sich mit einem Unterordner namens„ CSS “, dann schreiben Sie Folgendes:
.Danach können Sie die von Ihnen erstellten CSS verwenden. Zum Beispiel habe ich einen namens "gestylt" erstellt und es in der H1 -Klasse verwendet.
Mein Index.Die HTML -Datei wäre wie folgt:
Kalyanis Lebenslauf
Diese Seite enthält meinen Lebenslauf
Alternativ kann man auch Folgendes verwenden:
.[/cce_python]
In diesem Fall würde der HTML -Code so aussehen:
[CC Lang = "html" width = "100%" height = "100%" entsieped = "true" thema = "Blackboard" Nowrap = "0"]