Введение

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

Предпосылка:

1. HTML
2. CSS
3. Python; p
4. Базовые знания REST API.

Итак, приступим !!

Что мы строим

Мы создадим веб-приложение, чтобы получать расценки дня или случайные цитаты из API https://quotes.rest.

Предметы в нашем арсенале сегодня

1. Brython.js для использования Python в интерфейсе вместо JS 💻.
2. Bulma CSS для приличного пользовательского интерфейса 💄.
3. http://quotes.rest/ для получения 🔥 цитаты 😛. Начнем строить

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

Мы импортировали только важные библиотеки, такие как bulma.css, _2 _, _ 3_, а также в теле мы добавили onload=”brython()” для запуска функции brython() при загрузке страницы.

Тестирование стандартного кода

Просто вставьте ниже фрагмент между тегами тела

<body onload=”brython()”>
   <script type=”text/python”>
      from browser import document, alert
      alert(“Hello world!!”)
   </script>
</body>

Теперь откройте ваш index.html файл в браузере, вы увидите окно предупреждения с надписью Hello world!!, как показано ниже.

Теперь мы готовы к действию 😎

Каркасный интерфейс должен быть готов, прежде чем мы сможем начать писать наш скрипт на Python. Для этого нам нужно добавить немного HTML на нашу страницу, мы будем использовать предварительно запеченные компоненты Bulma, которые готовы к использованию, для нашего пользовательского интерфейса. После добавления кода ниже в наш index.html мы готовы написать некоторый Python.

после добавления этого файла в наш файл index.html, когда мы откроем его в нашем браузере, он будет выглядеть так:

Заставим это работать 🔥

В brython.js various модуле, который мы можем напрямую использовать в JavaScript , необходимо импортировать. Итак, сначала нам нужно импортировать все необходимые модули 😉.

Импорт модулей

Во-первых, нам нужно импортировать document modules из browser module
from browser import document

Получение элемента из DOM

Теперь мы можем выбрать конкретный элемент из DOM, используя либоdocument.select('<slector>'), или, если мы выбираем на основе идентификатора, мы можем напрямую использовать document['<ID>'].

Если выбрать метод select(), он вернет массив совпадающих объектов. Итак, мы выбрали значение индекса [0].

