Создание формы входа с использованием Vue.js и Vuex

Введение

В этом проекте вы научитесь создавать функциональность входа с использованием Vue.js и Vuex. Цель проекта - помочь вам понять интеграцию компонентов Vue.js с системой управления состоянием на основе Vuex.

👀 Предпросмотр

🎯 Задачи

В этом проекте вы научитесь:

• Как понять структуру проекта и роль каждого файла
• Как выявить проблему в функции входа
• Как исправить функцию входа, изменив хранилище Vuex и компонент Vue

🏆 Достижения

После завершения этого проекта вы сможете:

• Разобраться, как структурировать проект Vue.js с использованием Vuex
• Применить Vuex для управления состоянием приложения
• Отлаживать и исправлять проблемы в приложении Vue.js
• Интегрировать Vuex с компонентами Vue.js

Разобраться с структурой проекта

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

Структура директории проекта следующая:

├── components
│   ├── login.js
│   └── panel.js
├── css
│   └── style.css
├── index.html
├── lib
│   ├── vue.min.js
│   └── vuex.min.js
└── store
    ├── BaseModule.js
    ├── UserModule.js
    └── index.js

Основные файлы и их роли:

1. index.html: Это главный HTML-файл, который является точкой входа в приложение.
2. components/login.js: В этом файле содержится Vue-компонент для страницы входа.
3. components/panel.js: В этом файле содержится Vue-компонент для приветственного панели.
4. store/BaseModule.js: В этом файле определяется базовый модуль Vuex.
5. store/UserModule.js: В этом файле определяется модуль Vuex для данных и действий, связанных с пользователем.
6. store/index.js: В этом файле объединяются модули Vuex и создается хранилище Vuex.

Нажмите кнопку Go Live в нижнем правом углу WebIDE, чтобы запустить проект.

Далее откройте "Web 8080" в верхней части ВМ и обновите ее вручную, чтобы увидеть страницу, и начальная страница выглядит так:

Выявить проблему

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

Для выявления проблемы необходимо внимательно прочитать соответствующий код в папке store, особенно файл UserModule.js, и связать его с вашими знаниями Vuex.

Исправить функциональность входа

1. Откройте файл index.html и найдите раздел TODO в теге <script>.

2. В разделе computed измените на следующие атрибуты:

   computed: {
     welcome() {
       return store.getters.welcome;
     },
     username() {
       return store.getters["user/username"];
     },
     token() {
       return store.getters["user/token"];
     }
   },
   

   Эти вычисляемые свойства позволят вам получать необходимые данные из хранилища Vuex.

3. В разделе methods обновите метод login следующим образом:

   methods: {
     login(username) {
       if (username) {
         store.commit("user/login", {
           username,
           token: "sxgWKnLADfS8hUxbiMWyb"
         });
         store.commit("say", "Logged in successfully, welcome back!");
       }
     }
   }
   

   Этот обновленный метод login отправит необходимые действия в хранилище Vuex для обновления статуса входа пользователя и отображения приветственного сообщения.

Тестировать функциональность входа

1. Сохраните изменения в файле index.html.
2. Обновите веб-страницу в вашем браузере.
3. Введите имя пользователя "admin" и нажмите кнопку "Подтвердить".
4. Теперь вы должны увидеть отображенную приветственную панель, как показано на изображении "Завершенный эффект".

Поздравляем! Вы успешно исправили функцию входа и внесли необходимые изменения в код.

Резюме

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