В этом посте я хотел бы создать с вами финансовое приложение Vue.js для получения финансовых отчетов и цен на акции с помощью бесплатного API.
В конце поста, если вы будете следовать ему, вы создадите что-то похожее на то, что показано на изображении ниже.
В верхней части у нас будет панель поиска, чтобы ввести любую компанию, которую мы хотим найти. Ниже формы поиска у нас будет цена акций данной компании.
График слева будет отображать годовой доход за последние 4 года. В таблице справа будет показан отчет о прибылях и убытках компании за последние два периода.
Все, что вам нужно, это установить Node и Vue.JS. Мы будем использовать Bootstrap Vue, чтобы страница выглядела лучше, и Axios, чтобы сделать http-запрос. Для построения графика мы будем использовать пакет Echart.
Инициализация приложения Vue JS
Прежде всего убедитесь, что у вас установлены Node JS и Vue JS. Если у вас есть Node Js, вы можете просто использовать команду npm из терминала, чтобы установить Vue JS. Вы можете следовать инструкциям, приведенным в Документации Vue.js.
Давайте начнем с создания новой папки проекта на вашем Рабочем столе, которая будет содержать все файлы проекта. Я назову папку web_vue.
Затем откройте терминал в папке, которую мы только что создали, и запустите приведенную ниже команду, чтобы проект Vue JS был создан автоматически для нас:
vue create financials
На этапе создания нам нужно будет вручную выбрать функции, которые мы хотим установить в нашем проекте. Для нашего финансового приложения я выбрал Babel и Router. Затем сохраните все файлы конфигурации в файле package.json.
Это создаст вызов проекта Vue.js Financials и все необходимые файлы настройки и конфигурации. Теперь в терминале перейдите в новую папку financials и запустите сервер, чтобы увидеть созданный для нас стартовый шаблон Vue.js:
cd financials
npm run serve
Зайдя на страницу localhost в браузере, мы можем увидеть целевую встроенную страницу Vue JS нашего проекта. Давайте удалим начальную страницу, предоставленную Vue JS, и начнем создавать свою собственную.
Прежде чем перейти к части кодирования, давайте установим все остальные пакеты, которые нам понадобятся для сборки приложения. Если сервер запущен, остановите его в терминале с помощью ctrl + c, а затем выполните следующие команды, чтобы начать установку:
npm install axios
npm install bootstrap-vue
npm install echarts vue-echarts
Ниже вы можете найти ссылку на документацию пакетов, которые мы только что установили:
Кодирование нашего финансового приложения Vue JS
Затем давайте начнем создавать наш собственный код в редакторе исходного кода, который вы обычно используете. Давайте добавим все установленные пакеты, чтобы наше приложение Vue.js распознало их. Для Echarts нам нужно создать новую папку с именем plugins в папке src и новый файл с именем « echarts.js». Затем в файл «echarts.js» мы можем добавить приведенный ниже код конфигурации, чтобы компоненты Vue JS могли использовать echarts:
Затем нам также нужно настроить Bootstrap и Echarts в файле main.js. Импортируйте Bootstrap и Echarts, как показано ниже.
После добавления Bootstrap и Echarts в файле main.js должно получиться что-то похожее на приведенный ниже код.
После импорта всех необходимых файлов нам нужно переименовать файл HelloWorld.vue, созданный при запуске проекта, в mainPage.vue. Теперь мы готовы добавить наш код html, скрипт, раздел логики и стиля.
Поскольку мы изменили имя компонента с HelloWorld.vue на mainPage.vue, нам также необходимо обновить наш Home.vue. > посмотреть. В первый div с классом home мы включаем имя нашего компонента mainPage.
Затем в Home.vue импортируйте mainPage.vue из components/mainPage.vue, чтобы он мог отображаться с помощью Vue.js при инициализации. наш сервер.
Обновив представление Home.vue, мы можем перейти к нашему компоненту mainPage. Чтобы вам было проще ориентироваться, а поскольку компонент mainPage.vue содержит более 130 строк кода,я разделил код на три части: шаблон, скрипт. em> и стиль. Я объясню один за другим ниже.
Если что-то непонятно, напишите комментарий или посмотрите мой видеоурок на Youtube, где я шаг за шагом объясняю, как собрать приложение:
В нашем шаблоне раздел в компоненте mainPage.vue мы будем динамически отображать название и цену акций, которые мы передается в нашу форму поиска с помощью this.stock в теге container.
Наша отправка формы вызовет метод updateStock, который передаст название акции в качестве аргумента для выполнения запроса GET к конечной точке API.
Наконец, мы также включаем директиву v-if, чтобы содержимое отображалось в шаблоне HTML только в том случае, еслиloaded = True. Обратите внимание, что в нашем разделе сценария, показанном ниже, loaded принимает значение True только тогда, когда вызов API был успешно выполнен с помощью метода updateStock, и поэтому у нас есть данные для построения b-таблицы и диаграммы.
Надеюсь, часть шаблона понятна. Теперь перейдем к разделу сценариев. Сначала мы импортируем axios для выполнения вызовов http и инициализируем все необходимые переменные в нашей функции данных.
В нашем разделе методов мы сначала создадим метод updateStock, который позволит нам получать все финансовые данные, отправив HTTP-запрос через Axios к конечной точке API. Затем мы анализируем ответ, чтобы извлечь необходимые финансовые данные.
Создание нашей таблицы
Для нашей таблицы мы создаем массив с именем, который будет включать все элементы отчета о прибылях и убытках. Затем мы преобразуем числа в более удобный формат, применяя функцию formatNumber(number). Поля массива содержат названия заголовков таблицы. Затем мы передали эти два массива в наш HTML-шаблон с помощью тега vue-bootstrap b-table.
Создание нашей гистограммы
Теперь мы можем перейти к части диаграммы. Как упоминалось ранее, мы используем пакет под названием echarts. Мы извлекаем необходимые данные для нашей диаграммы с помощью метода plotStock. В этом случае нам нужна дата для оси x и Доход для оси y. Мы можем легко извлечь их из массива allfinancials, созданного при запуске метода updateStock.
Мы передали массивы объектам xaxis и yaxis в качестве данных. Тип графика будет гистограмма, поэтому мы также передаем его как значение в массив series. Наконец, мы включаем заголовок в объект Заголовок.
Метод plotStock вызывается из метода updateStock. Поэтому у нас будут все необходимые данные для графика, когда в нашем приложении мы отправим форму со значением тикера. Затем шаблон в HTML обеспечит создание диаграммы на основе значений, включенных в объект ChartOptionsBar, который был создан в методе plotStock.
Получение цены акции
Наконец, мы создаем метод stockPrice, чтобы получить из API цену акций компании, переданную в форму поиска, и сохранить ее в переменной с именем stockprice, который будет отображаться в шаблоне html.
Добавление стилей
Чтобы завершить приложение, мы можем добавить несколько стилей в наш mainPage.vue под закрывающим тегом script:
Теперь у нас есть весь необходимый код. Просто запустите npm run serve в терминале и наслаждайтесь своим новым финансовым приложением Vue.js.
Это все, что нам нужно сделать, чтобы создать потрясающее финансовое приложение Vue.js.
Как упоминалось выше, пожалуйста, не стесняйтесь добавлять свои комментарии, если что-то неясно, или смотрите видео на Youtube, чтобы писать код вместе со мной.
Первоначально опубликовано на https://codingandfun.com 26 января 2020 г.
