В этом учебном пособии по Python я проведу вас через этапы разработки веб-приложений Python для создания приложения с несколькими калькуляторами с использованием Python, flask и Sqlite3. К концу этого руководства по Python вы в основном сможете получить базовые знания и навыки для работы с HTML5, JINJA, CSS3, flask, Python и sqlite3. Тогда вы обнаружите, что разработка веб-приложения не сложна.

• Каркас: UI и UX дизайн
• Питон и Фласк
• HTML5 и Джинджа
• CSS3
• Sqlite3
• Героку
• Полный набор скриптов кодирования

Каркас веб-приложения Python: UI и UX дизайн и визуализация

Каркас — это диаграмма или набор диаграмм, состоящих из простых линий и форм, представляющих основу веб-сайта или приложения. Он в основном визуализирует пользовательский интерфейс (UI) и основные функции, а также представляет подробное объяснение того, что такое каркасы UX, как они выглядят и как они могут принести пользу вашим клиентам.

Приложение «Калькулятор» — интерфейс домашней страницы

Приложение-калькулятор — UX (дизайн маркетинговой воронки)

По сути, вы можете зарегистрировать каркасную учетную запись бесплатно. Эта функция будет ограничена, но достаточно описать пользовательский интерфейс и UX после пробного периода, если э. то ранний этап веб-разработки.

Веб-приложение Python — Python и Flask

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

Ранее я прошел через три калькулятора соответственно: SKU P&L, CLV плана членства и NPV оценки инвестиций. По сути, приложение с несколькими калькуляторами состоит в том, чтобы объединить эти три основные функциональные функции и алгоритмы в один функциональный скрипт. Подробнее о каждом калькуляторе читайте в этих статьях.

• Электронная коммерция SKU Калькулятор прибылей и убытков
• Калькулятор CLV модели подписки
• Калькулятор NPV для оценки инвестиций в электронную коммерцию

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

1. Объедините позиционные аргументы в объекте self

Есть небольшие различия между кодированием ООП трех калькуляторов. Это потому, что, как упоминалось ранее, каждый калькулятор будет иметь разные переменные показатели, влияющие на результат. Эти три показателя имеют как общие, так и разные показатели. Итак, во-первых, вам нужно объединить самокодирование объектов 3 калькуляторов в один.

Например, все они имеют одинаковый набор органических и платных медиаметрик. Таким образом, в основном, пока вы убедитесь, что позиция аргумента может соответствовать позиции аргумента, которую вы создаете в функции для любого нового оператора, все будет в порядке. Это сделано для того, чтобы избежать использования чисел в неправильной метрике.

2. Создайте маршруты

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

Например, домашняя страница включает два маршрута, потому что у нее есть два назначения в UX. Прежде всего, пользователи заходят в веб-приложение, поэтому нам нужен

@app.route("/")

, и он возвращает

return render_template("index_selector.html", all_data = data)

.

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

Затем пользователи выберут калькулятор, который им нравится использовать. Итак, нам нужен второй маршрут:

@app.route("/add_items", methods=["post"])

. Основная цель этого маршрута — указать, какая страница расчета будет открываться с использованием условий if.

И последнее, но не менее важное: это конкретный маршрут калькулятора. Внутри каждого маршрута у него есть свои собственные определенные функции, и аргумент положения объекта self требует обновления в соответствии с новым комбинированным объектом self, о котором я говорил в начале.

@app.route("/CLV", methods=["POST", "GET"])

@app.route("/NPV", methods=["POST", "GET"])

@app.route("/PL", methods=["POST", "GET"])

Помимо Flask, есть еще один популярный вариант разработки веб-прило. жений — Django. Я выпущу еще одну статью об этом в ближайшее время.

3. Создайте и назначьте соответствующую страницу результатов

Поскольку пользовательский интерфейс каждого калькулятора и ожидания клиентов различаются, для каждого калькулятора есть две страницы: одна — страница перед расчетом, а другая — страница результатов. В папке шаблона, где хранить файлы html5, вам нужно создать их там и использовать правильный в каждом маршруте калькулятора.

return render_template("result_clv.html")

return render_template("result_npv.html")

return render_template("result.html")

Веб-приложение Python — HTML5 + Jinja

Судя по пользовательскому интерфейсу и пользовательскому интерфейсу, этому приложению с несколькими расчетами в основном потребуется Jinja и несколько функций элементов HTML5.

