Создание веб-интерфейса электронной коммерции с помощью Vue.js

Часть 2. Регистрация и вход в приложение для электронной коммерции

Теперь мы создадим интерфейс очень важной функции на каждом сайте электронной коммерции - Войти и зарегистрироваться, используя Vue.Js.

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

Живая демонстрация

Вы можете увидеть в действии Sign In & Sign Up API (интегрированный с Vue.Js) по ссылке, указанной ниже. Вы сможете испытать эту функцию, если нажмете кнопки - Войти ИЛИ Зарегистрироваться.

Backend Tutorial

Предварительные требования

1. Знание о Vue.Js и Vue.Js CLI
2. JavaScript
3. Редактор кода (например, Microsoft Visual Code с расширением Veture)
4. Хороший браузер (например, Google Chrome)

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

Поскольку это руководство основано на уже проделанной нами работе, рекомендуется также изучить следующие руководства.

Структура проекта

Страницы продуктов и категорий уже разработаны в нашем интерфейсе электронной коммерции с использованием Vue.Js 3 framework. На данный момент у нас есть следующая структура проекта и внешний вид.

Теперь мы опишем следующие каталоги: -

• public - содержит основной HTML-файл нашего проекта.
• src / assets - хранит мультимедийные файлы, такие как изображения, логотипы и т. д.
• src / components - хранит все повторно используемые компоненты нашего проекта. Эти компоненты не уникальны для определенного маршрута.
• src / router - содержит файл index.js, в котором записываются все маршруты.
• src / views - хранит все компоненты роутера. Это компоненты, которые отображаются в соответствии с текущим маршрутом.

Помимо этого, у нас есть еще несколько важных файлов.

• App.vue - это корневой компонент нашего проекта.
• main.js - это отправная точка нашего проекта. Здесь мы импортируем наш корневой компонент App.vue, файл нашего маршрутизатора index.js и метод createApp. После этого мы монтируем наш корневой компонент в DOM, используя следующий оператор:

Дизайн API

Мы разработали WishList API для нашего бэкэнда в предыдущем руководстве. Вы можете попробовать этот API, используя следующую ссылку Swagger.

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

Ниже приведены конечные точки API для

1. Получите список всех пользователей
2. Войдите в систему с именем пользователя и паролем
3. Зарегистрируйтесь и создайте имя пользователя и пароль

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

Вход POST

Тело :

Ответить:

• Обратите внимание, что ответ возвращает токен. Мы должны сохранить этот токен в глобальном объекте, потому что другие конечные точки API, такие как конечная точка API списка желаний, могут использовать этот токен для распознавания пользователя.

POST-регистрация

Тело:

Ответ:

Интерфейсный дизайн

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

• Мы собираемся создать отдельные страницы входа, входа и администратора.
• Страница администратора будет ограничена авторизованными пользователями. Если кто-то попытается получить доступ к странице администратора без входа в систему, он / она будет перенаправлен обратно на страницу входа.
• Чтобы упростить доступ к страницам администратора и входа, мы разместим две ссылки на верхней панели навигации.

• Кроме того, мы свяжем страницы входа и регистрации друг с другом, разместив ссылку внизу каждой страницы.

Давайте код

Теперь приступим к написанию кода.

Давайте создадим необходимые компоненты

Даже если мы можем создавать компоненты Vue.js вручную, легко использовать генератор компонентов. Мы будем использовать пакет под названием vue-generate-component для создания компонентов Vue.js. Установите пакет vue-generate-component с помощью следующей команды.

npm install -g vue-generate-component

После установки пакета vue-generate-component сгенерируйте три компонента для страницы регистрации, входа и администратора. Мы будем использовать команду vgc с флагом -s для создания однофайловых компонентов Vue (SFC).

cd src/views
vgc -s Admin
vgc -s Signup
vgc -s Signin

Теперь вы получите три пустых файла компонентов Vue в папке views, содержащих блок кода, подобный приведенному ниже.

Сделайте их доступными!

После того, как мы создали компоненты, вам нужно сделать их доступными, создав маршруты для каждого компонента. Откройте файл src/router/index.js и добавьте следующие маршруты в массив routes.

Запустите сервер разработки, выполнив следующую команду из корня папки проекта или нажав небольшую кнопку запуска перед командой serve в разделе NPM SCRIPTS.

npm run serve

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

