Flask to ramy rozwoju stron internetowych. Z Pythonem są dwa moduły, które można użyć do tworzenia stron internetowych: Django i Flask. Jednak kolba jest bardziej lekka i łatwiejsza do nauczenia. W tym samouczku będziemy zbudować bardzo prostą stronę internetową za pomocą modułu Folask Python.

Na początek zainstaluj kolbę:

PIP zainstaluj kolbę

Krok #1: Minimalna aplikacja internetowa

Minimalną aplikację można znaleźć w kolbie https: //.PALLETSProjects.com/en/2.0.X/QuickStart/#A-minimal-Application. To jest strona internetowa, która wyświetla „Hello World”. Pierwszą rzeczą, którą zrobiliśmy, było stworzenie instancji Flask () z „__name__” jako argument. Dekorator trasy służy do poinformowania kolby adresu URL, który aktywuje funkcję, którą napisaliśmy.

z kolby importowej kolby
App = Flask (__ name__)
@App.trasa('/')
DEF INDEX ():
powrót „Hello World”
Jeśli „__name__” == „__main__”:
App.RUN (debug = true)

Następnie, w terminalu pycharm, wpisz następujące (gdzie nazwa mojego pliku Python jest główna.py; W twoim przypadku wymień Main.Py z nazwą pliku twojego Pythona):

SET FLAK_APP = Main.py
$ env: flask_app = "Main.py "
Run Flask

Po uruchomieniu „Flask Run” terminal wyrzuci adres URL z portem. Ten adres URL: Port to miejsce, w którym ładowana jest strona internetowa. Zawsze możesz nacisnąć kontrolę + c, aby wyrzucić. W moim przypadku napisano „Bieganie na http: // 127.0.0.1: 5000/ (naciśnij Ctrl+C, aby rzucić) ”. Otwórz więc swoją przeglądarkę internetową, skopiuj i wklej podany adres URL. W moim przypadku skopiowałem i wkleiłem „http: // 127.0.0.1: 5000/”. Należy również pamiętać, że poprzednie linie muszą być uruchamiane za każdym razem, gdy ponownie uruchamiasz PyCharm, aby działał:

Krok #2: Dodanie HTML

Pierwszą rzeczą, którą musisz zrobić, to otworzyć folder, w którym znajduje się skrypt Python i utworzyć folder o nazwie „Szablony”. Kiedy to po raz pierwszy uruchomiłem, próbowałem umieścić nazwę „Szablon” jako nazwę folderu, a cały program rozbił się i nie działał. To konieczne, aby nazywać folder „szablony". W tym folderze „Szablony” utwórz indeks.plik HTML z kodem HTML. Następnie użyj render_template () i przejść „indeks.html ”jako argument. Teraz, jeśli uruchomisz „Run Folask” w terminalu, powinien zostać wykonany kod HTML:

Mój kod HTML (indeks.html) Na razie jest następujący:

CV Kalyani
Ta strona będzie zawierać moje CV

I mój kod pliku Pythona (Main.py) jest następujący:

z kolby importowej kolby, render_template
App = Flask (__ name__)
@App.trasa('/')
DEF INDEX ():
return render_template („indeks.html ”)
Jeśli „__name__” == „__main__”:
App.RUN (debug = true)

Ta ostatnia renderuje prostą stronę HTML.

Krok #3: Dodanie CSS

Teraz chcę dodać CSS do mojego HTML. Aby to zrobić, utwórz folder o nazwie „Statyczny” i utwórz plik o nazwie „Main.CSS ”. Tutaj nazwa rzeczywistego pliku CSS może być wszystkim. Postanowiłem zadzwonić do mojego „Main.CSS ”. Jednak nazwa folderu musi być „statyczna”! W rzeczywistości w folderze „statycznym” można umieścić wszystko, co jest statyczne, takie jak CSS, JavaScript i obrazy. Jeśli więc zamierzasz umieścić obrazy, JavaScript i CSS, możesz zrobić utworzenie podfolderów.

Najpierw napiszmy CSS (Main.CSS) Chcę:

ciało
Margines: 0;
Kolor: #333
Font-Family: Verdana;
Rozmiar czcionki: 20px;
kolor tła: RGB (201, 76, 76);

.Styled
kolor tła: #92A8D1;
Font-Family: Verdana;
Rozmiar czcionki: 20px;

Tutaj, w indeksie.html, musimy pisać ilt; link rel = ”stylesheet” type = ”Text/css” href = ”url_for („ static ”, filename =" main main.css ")”> na czele pliku HTML. Tutaj nazwa pliku to nazwa pliku CSS (moje jest główne.CSS). Jeśli na przykład „główny.CSS ”znajduje się z podfolderem o nazwie„ CSS ”, a następnie napiszesz następujące:

.

Następnie możesz użyć utworzonych CSS. Na przykład stworzyłem jeden o nazwie „Styled” i użyłem go w klasie H1.

Mój indeks.Plik HTML byłby następujący:

CV Kalyani

Ta strona będzie zawierać moje CV

Alternatywnie można również użyć następujących czynności:

.
[/cce_python]
W takim przypadku kod HTML wyglądałby tak:
[cc lang = "html" szerokie = "100%" height = "100%" ewident = "true" theme = "blackboard" nowrap = "0"]