1. Динамический контент Jinja

Jinja — это функция, которую вы можете использовать в кодировании html5 для подключения к динамическим и переменным для отображения динамического контента на основе фактических данных. Он начинается с

{%...%}

и заканчивается

{% endfor %}

. В фреймворке вы можете настроить переменную, которая соединяется с функцией или базой данных с помощью двойных фигурных скобок

{{ }}

2. идентификатор, класс = «столбец», класс = «ящик»

В HTML5 id представляет собой уникальный элемент, позволяющий различать другие элементы в том же фрагменте скрипта. Обычно мы будем использовать это для определенной области или элемента дизайна и оформления CSS, а также для отслеживания маркетинга.

Для класса очень распространено и популярно использование громоздких действий. Одно имя класса может использоваться в нескольких элементах. Вам удобно группировать область или блок с одинаковыми настройками.

3. Форма

Форма плюс действие соединяется с маршрутом вашей фляги в скрипте приложения.

<form action="/CLV" method="post">

Название действия должно совпадать с вашим конкретным маршрутом, к которому вы хотите подключиться и общаться. Вся передача данных будет происходить на основе имени, которое вы установите здесь.

CSS3

В этом приложении есть два знака и символа для назначения определенных команд оформления определенным элементам.

1. Начните с хеша #

Для элемента класса и значения формы вы можете использовать и начинать с хэша плюс имя, которое вы используете в элементе класса или формы.

2. Начните с точки.

Для элемента id вы можете использовать и начинать с точки плюс имя, которое вы используете в элементе id.

Sqlite3

В этом приложении я использую sqlite3, чтобы показать параметры расчета в селекторе на главной странице.

Прежде всего, мы используем аргумент select для получения данных из файла lousi2.db. Имя модуля — это имя столбца, которое я установил ранее в файле базы данных. Названием калькуляторов является имя таблицы. Мы используем fetchall() для представления выборки всех данных в столбце.

def get_db():

db = getattr(g, '_database', None)

if db is None:

db = g._database = sqlite3.connect('louis2.db')

cursor = db.cursor()

cursor.execute('''SELECT module from calculators'')

all_data = cursor.fetchall()

all_data = [str(val[0]) for val in all_data]

return all_data

Во-вторых, в скрипте html5 вам нужно ввести имя столбца и возвращаемую переменную в разделе Jinja. Более того, это селектор, поэтому нам нужно установить значение параметра, которое представляет собой полный списо. к данных модуля.

<form action="/add_items" method="POST">

<select name="select_url">

{% for module in all_data %}

<option value="{{ module }}">{{ module }}</option>

{% endfor %}

По поводу использования и подключения баз данных MySQL, SQL и MongoBD я выпущу еще одну статью.

Героку

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

https://www.easy2digital.com/automation/data/python-tutorial-26-create-a-shopify-bot-web-application-using-flask-and-heroku/

По поводу серверной части вроде alibabacloud + Домен выпущу еще статью

Полный набор скриптов HTML5, CSS5, Python, Flask Coding

Если вас интересует полный сценарий разработки веб-приложений на Python — мультикалькуляторы — NPV, P&L, CLV, подпишитесь на нашу рассылку , добавив сообщение «Веб-приложение Python — мультикалькулятор». . Мы отправим вам сценарий немедленно на ваш почтовый ящик.

Надеюсь, вам понравится читать «Разработка веб-приложений на Python — мультикалькуляторы — NPV, P&L, CLV». Если вы это сделали, пожалуйста, поддержите нас, выполнив одно из перечисленных ниже действий, потому что это всегда помогает нашему каналу.

• Поддержите мой канал через PayPal ( paypal.me/Easy2digital )
• Подпишитесь на мой канал и включите колокольчик уведомлений канала Easy2Digital Youtube .
• Подписывайтесь и лайкайте мою страницу Страница Easy2Digital в Facebook
• Поделитесь статьей в своей социальной сети с хэштегом #easy2digital
• Покупайте товары с кодом скидки Easy2Digital 10% OFF ( Easy2DigitalNewBuyers2021)
• Вы подписываетесь на нашу еженедельную рассылку, чтобы получать последние статьи Easy2Digital, видео и код скидки на продукты Buyfromlo и цифровое программное обеспечение.
• Подпишитесь на наше ежемесячное членство через Patreon, чтобы пользоваться эксклюзивными преимуществами ( www.patreon.com/louisludigital )