Создание бюджетного менеджера с помощью Vue.js и Node.js (Часть IV)

Приложение готово и развернуто.

Https://gdomaradzki.github.io/focus-budget-manager/#/

Еще раз здравствуйте и добро пожаловать в четвертую часть этой серии руководств, где мы узнаем, как создать полное приложение для управления бюджетом на Vue.js и Node.js.

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

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

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

Репозиторий GitHub для этого руководства находится здесь.

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

Что мы будем делать сегодня

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

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

Улучшение наших компонентов

Начнем с того, что переименуем нашу папку Бюджет в Список. И мы также переименовываем все три его компонента: BudgetList в List, BudgetListHeader в ListHeader и BudgetListBody на ListBody

Теперь откройте компонент Список:

Мы изменили имя нашего класса, чтобы оно соответствовало нашему компоненту, а также изменили имена слотов.

Откройте компонент ListHeader:

Мы также изменили имена наших классов и изменили наш шаблон на рендеринг из опоры, таким образом, мы можем повторно использовать этот компонент на других страницах.

Теперь о нашем компоненте ListBody:

Мы также сделали наш компонент ListBody для рендеринга из опоры.

Теперь откройте компонент Домашняя страница:

Мы изменили наш импорт и теги, чтобы они соответствовали нашим переименованным компонентам, добавили снэк-бар, чтобы мы могли отображать ошибку в случае, если нам не удалось получить данные, мы также добавили новый массив в данные нашего компонента: budgetHeaders и данные, необходимые для нашей закусочной.

Мы будем использовать budgetHeaders, чтобы отображать правильные заголовки в нашем списке.

Мы также внесли несколько изменений в наш метод getAllBudgets:

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

Этот метод принимает массив в качестве первого аргумента и неизвестное количество аргументов, которые создадут массив с именем options с использованием Spread Operator.

Наш метод получит каждый элемент в нашем целевом массиве, который в данном случае является нашим бюджетом, а затем создаст новый объект с именем parsed.

Этот объект будет содержать все параметры нашего массива options, а затем будет помещен в массив parsedData, который возвращается.

И, наконец, мы catch нашу ошибку (если она есть), активируя нашу закусочную.

Теперь нам нужно отредактировать наш маршрутизатор, поэтому перейдите в папку маршрутизатора и откройте index.js:

Мы исправили импорт и имена компонентов, теги и пути, а также внесли небольшое улучшение в наш router.beforeEach, поскольку мы будем защищать каждый маршрут, который не является login, мы удалим мета из маршрута нашей домашней страницы.

Предоставление информации о наших клиентах

Вместо того, чтобы создавать новую страницу только для нашего списка клиентов, мы будем использовать нашу домашнюю страницу, поэтому давайте вернемся к нашему компоненту Home и создадим новый массив данных наших компонентов с именем clients , массив с именем clientHeaders и логическое значение budgetsVisible:

А теперь добавляем наш новый метод:

Давайте вызовем этот метод, когда наш компонент смонтирован:

Как теперь отображать информацию о наших клиентах? Все просто, нам нужно внести еще несколько изменений в наш компонент Home:

Теперь мы передаем наш budgetsVisible в наш заголовок, а также используем его в троичной системе для рендеринга правильных данных. Наш заголовок также получает toggleVisibleData, где мы инвертируем значение budgetsVisible. Причина, по которой мы передаем реквизиты нашему заголовку, заключается в том, что мы можем внести в него несколько улучшений, которые я объясню через мгновение, мы также используем тройные параметры в нашем list-header и list-body.

Итак, давайте сейчас улучшим наш заголовок:

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

Наша кнопка также будет изменять цвета и текст в зависимости от значения budgetsVisible, она генерирует событие при щелчке, чтобы изменить значение логического.

Мы также внесли несколько изменений в наш scss, так что не забывайте об этом.

И наконец, улучшения в нашем компоненте ListBody:

Мы внесли аналогичные изменения, как и в наш компонент Заголовок.

Как наше приложение выглядит на данный момент

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

И при перечислении наших клиентов:

Теперь, когда мы можем видеть наши зарегистрированные бюджеты и клиентов, давайте создадим плавающую кнопку действия (FAB), которая будет удерживать наши кнопки добавления. Все еще в нашем компоненте Главная:

Мы добавляем это чуть ниже нашего v-snackbar, эта FAB содержит три кнопки, первая действует как активатор для нашей FAB, вторая - для добавления бюджетов, а последняя - для добавления клиентов. Теперь давайте добавим новое логическое значение к нашим данным Home’s:

Мы добавили логическое значение fab, которое будет указывать, активен наш FAB или нет.

Что дальше

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

Я знаю, что эта часть была намного короче, чем предыдущие, и мы не затронули много вопросов. Но следующая часть будет последней, и у нас будет много нового, так что не забудьте проверить еще раз через несколько дней!

Спасибо, что прочитали, и не забудьте в ближайшее время заглянуть в следующую часть!

Вы можете найти больше обо мне, подписавшись на меня, на github @gdomaradzki.