Как связать python и javascript
Обновлено: 05.05.2024
I'm trying to find out how to create a local connection between a Python server and a Javascript client using the JSON format for the data to be retrieved. Particularly, I need to make some queries on the HTML client side, send these queries to the server on JSON format and run them on the Python server side to search for data on a SQLite Database. And after getting the results from the database, send those results back to the client in JSON format too.
By now, I just can run the query on Python and code it on JSON like this:
I know this code does something alike (in fact it runs), because it calls a service on a server which returns data in JSON format (but the server in this example is NOT Python):
What I need is to know how should I run (locally) the python program to be an available running web-service and how should be the Javascript to retrieve the data from the python server.
I've looking for this on internet everywhere but I didn't find this answer anywhere because the only answers they give are on how to code JSON inside Python or inside Javascript but not connecting both. Hope somebody can help me on this.
В этой статья я хочу показать на небольшом примере, как же все таки создать простое и красивое десктопное приложение на HTML, CSS, JS и Python. В качестве библиотеки для связи всех компонентов будем использовать EEL.
Установка
Оговорюсь, что я работаю на windows 10 x64.
Для начала установим саму библиотеку выполнив простую команду:
pip install eel
После установки одной лишь библиотеки можно начинать наш путь.
Наше приложение будет выглядеть таким образом:
Логика приложения очень простая: при нажатии кнопки “рассчитать” считываются значения в поле для ввода рублей, полученные данные отправляются в Python, где происходит расчет курса валют. Python возвращает нам данные и мы выводим из через JS
Раскидываем по папкам
Разобьем теперь наш проект на модули. В папку “front” будем класть всё, что связано с графической частью нашего приложения. В папку “back” будем помещать все наши исходники на python. Еще создадим папку middle, в которую будем помещать методы, вызываемые из JS (об этом чуть позже). В Главной директории создадим файл main.py, он будет запускать наше приложение.
Логика на Python
В качестве теста реализуем простое приложение конвертер валют (да-да, банально, никому не надо, на гитхабе миллион проектов). Для этого на python установим библиотеку CurrencyConverter:
pip install currencyconverter
Теперь приступим к написанию логики на python. Реализуем метод, который на вход будет принимать сумму, валюту с которой нам надо перевести и валюту, на которую нам надо перевести. Создадим “convert.py” в директории “back” и запишем в него следующий код:
Теперь в директории “middle” создадим файл “mid_convert.py” и пропишем следующий код:
Что здесь вообще происходит? Файл “mid_convert.py” будет служит связующим звеном между JS и Python. Декоратор @eel.expose дает нашей программе понять, что функция, описанная ниже, может быть вызвана из JS. Таким образом, любая функция, которую мы в будущем захотим вызывать из JS, должна быть обернута декоратором @eel.expose. Очевидно, что не имеет смысла делать лишних модулей, если у вас простой проект, можно было обернуть декоратором функцию “convert_value” в модуле “convert.py”. В больших проектах разбиение программы на такие слои позволит легче расширять и оптимизировать код.
Подключаем Python к JS
Теперь подключим нашу логику на Python к самому JS. Для этого примера я использую простую страничку, сверстанную чисто при помощи HTML, CSS (или вы можете использовать популярные фреймворки, которые нужны вам для работы с графикой). Первым делом необходимо подключить библиотеку eel к самому JS:
Далее реализуем функционал кнопки “рассчитать”. По нажатию кнопки первым делом необходимо считать значение рублей и пойти по каждой валюте, чтобы перевести значение.
Обратите внимание на строку “let value_cur = await eel.convert_value_py(value_rub, "RUB", name_cur)();”. Важно, что вызов функции из питона происходит в асинхронном режиме, поэтому обязательно необходимо сделать асинхронной ту функцию, в которой есть вызов Python кода. При вызове функции из eel необходимо ставить пару (), где в первые круглые скобки будут передаваться наши аргументы.
Проверим, работает ли.
Как мы видим, все работает.
Запуск программы
Для запуска кода используем файл “main.py”. В нем импортируем библиотеку eel и всё, что мы писали в файле “min_convert.py” для того, чтобы при запуске проекта подтянуть все функции, которые мы оборачивали в eel.expose:
Теперь необходимо проинициализировать через eel ту директорию, где лежит front-end нашего приложения. При помощи команды eel.init(args). Далее для запуска самого приложения вызывает метод eel.start(args):
Метод eel.start принимает на вход несколько параметров (подробнее о них см. официальную документацию по eel). Самым интересным параметром является “mode”. При помощи него вы можете запустить свой проект, как в браузере, так и в виде отдельного приложения. Например, вы можете указать параметр “default”, в таком случае приложению будет запускать в браузере по умолчанию. Если у вас стоит google chrome, то указав параметр “mode=chrome” ваша программа откроется в виде отдельного приложения.
Также можно использовать chromium. Для этого скачиваем его с официального сайта. Разархивируем его в какую-нибудь папку и прописываем следующий код в нашем “main.py”:
Вывод
Как мы видим, то создавать красивые десктопные приложения с использованием Python в качестве языка для реализации основной логики не так сложно. Вы можете устанавливать какие угодно библиотеки, реализовать нужный код с использованием Python, а писать красивые интерфейсы на HTML,CSS и JS.
P.S. это моя первая статья на Habr, пишите Ваши пожелания, замечания и отзывы, буду рад увидеть любой комментарий.
Я нашел несколько отличных JavaScript-библиотек для построения диаграмм и сводных таблиц на своем сайте.
Все мои скрипты на Python. Как их оптимальней связать с Javascript? Графики должны обновляться 1-2 раза в сутки.
Я через ajax гружу JSON, а затем формирую массив данных нужного для библиотек формата. В таблицах просто указываю источник json. Но у меня данные динамические и могут загружаться отдельно от страниц. Если не меняются проще сгенерить тот же JSON и встроить в страницу.
Подскажите, данные планирую раз в сутки загружать в базу.
Получается я:
1)Загружаю данные в базу
2)Генерирую JSON и встраиваю в HTML с новыми графиками
3)Что дальше происходит?
Если я хочу заложить возможность, чтобы пользователь мог выбрать на сайте период построения данных и параметры может мне сразу начать использовать динамические данные, чтобы потом не переделыватЬ?
Для начала определитесь с обьемом данных для разового построения. JSON без разницы как вы его получите или как переменную в теле скрит тега или как ответ на отдельный запрос-отдельный будет быстрее. Лучше не более 5000 значений(например за год). Потом пишите функцию получения, можно получать готовые массивы элементов (дата, значение), а можно получить массив значени,й если они взяты в равные промежутки, и расчитать даты. Пройтись по нему циклом и создать нужного формата.
После того как данные сформированы, дается команда отрисовки графика. В параметрах графика указанно "окно" видимых данных его можно менять, не меняя самих данных - данные взяты за год, а окно неделя или месяц или заданный пользователем диапазон - сделать поля ввода двух дат(начало периода, конец периода). Более конкретно можно расписать если будет конкретное ТЗ.
Is it possible to integrate Python and JavaScript? For example, imagine you wanted to be able to define classes in JavaScript and use them from Python (or vice versa). If so, what's the best way? I'm interested not only if this is possible but if anyone has done it within a "serious" project or product.
I'm guessing it would be possible using Jython and Rhino, for one example, but I'm curious whether or not anyone's ever actually done this, and if there are solutions for other platforms (especially CPython).
For what it's worth, this SO answer presents a unified approach to sharing objects between JS and Python, and is implemented in this repo which simply wraps a NodeJS module bundled via webpack and exposes it as a Python Module.
13 Answers 13
From the above website:
pyjs is a Rich Internet Application (RIA) Development Platform for both Web and Desktop. With pyjs you can write your JavaScript-powered web applications entirely in Python.
@AppleGrew Is it possible to run pyjamas entirely in the browser (without any server-side components)?
This question is not exactly young, but there have come up some alternatives:
- "Skulpt is an entirely in-browser implementation of Python." - "A Python 3 implementation for client-side web programming" - "Python-like JavaScript without the extra overhead or quirks" - "Lean and mean Python 3.6 to JavaScript compiler with multiple inheritance, sourcemaps, static type checking and selective operator overloading." (also on Github)
Just to add my two cents, both Skulpt and Brython are toys rather than full-blown compilers/languages. RapydScript and Transcrypt will run circles around them performance-wise. In fact, the absence of performant Python interpreter in JS was the reason RapydScript was invented to begin with. RapydScript now has an added benefit of type safety, just like TypeScript. disclaimer: I'm the RapydScript maintainer.
Transcrypt can be pip-installed, nice if you don't wish to immerse yourself in the js ecosystem. RapydScript however seems to be the quickest transpiled option as far as I gathered so far. A nice array of options is described here. There is also Jiphy which seems unmaintained.
there are two projects that allow an "obvious" transition between python objects and javascript objects, with "obvious" translations from int or float to Number and str or unicode to String: PyV8 and, as one writer has already mentioned: python-spidermonkey.
there are actually two implementations of pyv8 - the original experiment was by sebastien louisel, and the second one (in active development) is by flier liu.
my interest in these projects has been to link them to pyjamas, a python-to-javascript compiler, to create a JIT python accelerator.
So there is already a Python program set up that runs on the console that I must build upon. I will be building a web GUI interface for the application using Javascript. How would I:
a. Go about handling the input/output of this Python program without touching the original code.
I assume your Python program communicates with the world via stdin/stdout? And what you need to do is "wrap" the program into something else that would allow communication with a browser? Is that a correct description of what you want to do?
4 Answers 4
a. To handle input/output of the program: Pexpect. It's fairly easy to use, and reading some of the examples distributed with it should teach you enough to get the basics down.
b. Javascript interface:
Well, I use gevent and it's built-in WSGI server. (look up what a WSGI server (another) is). I should note that this program will keep a state, so you can manage your open sessions by returning a session ID to your javascript client and storing your pexpect session in a global variable or some other container so that you can complete the program's input and output across multiple independent AJAX requests. I leave that up to you, however, as that is not as simple.
All my example will do is put the POST request in some after clicking something of your choice. (it won't actually work because some of the variables are not set. Set them.)
Heres the relevant parts:
Then the server:
If your program is Object Oriented, it'd be fairly easy to integrate this. EDIT: Doesn't need to be object oriented. and I have now included some Pexpect code
Another option I suggest is Nginx + uWSGI. If you would prefer that, I can give you some examples of that as well. It gives you the benefit of incorporating the webserver into the setup.
Читайте также: