Costruisci un sito Web con Python
Il pallone è un framework di sviluppo web. Con Python, ci sono due moduli che si possono usare per lo sviluppo del web: Django e pallone. Tuttavia, il pallone è più leggero e più facile da imparare. In questo tutorial, costruiremo un sito Web molto semplice utilizzando il modulo di pallone di Python.
app = pallone (__ nome__)
@App.itinerario('/')
def indice ():
ritorna "Hello World"
Se "__name__" == "__main__":
app.run (debug = true)
$ env: flask_app = "main.Py "
Run di pallone
Il curriculum di Kalyani
app = pallone (__ nome__)
@App.itinerario('/')
def indice ():
return render_template ("indice.html ")
Se "__name__" == "__main__":
app.run (debug = true)
Margine: 0;
Colore: #333
Font-Family: Verdana;
Font-size: 20px;
Background-color: RGB (201, 76, 76);
.stile
Background-color: #92a8d1;
Font-Family: Verdana;
Font-size: 20px;
Il curriculum di Kalyani<br><link rel="stylesheet" type="text/css" href=" url_for('static', filename='main.css')"><br><br><br><h1><br>Il curriculum di Kalyani<br>Questa pagina conterrà il mio curriculum<br></h1><br></body><br></html> <p>Il file principale Python - Main.py - rimane lo stesso.</p> Dal pallone di importazione del pallone, render_template<br>app = pallone (__ nome__)<br>@App.itinerario('/')<br>def indice ():<br>return render_template ("indice.html ")<br>Se "__name__" == "__main__":<br>app.run (debug = true) <p>Passaggio n. 4: aggiunta di un'immagine</p> <p>Ora, aggiungiamo un'immagine alla pagina HTML che abbiamo creato! Per questo, utilizziamo la cartella "statica" che abbiamo creato. All'interno della cartella "statica", ho creato un'altra cartella chiamata "Immagini". All'interno della cartella delle immagini, ho messo un'immagine. Ora, aggiungiamo l'immagine al codice HTML come segue: . In questo caso, ho impostato l'altezza dell'immagine su 200, ma puoi cambiarla in quello che vuoi e aggiungere CSS se vuoi. </p> <p>Il codice HTML sembrerebbe come segue:</p> <br><html lang="en"><br><head><br><meta charset="UTF-8"><br><title>Il curriculum di Kalyani
Questa pagina conterrà il mio curriculum
[/cce_python]
In questo caso, il codice HTML sembrerebbe così:
[cc lang = "html" width = "100%" altezza = "100%" sfuggito = "true" tema = "blackboard" NowRap = "0"]
Il curriculum di Kalyani<br><link rel="stylesheet" type="text/css" href=" url_for('static', filename='main.css')"><br><br><br><br><h1><br>Il curriculum di Kalyani<br></h1><br>Questa pagina conterrà il mio curriculum<br></body><br></html> <p>Passaggio n. 5: aggiunta di JavaScript</p> <p>Ci sono due modi in cui puoi aggiungere JavaScript. In questa prima demo, creerò un pulsante. Quando viene premuto il pulsante, attiverebbe una funzione chiamata MyFunction () che sarà JavaScript (che si trova nel tag). Per questo, imposta il pulsante. Quindi, imposta un tag di script nella testa del codice HTML e al suo interno, definisci una funzione. Nel mio caso, ho definito una funzione che aggiungerà il "intero curriculum" a un elemento P al clic del pulsante. </p> <p>Puoi aggiungerlo all'indice.file html come segue:</p> <br><html lang="en"><br><head><br><meta charset="UTF-8"><br><title>Il curriculum di Kalyani<br><link rel="stylesheet" type="text/css" href=" url_for('static', filename='main.css')"><br>funzione myFunction () <br>documento.getElementById ("para").InnerHtml = "Whole curriching";<br><br><br><br><br><br><h1><br>Il curriculum di Kalyani<br></h1><br>Questa pagina conterrà il mio curriculum<br><br><br><br><br><br><button type="button" onclick="myFunction()"> Clicca per vedere il curriculum </button><br></body><br></html> <p>Tuttavia, nella maggior parte dei casi, i file JavaScript tendono ad essere documenti stessi e non una fodera. In tali casi, avremmo un .file js che dobbiamo collegare. Nel mio caso, scrivo: . Quindi, proprio come il file di immagine, colleghiamo il file JS come segue:</p> <br><html lang="en"><br><head><br><meta charset="UTF-8"><br><title>Il curriculum di Kalyani<br><link rel="stylesheet" type="text/css" href=" url_for('static', filename='main.css')"><br><br><br><br><br><br><h1><br>Il curriculum di Kalyani<br></h1><br>Questa pagina conterrà il mio curriculum<br><br><br><br><br><br><button type="button" onclick="myFunction()"> Clicca per vedere il curriculum </button><br></body><br></html> <p>In alternativa, puoi anche usare questo: . Quest'ultimo genererebbe questo codice HTML:</p> <br><html lang="en"><br><head><br><meta charset="UTF-8"><br><title>Il curriculum di Kalyani<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>Il curriculum di Kalyani<br></h1><br>Questa pagina conterrà il mio curriculum<br><br><br><br><br><br><button type="button" onclick="myFunction()"> Clicca per vedere il curriculum </button><br></body><br></html> <p>Conclusione </p> <p>Il pallone è un micro framework che è intuitivo e ottimo per i principianti. In particolare, la documentazione stessa è eccezionale e può essere trovata su https: // pallone.PalletSprojects.com/en/2.0.X/QuickStart/#Static-Files. In questo tutorial, abbiamo imparato a creare un semplice sito Web, aggiungere CSS, aggiungere immagini e aggiungere JavaScript al sito Web utilizzando il modulo di pallone di Python. Speriamo che tu abbia trovato questo articolo utile e per favore controlla il suggerimento di Linux per altri articoli informativi. </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://it.cyberaxe.org/article/array-every-method-in-javascript">« Array ogni metodo in JavaScript</a></li>
<li class="prev-next__item prev-next__item--right"><a href="http://it.cyberaxe.org/article/when-to-use-ethernet-loopback-plug">Quando utilizzare la spina Ethernet Loopback? »</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://it.cyberaxe.org/category/c-sharp">c affilato</a>
</div>
<div class="white-news__name">
<a href="http://it.cyberaxe.org/article/what-is-the-difference-between-int-and-double-in-c">Qual è la differenza tra int e doppio in c#</a>
</div>
<div class="white-news__text">
I numeri interi (int) sono numeri interi, il che significa che non hanno punti decimali. I doppi (do...
</div>
<div class="white-news__author">
<a href="http://it.cyberaxe.org/author/osea-martini">Osea Martini</a>
</div>
</div>
<div class="white-news white-news--article">
<div class="white-news__cat">
<a href="http://it.cyberaxe.org/category/golang">Golang</a>
</div>
<div class="white-news__name">
<a href="http://it.cyberaxe.org/article/what-is-a-class-and-an-object-in-golang">Cos'è una classe e un oggetto in Golang?</a>
</div>
<div class="white-news__text">
GO non ha classi o oggetti in senso classico; Invece, utilizza strutture e interfacce. Questo artico...
</div>
<div class="white-news__author">
<a href="http://it.cyberaxe.org/author/dante-palumbo">Dante Palumbo</a>
</div>
</div>
<div class="white-news white-news--article">
<div class="white-news__cat">
<a href="http://it.cyberaxe.org/category/c">C ++</a>
</div>
<div class="white-news__name">
<a href="http://it.cyberaxe.org/article/what-is--in-c">Cosa è += in c++?</a>
</div>
<div class="white-news__text">
In C ++ il+= è una combinazione di due operatori, uno è l'operatore di addizione e il secondo è l'op...
</div>
<div class="white-news__author">
<a href="http://it.cyberaxe.org/author/nunzia-martini">Nunzia Martini</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://it.cyberaxe.org/category/python">Pitone</a>
</div>
<div class="header-news__name">
<a href="http://it.cyberaxe.org/article/numpy-save-dict">Numpy Save dict</a>
</div>
<div class="header-news__author">
<a href="http://it.cyberaxe.org/author/dr-folco-leone">Dr. Folco Leone</a>
</div>
</div>
</div>
</div>
<div>
<div>
<div class="header-news">
<div class="header-news__cat">
<a href="http://it.cyberaxe.org/category/python">Pitone</a>
</div>
<div class="header-news__name">
<a href="http://it.cyberaxe.org/article/how-do-i-convert-an-exception-to-a-string-in-python">Come converti un'eccezione in una stringa in Python</a>
</div>
<div class="header-news__author">
<a href="http://it.cyberaxe.org/author/nunzia-martini">Nunzia Martini</a>
</div>
</div>
</div>
</div>
<div>
<div>
<div class="header-news">
<div class="header-news__cat">
<a href="http://it.cyberaxe.org/category/python">Pitone</a>
</div>
<div class="header-news__name">
<a href="http://it.cyberaxe.org/article/python-count-occurrences-in-list">Eccursioni del conteggio dei pitone nell'elenco</a>
</div>
<div class="header-news__author">
<a href="http://it.cyberaxe.org/author/dante-palumbo">Dante Palumbo</a>
</div>
</div>
</div>
</div>
<div>
<div>
<div class="header-news">
<div class="header-news__cat">
<a href="http://it.cyberaxe.org/category/docker">Docker</a>
</div>
<div class="header-news__name">
<a href="http://it.cyberaxe.org/article/how-are-volumes-defined-in-docker-compose-yaml">Come vengono definiti i volumi in Docker composi yaml?</a>
</div>
<div class="header-news__author">
<a href="http://it.cyberaxe.org/author/nunzia-martini">Nunzia Martini</a>
</div>
</div>
</div>
</div>
<div>
<div>
<div class="header-news">
<div class="header-news__cat">
<a href="http://it.cyberaxe.org/category/php">PHP</a>
</div>
<div class="header-news__name">
<a href="http://it.cyberaxe.org/article/how-to-fetch-php-timezone-list">Come recuperare l'elenco dei fusi di tempo PHP</a>
</div>
<div class="header-news__author">
<a href="http://it.cyberaxe.org/author/domiziano-conte">Domiziano Conte</a>
</div>
</div>
</div>
</div>
<div>
<div>
<div class="header-news">
<div class="header-news__cat">
<a href="http://it.cyberaxe.org/category/java">Giava</a>
</div>
<div class="header-news__name">
<a href="http://it.cyberaxe.org/article/what-is-import-java-io--in-java">Cos'è l'importazione Java.io.*; in Java?</a>
</div>
<div class="header-news__author">
<a href="http://it.cyberaxe.org/author/piererminio-de-luca">Piererminio De luca</a>
</div>
</div>
</div>
</div>
<div>
<div>
<div class="header-news">
<div class="header-news__cat">
<a href="http://it.cyberaxe.org/category/aws">AWS</a>
</div>
<div class="header-news__name">
<a href="http://it.cyberaxe.org/article/a-comparison-between-cloudtrail-and-guardduty">Un confronto tra CloudTrail e Guardduty</a>
</div>
<div class="header-news__author">
<a href="http://it.cyberaxe.org/author/dante-palumbo">Dante Palumbo</a>
</div>
</div>
</div>
</div>
<div>
<div>
<div class="header-news">
<div class="header-news__cat">
<a href="http://it.cyberaxe.org/category/powershell">Powershell</a>
</div>
<div class="header-news__name">
<a href="http://it.cyberaxe.org/article/how-to-use-the-get-service-command-in-powershell">Come usare il comando get-service in PowerShell</a>
</div>
<div class="header-news__author">
<a href="http://it.cyberaxe.org/author/nestore-caruso">Nestore Caruso</a>
</div>
</div>
</div>
</div>
<div>
<div>
<div class="header-news">
<div class="header-news__cat">
<a href="http://it.cyberaxe.org/category/aws">AWS</a>
</div>
<div class="header-news__name">
<a href="http://it.cyberaxe.org/article/what-is-subnet-on-aws-vpc-and-how-to-use-it">Cosa è la sottorete su AWS VPC e come usarlo?</a>
</div>
<div class="header-news__author">
<a href="http://it.cyberaxe.org/author/piererminio-de-luca">Piererminio De luca</a>
</div>
</div>
</div>
</div>
<div>
<div>
<div class="header-news">
<div class="header-news__cat">
<a href="http://it.cyberaxe.org/category/docker">Docker</a>
</div>
<div class="header-news__name">
<a href="http://it.cyberaxe.org/article/how-does-docker-differ-from-docker-desktop">In che modo Docker differisce dal desktop Docker?</a>
</div>
<div class="header-news__author">
<a href="http://it.cyberaxe.org/author/nestore-caruso">Nestore Caruso</a>
</div>
</div>
</div>
</div>
</div>
</div>
<footer>
<div class="container">
<div class="footer">
<div class="footer__about">Un sito sul sistema operativo Linux. Qui troverai molti articoli interessanti e guide utili</div>
<div class="footer__cats">
<ul class="sub-menu">
<li class="menu-item"><a href="http://it.cyberaxe.org/category/python">Pitone</a></li>
<li class="menu-item"><a href="http://it.cyberaxe.org/category/postgresql">Postgresql</a></li>
<li class="menu-item"><a href="http://it.cyberaxe.org/category/oracle-linux">Oracle Linux</a></li>
<li class="menu-item"><a href="http://it.cyberaxe.org/category/c">C ++</a></li>
<li class="menu-item"><a href="http://it.cyberaxe.org/category/windows-os">OS Windows</a></li>
</li>
</ul>
</div>
<div class="footer__cats">
<ul class="sub-menu">
<li class="menu-item"><a href="http://it.cyberaxe.org/category/docker">Docker</a></li>
<li class="menu-item"><a href="http://it.cyberaxe.org/category/c-sharp">c affilato</a></li>
<li class="menu-item"><a href="http://it.cyberaxe.org/category/r">R</a></li>
<li class="menu-item"><a href="http://it.cyberaxe.org/category/oracle-database">Oracle Database</a></li>
</li>
<li class="menu-item"><a href="http://it.cyberaxe.org/all-categories"><b>Tutte le categorie</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>
Per cominciare, installa il pallone:
PIP Installa il pallonePassaggio n. 1: Applicazione Web minima
L'applicazione minima è disponibile su https: // pallone.PalletSprojects.com/en/2.0.X/QuickStart/#A-Minimal-Application. Questa è una pagina web che visualizza "Hello World". La prima cosa che abbiamo fatto è stata creare un'istanza di Fask () con "__name__" come argomento. Il decoratore del percorso viene utilizzato per informare il pallone dell'URL che attiverà la funzione che abbiamo scritto.
Dal pallone di importazione di palloneapp = pallone (__ nome__)
@App.itinerario('/')
def indice ():
ritorna "Hello World"
Se "__name__" == "__main__":
app.run (debug = true)
Successivamente, nel terminale di Pycharm, digita quanto segue (dove il nome del mio file Python è principale.Py; Nel tuo caso, sostituire Main.Py con il nome file del tuo Python):
Imposta flask_app = main.Py$ env: flask_app = "main.Py "
Run di pallone
Una volta eseguito "Flask Run", il terminale ruppe un URL con una porta. Questo URL: la porta è dove viene caricata la pagina web. Puoi sempre premere il controllo + C per smettere. Nel mio caso, dice "Esecuzione su http: // 127.0.0.1: 5000/ (premere Ctrl+C per smettere) ". Quindi, apri il tuo browser web e copia e incolla l'URL dato. Nel mio caso, ho copiato e incollato “http: // 127.0.0.1: 5000/". Si noti inoltre che le righe precedenti devono essere eseguite ogni volta che si riavvia Pycharm per funzionare:
Passaggio n. 2: aggiunta di HTML
La prima cosa che devi fare è aprire la cartella in cui si trova lo script Python e crea una cartella chiamata "Modelli". Quando ho eseguito questo per la prima volta, ho provato a mettere il nome "modello" come nome della cartella e l'intero programma si è schiantato e non ha funzionato. Quindi, è imperativo chiamare la cartella "modelli". All'interno di questa cartella "modelli", crea un indice.File HTML con il tuo codice HTML. Quindi, utilizzare render_template () e passare “indice.html ”come argomento. Ora, se esegui "Flask Run" nel terminale, il codice HTML dovrebbe essere reso:
Mio Codice HTML (indice.HTML) Per il momento è il seguente:
Il curriculum di Kalyani
Questa pagina conterrà il mio curriculum
E, il mio codice file Python (principale.py) è il seguente:
Dal pallone di importazione del pallone, render_templateapp = pallone (__ nome__)
@App.itinerario('/')
def indice ():
return render_template ("indice.html ")
Se "__name__" == "__main__":
app.run (debug = true)
Quest'ultimo renderà una semplice pagina HTML.
Passaggio n. 3: aggiunta di CSS
Ora, voglio aggiungere CSS al mio HTML. Per fare ciò, crea una cartella chiamata "statica" e crea un file chiamato "Main.CSS ". Qui, il nome del file CSS effettivo può essere qualsiasi cosa. Ho deciso di chiamare il mio "principale.CSS ". Tuttavia, il nome della cartella deve essere "statico"! In effetti, nella cartella "statica", si può posizionare tutto ciò che è statico, come CSS, JavaScript e immagini. Quindi, se hai intenzione di mettere immagini, JavaScript e CSS, potresti voler creare sottocartelle.
Innanzitutto, scriviamo il CSS (principale.CSS) Voglio:
corpoMargine: 0;
Colore: #333
Font-Family: Verdana;
Font-size: 20px;
Background-color: RGB (201, 76, 76);
.stile
Background-color: #92a8d1;
Font-Family: Verdana;
Font-size: 20px;
Qui, nell'indice.html, dobbiamo scrivere elt; link rel = "Stylesheet" type = "text/css" href = "url_for ('static', fileName =" main.css ")">> Nella testa del file HTML. Qui, il nome file è il nome del file CSS (il mio è principale.CSS). Se ad esempio il "principale.CSS ”si trova con un sottotestato chiamato" CSS ", quindi scriverai quanto segue:
.Dopodiché, puoi usare il CSS che hai creato. Ad esempio, ne ho creato uno chiamato "Styled" e l'ho usato nella classe H1.
Il mio indice.Il file HTML sarebbe il seguente:
Il curriculum di Kalyani
Questa pagina conterrà il mio curriculum
In alternativa, si può anche usare quanto segue:
.[/cce_python]
In questo caso, il codice HTML sembrerebbe così:
[cc lang = "html" width = "100%" altezza = "100%" sfuggito = "true" tema = "blackboard" NowRap = "0"]