В сегодняшнюю цифровую эпоху наличие веб-сайта имеет решающее значение для компаний и частных лиц, чтобы установить свое присутствие в Интернете. Flask — это популярный веб-фреймворк для Python, который позволяет разработчикам быстро и эффективно создавать веб-приложения. В этой статье мы рассмотрим процесс создания веб-сайта с использованием Flask и Python.

Предварительные требования Прежде чем мы начнем, убедитесь, что на вашем компьютере установлено следующее:

  • Python (версия 3 или более поздняя)
  • Flask (версия 2.1 или новее)

Шаг 1. Настройка виртуальной среды Виртуальные среды — это изолированные среды Python, которые позволяют вам работать над разными проектами с разными зависимостями, не конфликтуя друг с другом. Чтобы настроить виртуальную среду, выполните следующие действия:

  1. Откройте терминал или командную строку и перейдите в каталог проекта.
  2. Запустите команду python3 -m venv venv, чтобы создать виртуальную среду с именем venv.
  3. Активируйте виртуальную среду, выполнив команду source venv/bin/activate (в Linux/Mac) или venv\Scripts\activate (в Windows).

Шаг 2. Создание приложения Flask Теперь, когда мы настроили нашу виртуальную среду, давайте создадим приложение Flask. Следуй этим шагам:

  1. Создайте новый файл Python с именем app.py в каталоге проекта.
  2. Импортируйте модуль Flask, добавив следующую строку кода вверху файла: from flask import Flask.
  3. Создайте новое приложение Flask, добавив следующие строки кода:
app = Flask(__name__)

@app.route('/')
def index():
    return 'Hello, World!'

4. Сохраните файл и выполните команду python app.py, чтобы запустить приложение Flask.

Шаг 3. Создание базового HTML-шаблона Теперь, когда у нас есть базовое приложение Flask, давайте создадим HTML-шаблон. Следуй этим шагам:

  1. Создайте новый каталог с именем templates в каталоге проекта.
  2. Создайте новый файл с именем base.html в каталоге шаблонов.
  3. Добавьте следующий 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:

  1. Создайте новый каталог с именем static в каталоге проекта.
  2. Создайте новый файл с именем style.css в статическом каталоге.
  3. Добавьте код 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 позволяет пользователям отправлять нам сообщения прямо с веб-сайта. Следуй этим шагам:

  1. Создайте новый файл 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. Понравилась эта статья? Зацените мое приложение!