В последнее время данные стали очень важной частью нашей жизни, и понимание этих данных не менее важно. Нет смысла иметь данные, если вы не можете их отслеживать или анализировать, особенно если эти данные имеют какое-либо отношение к финансам.
Именно поэтому мы будем строить график отслеживания расходов и доходов с функциями в реальном времени с помощью Pusher. На нашей интерактивной панели управления будет линейный график, на котором отображаются ваши доходы и расходы за каждый день. Вы сможете добавлять новые расходы и доходы и видеть обновление диаграммы в режиме реального времени.
Диаграмма приборной панели будет работать на базе Node.js + Express в качестве внутреннего сервера и Vue + vue-chartjs для внешнего интерфейса, загружаемого с помощью vue-cli.
Строим приложение с помощью vue-cli
vue-cli - это простой интерфейс командной строки для создания проектов Vue.js. Мы установим vue-cli, а затем воспользуемся им для загрузки приложения с использованием шаблона веб-пакета со следующими командами:
npm install -g vue-cli
vue init webpack-simple realtime-chart-pusher
- Совет: шаблон webpack-simple - это простая установка webpack + vue-loader для быстрого прототипирования. Подробнее об этом можно прочитать здесь.
Настройка сервера Node.js
Следующее, что нужно сделать, - это настроить сервер, который поможет нам общаться с Pusher. Я предполагаю, что в вашей системе установлены и Node, и npm. Затем мы установим зависимости, которые будем использовать для сервера Node.
npm install body-parser express nodemon pusher
- Совет: nodemon будет следить за файлами в каталоге, в котором был запущен nodemon, и, если какие-либо файлы изменятся, nodemon автоматически перезапустит ваше приложение node.
Еще одна вещь, нам понадобится точка входа / файл для нашего сервера Node. Мы можем сделать это, создав server.js
файл в корне приложения.
Настройка толкателя
Для реализации функций реального времени нам понадобится мощь Pusher. Если вы еще этого не сделали, зарегистрируйте учетную запись Pusher и создайте новое приложение. Когда ваше новое приложение будет создано, получите свой app_id, ключи и кластер из панели управления Pusher.
Настройка приложения
Теперь, когда у нас есть учетная запись Pusher и установлены зависимости, необходимые для серверной части Node.js, приступим к сборке.
Напишем код для server.js
файла.
Давайте посмотрим, что здесь происходит. Нам нужны Express, path, body-parser и Pusher, и мы инициализировали express () с помощью app.
Мы используем body-parser для извлечения всей основной части входящего потока запросов и предоставления ее в req.body.
Pusher также инициализируется учетными данными приложения и кластером из вашей панели управления. Обязательно обновите это, иначе сервер Node не будет иметь подключения к панели управления. Наконец, сервер Node будет работать на порту 5000.
Следующее, что нужно сделать, это определить маршрут нашего приложения, а также добавить фиктивные данные для диаграммы расходов и доходов. Обновите файл server.js следующим образом.
Во-первых, у нас есть объект CostList с данными о расходах и доходах за определенные дни.
app.get('/finances', (req,res) => {
res.send(expensesList);
});
Этот маршрут просто отправляет объект CostList в формате JSON. Мы используем этот маршрут для получения данных и отображения во внешнем интерфейсе.
Маршрут /expense/add
действительно многое делает. Это POST-маршрут, что означает, что мы будем ожидать некоторых входящих данных (в данном случае, суммы расходов и суммы дохода).
Затем мы переносим эти новые доходы и расходы в существующие, после чего также отправляем обновленный список расходов в Pusher.
Наконец, мы отправляем JSON в качестве ответа на маршрут, содержащий последний доход, расход, дату и обновленный список расходов.
Ваш последний server.js
должен выглядеть так:
Создание внешнего интерфейса (Vue + vue-chartjs)
Большая часть работы с внешним интерфейсом будет выполняться в папке src/components
. Перейдите в этот каталог, и вы должны увидеть файл Hello.vue
. Вы можете удалить этот файл или переименовать его в Home.vue
, так как нам понадобится Home.vue
файл внутри папки компонентов.
Прежде чем мы приступим к построению диаграммы и ее отображению, нам нужно сделать несколько вещей. Откройте файл App.vue
в папке src
и замените следующим кодом:
Затем мы установим vue-chartjs, momentjs, pusher-js (библиотека Javascript Pusher) и axios (мы будем использовать axios для запросов API). а затем добавьте их в приложение Vue.js.
npm install axios vue-chartjs pusher-js moment
Как только это будет сделано, мы импортируем аксиомы и зарегистрируем их в нашем приложении. Мы можем сделать это, открыв файл main.js
в папке src
.
Затем давайте создадим компонент Vue.js, который поможет отображать нашу диаграмму. Мы собираемся использовать это, чтобы указать, какой тип диаграммы мы хотим, настроить его внешний вид и поведение.
Затем мы импортируем этот компонент в компонент Home.vue
и будем использовать его там. Это одно из преимуществ vue-chartjs
, он работает путем импорта базового класса диаграммы, который мы затем можем расширить. Давайте продолжим и создадим этот компонент. Создайте новый файл с именем LineChart.vue
внутри папки src/components
и отредактируйте его, используя приведенный ниже код.
В блоке кода выше мы импортировали линейную диаграмму из vue-chartjs и модуля mixins. Chart.js обычно не предоставляет возможность автоматического обновления при изменении набора данных, но это можно сделать в vue-chartjs с помощью следующих примесей:
- reactiveProp
- reactiveData
Эти миксины автоматически создают chartData
как опору или данные и добавляют наблюдателя. Если данные изменились, диаграмма обновится. Подробнее здесь.
Кроме того, функция this.renderChart()
внутри функции mounted
отвечает за рендеринг диаграммы. this.chartData
- это объект, содержащий набор данных, необходимый для диаграммы, и мы получим его, включив его в качестве опоры в Home.vue
шаблон, this.options
содержит объект параметров, который определяет внешний вид и конфигурацию диаграммы.
Теперь у нас есть LineChart
компонент, но как мы можем увидеть нашу диаграмму и протестировать ее функциональность в реальном времени? Мы делаем это, добавляя LineChart
в наш компонент Home.vue
, а также подписываясь на наш канал Pusher через pusher-js.
Откройте файл Home.vue
и отредактируйте следующим образом:
fillData
Эта функция вызывается сразу после того, как приложение смонтировано, и она в основном делает запрос API к бэкэнду Node (/ finances) и извлекает список расходов.
Запрос GET направляется к маршруту /finances
Node.js, который, в свою очередь, возвращает последние expensesList
, а затем мы обрабатываем эти данные с помощью .map
Javascript и присваиваем их различным переменным.
addExpenses
В приведенном выше блоке кода просто используется маршрут метода POST к /expense/add
для обновления expensesList
(помните, что маршрут /expense/add
на сервере узла отправляет обновленный expensesList
на панель Pusher Dashboard) вместе с данными о доходах, расходах и дате.
Затем он использует данные, полученные от Pusher через channel.bind
, для повторного построения линейной диаграммы и автоматически добавляет новую запись в диаграмму.
fetchData
Эта функция вызывается после создания экземпляра Vue, она также отслеживает изменения в наборе данных диаграммы через Pusher и автоматически обновляет линейную диаграмму.
Ваш последний файл Home.vue должен выглядеть так:
Еще кое-что!
Прежде чем мы сможем запустить наше приложение, нам нужно сделать что-то, что называется проксирование API. Прокси-сервер API позволяет нам интегрировать наше приложение vue-cli с внутренним сервером (в нашем случае - сервером узла). Это означает, что мы можем запускать сервер разработки и серверную часть API параллельно и позволять серверу разработки передавать все запросы API на фактическую базу данных.
Мы можем включить проксирование API, отредактировав параметр dev.proxyTable
в config/index.js
. Вы можете редактировать с помощью кода ниже.
После этого мы, наконец, готовы к просмотру нашего приложения, и вы можете запустить npm run dev
, чтобы запустить приложение.
Вот и все! На этом этапе у вас должна быть диаграмма информационной панели в реальном времени, которая обновляется в реальном времени.
Вы можете посмотреть живую демонстрацию здесь или перейти к коду всего приложения, которое размещено на Github для вашего ознакомления.
Заключение
Мы увидели, как построить базовую линейную диаграмму с помощью ChartJS во Vue с помощью vue-chartjs, а также добавили функции реального времени благодаря Pusher.
Затем мы увидели, как использовать reactiveProps, чтобы ChartJS обновлял свой набор данных, если в наборе данных произошли изменения. Мы также увидели, как использовать Pusher для запуска событий на сервере и их прослушивания на стороне клиента с помощью JS.
Вы недавно создали что-нибудь крутое с Pusher, может, график? Сообщите об этом в ответах ниже.
Этот пост впервые появился в блоге Pusher.