2021-22 учебный год. 10 "В" класс. html, flask

html

Упражнение

Сделайте html-страничку с условием задачи A+B:

flask. Подготовка и технические моменты

flask. Установка дома

Для установки дома один раз из консоли выполните команду

pip install flask

Проверьте, что все работает, выполнив программу из одной строчки

import flask

Не работает? Выполните следующую инструкцию:

Когда вы будете писать программы дома, то к тому коду, который приведен ниже, нужно еще дописать в конце:

if __name__ == '__main__':
    app.run(host="0.0.0.0", port=25000, debug=True)
либо, если этот вариант не работает, попробуйте такой:
if __name__ == '__main__':
    app.run(host="::", port=25000, debug=True)
После запуска на своем компьютере нужно в браузере зайти на адрес localhost:25000 (что означает "зайди на этот компьютер по порту 25000"). Вместо порта 25000 вы можете использовать любой другой доступный по вашему выбору (заметьте, что номер порта указывается в коде программы и в адресе).

Прервать выполнение программы - Ctrl+C (нажать одновременно Ctrl и C).

pythonanywhere

Страничка про pythonanywhere.com.

Первые программы на flask

Первая программа на flask

Скачать файл

from flask import Flask, render_template
app = Flask(__name__)

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

Вторая программа на flask

Для запуска этой программы помимо самой программы вам еще понадобиться создать папку templates, и положить в нее файл hello.html, текст которого приведен ниже.

Скачать файл

from flask import Flask, render_template
app = Flask(__name__)

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

@app.route('/hello/')
@app.route('/hello/<name>')
def hello(name=None):
    return render_template('hello.html', name=name)

templates/hello.html (можно нажать правой кнопкой по ссылке и сказать "Сохранить как", если же просто открыть ссылку, она откроется как html-файл, и вы не увидите части важной информации)

<html>
<head>
<meta http-equiv="Content-Type"; content="text/html; charset=utf-8">
</head>
<body>
<p>Hello, {{name}}!

</body>
</html>

Запустите программу и зайдите на страничку ваш_сервер/hello/vam, а потом на страничку ваш_сервер/hello/somebody

Третья программа на flask

Скачать файл

from flask import Flask, render_template, request
app = Flask(__name__)

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

@app.route('/hello')
def hello():
    args = request.args
    name = args.get("name", "")
    return render_template('hello.html', name=name)

if __name__ == '__main__':
    app.run(host="0.0.0.0", port=25000, debug=True)

Для работы этой программы в папке templates должен быть тот же самый файл hello.html, что и в предыдущей программе.

Запустите программу и зайдите на страничку ваш_сервер/hello?name=vam


Пример проекта с формами

Программа на python

from flask import Flask, render_template, request
app = Flask(__name__)

@app.route('/')
def start_page():
    return render_template('firstpage.html')

@app.route('/second')
def generate_secondpage():
    args = request.args
    name = args.get("name", "")
    gender = args.get("gender", "Unknown")
    return render_template('secondpage.html', name=name, gender=gender)

templates/firstpage.html (можно нажать правой кнопкой по ссылке и сказать "Сохранить как", если же просто открыть ссылку, она откроется как html-файл, и вы не увидите части важной информации)

<html>
<head>
<meta http-equiv="Content-Type"; content="text/html; charset=utf-8">
</head>
<body>
<p>Hello! This is simple form
<form action="/second">
<p>Enter your name: <input type="text" name="name">
<p>Your gender: <input type="radio" name="gender" value="Male">Male <input type="radio" name="gender" value="Female">Female
<p><input type="submit" value="Submit!">
</form>

</body>
</html>

templates/secondpage.html (можно нажать правой кнопкой по ссылке и сказать "Сохранить как", если же просто открыть ссылку, она откроется как html-файл, и вы не увидите части важной информации)

<html>
<head>
<meta http-equiv="Content-Type"; content="text/html; charset=utf-8">
</head>
<body>
<p>Hello, {{name}}!
<p>Do you like
{% if gender == "Male"%}
football?
{% elif gender == "Female"%}
flowers?
{% else %}
cheeseburgers?
{% endif %}

<form action="/second">
<input type="text" name="name" value="{{name}}" hidden>
<input type="tex" name="gender" value="{{gender}}" hidden>
<input type="submit" name="button" value="Yes">
<input type="submit" name="button" value="No">
</form>

</body>
</html>


Как научить flask отдавать картинку (да и любой другой файл)

Программа на python

from flask import Flask, send_file
app = Flask(__name__)

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

@app.route('/image/<name>')
def getimage(name=None):
    return send_file("image/" + name)

Если рядом со своим кодом вы созданите папчку image и туда положите файл, например, с картинкой, по имени cat.jpeg, то по запросу в браузере ваш_сервер/image/cat.jpeg вы получите эту картинку.

Функцию getimage в коде можно сочетать с остальными, возвращающими html, и тогда в своем html вы вполне можете использовать тэг <img src="/image/cat.jpeg"> который вашу картинку вставит в вашу html-страничку.


Как загрузить (upload) файл на flask-сервер из html-страницы

html:

    <form id="fileload" enctype="multipart/form-data" method="POST" action="/show_file">
        <input type="file" name="file_name" />
        <button type="submit" form="fileload" formaction="/show_file">
            Загрузить файл
        </button>
    </form>

flask:

@app.route('/show_file', methods = ['POST'])
def show_file():
    left = request.files.get('file_name') # file_name - это то же имя, что и в input-элементе html 
    content = left.read().decode('utf-8')
    return content

Что и где почитать: