Flask – это фреймворк для веб-разработки. В Python есть два модуля, которые можно использовать для веб-разработки: Django и Flask. Однако Flask более легкий и легкий в освоении. В этой статье мы создадим очень простой веб-сайт, используя модуль Python Flask.
Для начала устанавливаем Flask:
pip install flask
Шаг # 1: минимальное веб-приложение
Минимальное приложение можно найти по адресу https://flask.palletsprojects.com/en/2.0.x/quickstart/#a-minimal-application. Это веб-страница, на которой отображается «Hello World». Первым делом мы создали экземпляр Flask() с аргументом «__name__». Декоратор маршрута используется для того, чтобы сообщить Flask URL-адрес, который активирует написанную нами функцию.
from flask import Flask
app = Flask(__name__)
@app.route('/')
def index():
return "Hello World"
if "__name__" == "__main__":
app.run(debug=True)
Затем в терминале PyCharm введите следующее (где имя моего файла Python – main.py; в вашем случае замените main.py именем вашего файла Python):
set FLASK_APP=main.py $env:FLASK_APP = "main.py" flask run
Как только вы запустите «flask run», терминал выдаст URL-адрес с портом. Этот URL: PORT – это место, где загружается веб-страница. Вы всегда можете нажать Control+c, чтобы выйти. В нашем случае написано: «Запуск на http://127.0.0.1:5000/ (нажмите CTRL + C, чтобы выйти)». Итак, откройте свой веб-браузер, скопируйте и вставьте указанный URL. В моем случае мы скопировали и вставили «http://127.0.0.1:5000/». Также обратите внимание, что предыдущие строки должны запускаться каждый раз, когда вы перезапускаете PyCharm, чтобы он работал.
Шаг № 2: Добавление HTML
Первое, что вам нужно сделать, это открыть папку, в которой находится скрипт Python, и создать папку под названием «templates». Когда мы впервые запустили это, мы попытались указать имя «templates» в качестве имени папки, и вся программа вылетела и не работала. Поэтому обязательно назовите папку «templates». В этой папке «templates» создайте файл index.html с вашим HTML-кодом. Затем используйте render_template() и передайте index.html в качестве аргумента. Теперь, если вы запустите «flask run» в терминале, ваш HTML-код должен отобразиться:
html-код (index.html) на данный момент выглядит следующим образом:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Мое резюме</title> </head> <body> <h1> Мое резюме Эта страница будет содержать мое резюме </h1> </body> </html>
И код файла Python (main.py) выглядит следующим образом:
from flask import Flask, render_template
app = Flask(__name__)
@app.route('/')
def index():
return render_template("index.html")
if "__name__" == "__main__":
app.run(debug=True)
Последний будет отображать простую HTML-страницу.
Шаг № 3: Добавление CSS
Теперь я хочу добавить CSS в свой HTML. Для этого создайте папку с именем «static» и создайте файл с именем «main.css». Здесь имя фактического файла CSS может быть любым. Мы решили назвать наш «main.css». Однако имя папки должно быть «static»! Фактически, в «static» папке можно разместить все, что является статическим, например CSS, JavaScript и изображения. Итак, если вы собираетесь размещать изображения, JavaScript и CSS, вы можете создать подпапки.
Сначала напишем нужный CSS (main.css):
body {
margin:0;
color: #333
font-family: verdana;
font-size: 20px;
background-color: rgb(201, 76, 76);
}
.styled {
background-color: #92a8d1;
font-family: verdana;
font-size: 20px;
}
Здесь, в index.html, нам нужно написать <link rel=”stylesheet” type=”text/css” href=”{{ url_for(‘static’, filename=’main.css’)}}”> в заголовке HTML-файла. Здесь filename – это имя файла CSS (у нас main.css). Если, например, «main.css» находится с подпапкой «css», вы должны написать следующее:
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/main.css')}}">.
После этого вы можете использовать созданный вами CSS. Например, мы создали один под названием «styled» и использовал его в классе h1.
Файл index.html будет следующим:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Мое резюме</title>
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='main.css')}}">
</head>
<body>
<h1 class="styled">
Мое резюме
Эта страница будет содержать мое резюме
</h1>
</body>
</html>
Главный файл Python – main.py – остается прежним.
from flask import Flask, render_template
app = Flask(__name__)
@app.route('/')
def index():
return render_template("index.html")
if "__name__" == "__main__":
app.run(debug=True)
Шаг 4: Добавление изображения
Теперь давайте добавим изображение на созданную HTML-страницу! Для этого мы используем созданную нами папку «static». Внутри папки «static» мы создали другую папку под названием «images». В папке изображений мы поместили изображение. Теперь давайте добавим изображение в HTML-код следующим образом: <img src=”/static/images/andreyex.jpg” height=”200″ />. В этом случае мы установили высоту изображения 200, но вы можете изменить ее на все, что захотите, и добавить CSS, если хотите.
HTML-код будет выглядеть следующим образом:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Мое резюме</title>
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='main.css')}}">
</head>
<body>
<img src="/static/images/andreyex.jpg" height="200" />
<h1 class="styled">
Мое резюме
</h1>
Эта страница будет содержать мое резюме
</body>
</html>
В качестве альтернативы можно также использовать следующее:
<img src="{{ url_for('static', filename='images/andreyex.jpg')}}" height="200" />.
В этом случае HTML-код будет выглядеть так:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Мое резюме</title>
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='main.css')}}">
</head>
<body>
<img src="{{ url_for('static', filename='images/andreyex.jpg')}}" height="200" />
<h1 class="styled">
Мое резюме
</h1>
Эта страница будет содержать мое резюме
</body>
</html>
Шаг № 5: Добавление JavaScript
Есть два способа добавить JavaScript. В этой первой демонстрации я создам кнопку. Когда кнопка нажата, она активирует функцию myFunction(), которая будет JavaScript (находится в теге <script>). Для этого настройте кнопку. Затем установите тег скрипта в заголовке HTML-кода и определите в нем функцию. В нашем случае мы определили функцию, которая будет добавлять «все резюме» к элементу p при нажатии кнопки.
Вы можете добавить его в файл index.html следующим образом:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Мое резюме</title>
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='main.css')}}">
function myFunction() {
document.getElementById("para").innerHTML = "WHOLE RESUME";
}
</script>
</head>
<body>
<img src="/static/images/andreyex.jpg" height="200" />
<h1 class="styled">
Мое резюме
</h1>
Эта страница будет содержать мое резюме
<br>
<br>
<p id="para"> </p>
<<button id="button" type="button" onclick="myFunction()"> Click to see Resume </button>
</body>
</html>
Однако в большинстве случаев файлы JavaScript, как правило, сами по себе являются документами, а не однострочниками. В таких случаях у нас будет файл .js, который нужно связать. В нашем случае мы бы написали: <script src=”/static/javascript/javascript.js”></script>. Итак, как и в случае с файлом изображения, мы связываем файл js следующим образом:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Мое резюме</title>
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='main.css')}}">
<script src="/static/javascript/javascript.js">
</script>
</head>
<body>
<img src="/static/images/andreyex.jpg" height="200" />
<h1 class="styled">
Мое резюме
</h1>
Эта страница будет содержать мое резюме
<br>
<br>
<p id="para"> </p>
<button id="button" type="button" onclick="myFunction()"> Click to see Resume </button>
</body>
</html>
В качестве альтернативы вы также можете использовать это: <script src=”{{ url_for(‘static’, filename=’javascript/javascript.js’)}}”></script>. Последний сгенерирует этот HTML-код:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Мое резюме</title>
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='main.css')}}">
<script src="{{ url_for('static', filename='javascript/javascript.js')}}">
</script>
</head>
<body>
<img src="{{ url_for('static', filename='images/andreyex.jpg')}}" height="200" />
<h1 class="styled">
Мое резюме
</h1>
Эта страница будет содержать мое резюме
<br>
<br>
<p id="para"> </p>
<button id="button" type="button" onclick="myFunction()"> Click to see Resume </button>
</body>
</html>
Заключение
Flask – это микро-фреймворк, который удобен в использовании и отлично подходит для начинающих. В частности, сама документация великолепна, и ее можно найти по адресу https://flask.palletsprojects.com/en/2.0.x/quickstart/#static-files. В этой статье мы узнали, как создать простой веб-сайт, добавить CSS, добавить изображения и добавить JavaScript на веб-сайт с помощью модуля Python Flask.