http://localhost:8080/signin
http://localhost:8080/signup
http://localhost:8080/admin

Разрешить пользователям самостоятельно регистрироваться с помощью регистрационной формы

Давайте сначала начнем с формы регистрации. Теперь у нас есть пустые компоненты для каждой страницы. Давайте сначала создадим нашу страницу регистрации. Он будет содержать форму с обязательными полями для регистрации пользователя. Измените компонент Signup.vue следующим блоком кода.

Поскольку мы используем Bootstrap в нашем приложении, оно будет отображаться со стилями начальной загрузки по умолчанию. Атрибут required в каждом элементе формы будет запускать проверку формы HTML5 перед ее отправкой.

Обратите внимание, что мы определили наши данные в компоненте и связали каждое поле формы с соответствующим полем данных с помощью директивы v-model. Директива v-model используется для создания двусторонней привязки данных.

Подождите, что такое двусторонняя привязка данных?

• Это означает, что любые изменения данных в элементах представления (например, в полях ввода, текстовых областях и флажках) должны немедленно отражаться в базовой модели (простой объект JavaScript с полями данных, вы также можете рассматривать его как переменную).
• То же самое верно и для других способов, т.е. любые изменения данных в модели немедленно распространяются на соответствующие представления.
• Проще говоря, всякий раз, когда данные приложения меняются, пользовательский интерфейс также изменяется, и наоборот.

Хорошо, вернемся к руководству. Теперь, если мы запустим приложение и перейдем к http: // localhost: 8080 / signup, вы увидите пользовательский интерфейс, подобный следующему.

Теперь, когда мы создали форму, нам нужно отправить ее данные на сервер. Для этого мы должны вызвать /user/signup backend API с данными, заполненными в UI. Мы будем вызывать API (т.е. отправлять форму), когда пользователь нажимает кнопку «Зарегистрироваться».

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

Давайте добавим отдельный метод для вызова API. Измените раздел methods под тегом <script> следующим образом.

Обратите внимание на следующее: -

• Мы используем axios библиотеку для вызова API.
• swal - это функция, аналогичная alert функции JavaScript.
• Функция e.preventDefault() вызывается, чтобы избежать поведения по умолчанию, которое заключается в отправке формы и обновлении страницы, когда пользователь нажимает кнопку «Отправить».

Теперь мы должны вызывать эту функцию всякий раз, когда пользователь отправляет форму, либо нажав кнопку «Отправить», либо нажав клавишу «Enter». Это можно сделать, добавив директиву v-on:submit к элементу формы следующим образом.

Вы сказали, что мы будем использовать v-on:submit. Не так ли?

Да, конечно. @submit - это сокращение от v-on:submit. Хотя префикс v- предоставляет визуальную подсказку для определенных атрибутов Vue.js в наших шаблонах, он может быть подробным для некоторых часто используемых директив. Поэтому Vue предоставляет специальные сокращения для директив v-on и v-bind, поскольку это наиболее часто используемые директивы. @ для v-on и : для v-bind.

Теперь мы можем успешно заполнить форму и зарегистрировать пользователей. Но, как вы можете видеть, http://remotedevs.org:8080/api/ часть URL-адреса жестко запрограммирована в компоненте и, возможно, повторяется во многих других компонентах. Мы рекомендуем переместить этот базовый URL-адрес в обычное место, чтобы его можно было легко изменить в случае, если хост API изменится в будущем.

Поскольку компонент App.vue является базовым компонентом для всех других компонентов, давайте определим наш базовый URL-адрес в этом файле. Добавьте следующий блок кода в компонент App.vue, если его еще нет.

Затем мы можем привязать это значение к свойству элемента <router-view>. Как мы упоминали в предыдущих руководствах, этот элемент <router-view> будет заменен соответствующими компонентами в соответствии с определениями маршрутизатора. Следовательно, это свойство baseURL будет доступно в любых компонентах, которые будут заменены маршрутизатором. Обратите внимание, что мы использовали сокращение : вместо v-bind, которое объяснялось ранее.

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

Теперь наша страница регистрации завершена. Давайте спроектируем и реализуем функцию входа в систему.

Разрешить пользователям входить в приложение

Теперь, когда наша страница регистрации запущена и работает, давайте приступим к реализации страницы входа в наше приложение. Страница входа в систему должна содержать два поля для ввода адреса электронной почты и пароля. Чтобы создать шаблон HTML, откройте компонент Signin.vue и измените его, как показано в следующем блоке кода.

