Читать — значит думать чужой головой вместо своей собственной (А. Шопенгауэр).

Создание веб-сайта с помощью Python

Главное меню » Программирование » Python » Создание веб-сайта с помощью Python

19.11.2021

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-код должен отобразиться:

Читать Как клонировать репозиторий Git с помощью Ansible

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)

Читать 8 крупнейших тенденций веб-разработки на данный момент

Шаг 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>

Читать Скрипт Python для мониторинга сетевого подключения

В качестве альтернативы вы также можете использовать это: <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. Мы надеемся, что эта статья оказалась для вас полезной, и, пожалуйста, ознакомьтесь с Linux Hint для получения более информативных статей.

Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.

Просмотров поста: 812