qodButtonElem = document.select(‘#qodButton’)[0] 
print(document.select(‘#qodButton’))

При выборе с помощью document['<ID>'] он вернет объекты с точным соответствием.

randomButtonElem = document[‘randomButton’]
print(randomButtonElem)

Вывод:

[<HTMLButtonElement object>]
<HTMLButtonElement object>

Привязка событий к элементам DOM

Чтобы привязать события к конкретному объекту, мы можем использовать .bind() функцию
element.bind('<event_name>', handlerFunction)

# Defining handler function
def getQouteOfTheDay(ev):
   print('Getting quote of the day')
def getRandomQuote(ev):
    print('Getting some random quote')
# Binding qodButtonElem to click event and passing handler function
qodButtonElem.bind('click',getQouteOfTheDay)
randomButtonElem.bind('click',getRandomQuote)

Теперь при нажатии кнопок мы увидим в журналах

Line 1: Getting quote of the day
Line 2: Getting some random quote

Совет: вы также можете использовать декоратор @bind(document['element_id'], “mouseover”) для привязки событий к некоторым функциям.

Получение данных с сервера (AJAX)

Мы получим нашу Цену дня из API https://quotes.rest/qod. Нам нужно использовать метод GET для получения данных из API с помощью AJAX.

Если вы использовали AJAX в JavaScript, вы помните, насколько громоздко использовать его в обычном JS. С brython.js все довольно просто.

Во-первых, нам нужно импортировать модуль ajax из browser
from browser import ajax

Теперь мы получаем данные внутри getQouteOfTheDay(), а также определяем новый метод для обработки события завершения GET call.

# Defining handler function
def getQouteOfTheDay(ev): 
   req = ajax.Ajax()
   req.bind('complete', onCompleteQod)
   req.open('GET','https://quotes.rest/qod', True)
   req.set_header('accept', 'application/json')
   req.send()
# Handler to handle what to do when request is completed
def onCompleteQod(req):
   if req.status == 200 or req.status == 0:
      obj = window.JSON.parse(req.text)
      print(obj["contents"]["quotes"][0]["quote"])
      print(obj["contents"]["quotes"][0]["author"])
   else:
      print("error " + req.text)

Понимая, что мы сделали,

1. Мы создали объект req с ajax.Ajax().

2. После этого мы имеем bind это req to 'complete' event и передаем ему функцию-обработчик onCompleteQod.

3. Затем мы открыли запрос с помощью метода open() и передали значения параметров для methodType, url и async.

4. И в итоге мы установили header и sent запрос.

5. После этого всякий раз, когда мы получали результат, мы обрабатывали его внутри onCompleteQod(req) метода.

6. Внутри мы проверили статус. Затем мы проанализировали req.text на Object , используя window.JSON.parse(), а затем распечатали результат из объекта.

Примечание. Чтобы использовать window.JSON.parse(), нам нужно импортировать модуль window из браузера как from browser import ajax
 Совет. Мы можем использовать большинство функций JavaScript внутри скрипта Python, используя
window.<FunctionName>()

Наконец, нам нужно обновить наш HTML

Чтобы добавить вывод в наш HTML, нам нужно выбрать определенные элементы для Author и Quote, мы можем сделать это как

# Selecting Author and title element by there ids
authorElem = document['author']
quoteElem = document['quote']
# Updating handler to add element in html dynamically
def onCompleteQod(req):
   if req.status == 200 or req.status == 0:
      obj = window.JSON.parse(req.text)
      quoteElem.text = '"'+obj["contents"]["quotes"][0]["quote"]+'"'
      authorElem.text = obj["contents"]["quotes"][0]["author"]
   else:
      print("error " + req.text)

Мы можем обновить внутренний текст элемента HTML с помощью
elem.text = 'Text here'

Совет: если вы хотите добавить новый элемент к элементу HTML, мы можем использовать оператор <=
как:
elem <= '<h1>Some Text</h1>'

Теперь, всякий раз, когда мы нажимаем кнопку «Цитата дня», мы получаем «Цену дня».

Точно так же мы реализуем случайную цитату с помощью этого https://quotes.rest/quote/random?language=en&limit=1 API, но для этого API потребуется секретный ключ, который вы можете создать из https://quotes.rest/

Реализация получения случайной цитаты следующая:

# Updating getRandomeQuote to hit Random URL 
def getRandomQuote(ev):
   req = ajax.Ajax()
   req.bind('complete', onCompleteQod)
   req.open('GET', 'https://quotes.rest/quote/random?   language=en&limit=1', True)
   req.set_header('accept', 'application/json')
   req.set_header('X-TheySaidSo-Api-Secret', '<Your_Secret_API_KEY')
   req.send()

Полный код на Python будет выглядеть так:

Ага! Наконец-то наше маленькое приложение готово для получения классных цитат с сервера. И что самое приятное, мы здесь даже не используем ни одной строчки JavaScript.

Вывод

Сегодня мы узнали так много о brython.js и о том, как он может заменить JavaScript из внешней разработки. Но мы рассмотрели только верхушку айсберга того, на что способен brython.js. С brython.js можно делать и много других вещей. После прочтения этой статьи просмотрите страницу документации, ее легко понять и приступить к работе. Спасибо, что прочитали эту статью. Надеюсь, вам понравилось. Если у вас есть какие-либо сомнения или вопросы, свяжитесь со мной ».

Репозиторий Github: https://github.com/AdityaVashishtha/BringinPythonToFrontEnd

Рабочая демонстрация:
https://adityavashishtha.github.io/BringinPythonToFrontEnd/
(Случайная цитата не работает из-за отсутствия ключа API)

Дополнительная литература / ссылки

Https://brython.info/index.html
https://brython.info/static_doc/en/intro.html?lang=en
https://youtu.be / VJj-H4we71g