Теперь запустите приложение и перейдите к thehttp://localhost:8080/signin. Затем вы увидите пользовательский интерфейс, подобный следующему.

Теперь мы создали форму для входа. Теперь нам нужно вызвать user/signIn серверный API с данными для входа, когда пользователь нажимает кнопку «Войти». Измените раздел method под тегом <script>, чтобы добавить для этого отдельный метод.

Примечание:-

• Если вы не смогли понять цель localStorage.setItem(), не волнуйтесь. Мы объясним это позже в статье.

Теперь эта sigin функция должна вызываться всякий раз, когда пользователь отправляет форму. Это можно сделать, добавив директиву v-on:submit в элемент формы следующим образом. Теперь, если вы заполните форму с правильными данными для входа и нажмете кнопку «Войти», вы увидите предупреждение об успешном завершении.

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

Подождите, а что такое локальное хранилище?

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

Хорошо, вернемся к руководству

Получив токен от API, мы сохраним его в методе localStorage with localStorage.setItem(). Затем пользователь должен быть перенаправлен обратно в предыдущее местоположение маршрутизатора. Это можно сделать, заменив предупреждение об успешном входе в систему следующим блоком кода.

Теперь попробуйте войти в систему из пользовательского интерфейса и проверьте вкладку «Приложение» в консоли разработчика веб-браузера. Вы можете видеть, что наш token сохранен в локальное хранилище.

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

Измените HTML-код кнопки «Войти», signin метод, mounted() функцию и раздел style следующим образом.

Видимость счетчика загрузки будет установлена ​​на true, когда он начнет выполнять внутренний вызов API. Обратите внимание, что мы использовали блок finally() для остановки счетчика и метод mounted(), чтобы указать поведение счетчика по умолчанию при загрузке страницы.

Сделаем зону ограниченного доступа! - Страница администратора

Теперь мы добавим страницу администратора и ограничим ее только зарегистрированными пользователями. Измените компонент Admin.vue с помощью следующего блока кода, чтобы

В функции mounted() мы проверили значение token, которое сохраняется в localStorage при входе в систему. Теперь, если вы попытаетесь получить доступ к странице администратора без входа в систему, вы будете перенаправлены на страницу входа. Команда $router.push() используется для перехода пользователя на страницу входа вместо метода $router.replace(). Это позволит пользователю перенаправить обратно на ту же страницу после входа в систему.

Добавьте ссылки для навигации

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

Это добавит навигационные ссылки «ADMIN» и «SIGNIN» на верхнюю панель навигации, как показано ниже.

Давайте добавим функцию выхода

Хорошо, как видите, в нашем приложении все еще отсутствует одна важная функция. Должен быть способ выйти из системы после входа в систему. Кроме того, ссылка для выхода должна отображаться только после входа в систему, а ссылка для входа должна быть скрыта одновременно. Это можно сделать, проверив наличие token при рендеринге компонента Navbar.vue.

Обратите внимание, что мы определили метод signout() и связали его с навигационной ссылкой «SIGNOUT». Мы удаляем token из localStorage, чтобы пользователь больше не входил в систему.

Теперь попробуйте выйти и снова войти. Вы заметите там небольшую ошибку. Ссылка «SIGNIN» не будет заменена ссылкой «SIGNOUT», как только вы войдете в систему. Вам необходимо вручную обновить страницу. Давайте исправим это !. Откройте компонент App.vue и измените его, как показано в следующем блоке кода.

Мы добавили компонент key к компоненту навигации и определили метод под названием refreshNav() для изменения этого key. Уловка состоит в том, чтобы изменить свойства компонента так, чтобы компонент был перезагружен во время выполнения. Затем используйте метод signin() в компоненте Signin.vue, чтобы вызвать этот метод, как только пользователь войдет в систему, как показано в следующем блоке кода.

Добавьте ссылки между страницами регистрации и входа

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

Приведенный выше код вызовет следующее изменение в пользовательском интерфейсе.

Поздравления

Теперь вы успешно добавили функцию Wishlist в свой интерфейс Vue.Js. Это была действительно долгая и сложная задача. Поздравляем с завершением обучения.

Полный код можно найти в этом репозитории GitHub