В сегодняшнюю цифровую эпоху наличие веб-сайта имеет решающее значение для компаний и частных лиц, чтобы установить свое присутствие в Интернете. Flask — это популярный веб-фреймворк для Python, который позволяет разработчикам быстро и эффективно создавать веб-приложения. В этой статье мы рассмотрим процесс создания веб-сайта с использованием Flask и Python.
Предварительные требования Прежде чем мы начнем, убедитесь, что на вашем компьютере установлено следующее:
- Python (версия 3 или более поздняя)
- Flask (версия 2.1 или новее)
Шаг 1. Настройка виртуальной среды Виртуальные среды — это изолированные среды Python, которые позволяют вам работать над разными проектами с разными зависимостями, не конфликтуя друг с другом. Чтобы настроить виртуальную среду, выполните следующие действия:
- Откройте терминал или командную строку и перейдите в каталог проекта.
- Запустите команду
python3 -m venv venv
, чтобы создать виртуальную среду с именем venv. - Активируйте виртуальную среду, выполнив команду
source venv/bin/activate
(в Linux/Mac) илиvenv\Scripts\activate
(в Windows).
Шаг 2. Создание приложения Flask Теперь, когда мы настроили нашу виртуальную среду, давайте создадим приложение Flask. Следуй этим шагам:
- Создайте новый файл Python с именем app.py в каталоге проекта.
- Импортируйте модуль Flask, добавив следующую строку кода вверху файла:
from flask import Flask
. - Создайте новое приложение Flask, добавив следующие строки кода:
app = Flask(__name__) @app.route('/') def index(): return 'Hello, World!'
4. Сохраните файл и выполните команду python app.py
, чтобы запустить приложение Flask.
Шаг 3. Создание базового HTML-шаблона Теперь, когда у нас есть базовое приложение Flask, давайте создадим HTML-шаблон. Следуй этим шагам:
- Создайте новый каталог с именем templates в каталоге проекта.
- Создайте новый файл с именем base.html в каталоге шаблонов.
- Добавьте следующий HTML-код в base.html:
<!DOCTYPE html> <html> <head> <title>{% block title %} {% endblock %}</title> </head> <body> {% block content %} {% endblock %} </body> </html>
4. Создайте новый файл с именем index.html в каталоге шаблонов.
5. Добавьте следующий код HTML в index.html:
{% extends "base.html" %} {% block title %}Home{% endblock %} {% block content %} <h1>Hello, World!</h1> {% endblock %}
6. Сохраните файлы и перезапустите приложение Flask.
Шаг 4. Добавление статических файлов Статические файлы — это файлы, такие как изображения, таблицы стилей и файлы JavaScript, которые предоставляются клиенту как есть. Выполните следующие действия, чтобы добавить статические файлы в наше приложение Flask:
- Создайте новый каталог с именем static в каталоге проекта.
- Создайте новый файл с именем style.css в статическом каталоге.
- Добавьте код CSS в style.css:
body { background-color: #eee; }
4. Добавьте ссылку на файл CSS в файл base.html, добавив следующий код в раздел head:
<link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
5. Сохраните файл и перезапустите приложение Flask.
Шаг 5. Добавьте контактную форму. Добавление контактной формы в наше приложение Flask позволяет пользователям отправлять нам сообщения прямо с веб-сайта. Следуй этим шагам:
- Создайте новый файл Python с именем forms.py в каталоге проекта.
from wtforms import StringField, TextAreaField, SubmitField from wtforms.validators import DataRequired, Email class ContactForm(FlaskForm): name = StringField('Name', validators=[DataRequired()]) email = StringField('Email', validators=[DataRequired(), Email()]) message = TextAreaField('Message', validators=[DataRequired()]) submit = SubmitField('Send')
2. Обновите файл index.html, добавив следующий код:
{% extends "base.html" %} {% block title %}Home{% endblock %} {% block content %} <h1>Hello, World!</h1> <h2>Contact Us</h2> <form method="POST"> {{ form.hidden_tag() }} <div> {{ form.name.label }} {{ form.name() }} </div> <div> {{ form.email.label }} {{ form.email() }} </div> <div> {{ form.message.label }} {{ form.message() }} </div> <div> {{ form.submit() }} </div> </form> {% endblock %}
3. Обновите файл app.py, добавив следующие строки кода:
from forms import ContactForm @app.route('/contact', methods=['GET', 'POST']) def contact(): form = ContactForm() if form.validate_on_submit(): name = form.name.data email = form.email.data message = form.message.data # Do something with the data return 'Thank you for your message!' return render_template('contact.html', form=form)
4. Создайте новый файл с именем contact.html в каталоге шаблонов.
5. Добавьте следующий код HTML в contact.html:
{% extends "base.html" %} {% block title %}Contact Us{% endblock %} {% block content %} <h1>Contact Us</h1> <form method="POST"> {{ form.hidden_tag() }} <div> {{ form.name.label }} {{ form.name() }} </div> <div> {{ form.email.label }} {{ form.email() }} </div> <div> {{ form.message.label }} {{ form.message() }} </div> <div> {{ form.submit() }} </div> </form> {% endblock %}
6. Сохраните файлы и перезапустите приложение Flask.
Шаг 6. Развертывание веб-сайта Завершив создание веб-сайта, вы можете развернуть его на веб-сервере, чтобы к нему мог получить доступ любой пользователь в Интернете. Существует множество доступных веб-хостингов, поддерживающих Python и Flask, таких как Heroku, PythonAnywhere и Google Cloud Platform.
В этой статье мы узнали, как создать веб-сайт с помощью Flask и Python. Мы рассмотрели основы настройки приложения Flask, создания шаблонов HTML, добавления статических файлов и создания контактной формы. Обладая этими навыками, вы можете создавать самые разнообразные веб-приложения и развертывать их в Интернете.
P.S. Понравилась эта статья? Зацените мое приложение!