Создание приложения Notes с помощью Vue.js и бэкэнда GraphQL
Недавно я подумывал о разработке простого бессерверного приложения, учитывая, что с ним не справились.
После поиска нескольких вариантов, я решил проверить 8base, который позволяет разработчикам создавать бессерверные приложения с использованием GrapQL API и базы данных MySQL на своем сервере. Нам не нужно ничего развертывать на сервере или управлять VPS, все это делает сама 8base.
Итак, начнем с их шаблона, который у них есть на Github. Его в основном называют стартовым приложением, предназначенным для использования для быстрого прототипирования, оно заботится о базовой аутентификации и необходимых настройках. Мы будем использовать его для создания приложения для заметок, оно будет выполнять операции CRUD и сохранять все, что мы набираем.
Клонируем стартовое приложение,
git clone https://github.com/8base/vue-8base-starter-app.git 8base-note-app
После этого у вас будет что-то вроде этого:
Затем мы установим его зависимости,
cd 8base-note-app npm i
Давайте посмотрим, что у него есть,
npm run serve
Затем перейдите на http: // localhost: 3000, и вы увидите домашнюю страницу:
В нем говорится, что мне нужно войти в систему, что означает, что он проверил мой сеанс, тем самым подтверждая, что он подключился к их серверу для любого auth. Также есть кнопка входа, которая меняется на выход при входе в систему.
Прежде чем мы продолжим, давайте откроем клонированное репо в Visual Studio Code, который является моим основным редактором кода. Вы можете использовать любой, если хотите.
Файловая структура будет выглядеть так:
Когда я запустил npm run serve, я заметил несколько предупреждений eslint / prettier, указывающих на проблемы с отступом табуляции. На данный момент мы отключим prettier с помощью eslint и заставим eslint следовать конфигурации только для ошибок.
Удалите «@ vue / prettier», чтобы удалить предупреждения о более красивом изображении во время линтинга.
Снова запустите npm run serve, и на этот раз вы не увидите никаких предупреждений.
Прежде чем продолжить, мы добавим Vuetify в наш проект, который представляет собой компонентную структуру. Большая часть внешнего интерфейса, который нам обычно приходится делать с нуля, уже выполняется Vuetify. Так что его использование сэкономит нам много времени.
vue add vuetify
Теперь осталось только обновить все зависимости. Я использовал библиотеку npm-check-updates, чтобы быстро выполнить эту работу, вы можете сделать это по-другому, если хотите.
ncu -u
Затем запустите npm install, и он все обновит. После этого запустите npm run serve, чтобы проверить, все ли в порядке.
Теперь, прежде чем мы продолжим, нам нужно войти в систему на https://8base.com и создать новое рабочее пространство. У них есть бесплатный план, поэтому вам просто нужно зарегистрироваться и протестировать функции, которые они предоставляют.
Я создал свой, и он выглядит так:
Выглядит хорошо, вы можете поиграть с их функциями, создать новые таблицы, вставить / удалить данные, протестировать их проводник GrapQL API, что чертовски круто.
В корне нашего проекта вы увидите файл .env. Для тех, кто не знает, это файл переменных среды для Vue.js. Скопируйте его и назовите .env.local.
Чтобы связать наше приложение с нашей рабочей областью, нам нужно ввести указанные выше 4 переменные. Все это можно найти в настройках нашей рабочей области.
Скопируйте URL-адрес конечной точки из настроек рабочей области, я скрыл свой на скриншоте в целях безопасности.
Идентификатор профиля, идентификатор клиента и защищенный домен можно найти в разделе Аутентификация. Сначала вам нужно будет создать новый идентификатор профиля из того же раздела.
После копирования всех значений ваш файл .env.local будет выглядеть примерно так:
Теперь остановите приложение, если оно уже запущено, и снова выполните команду npm run serve. Это связано с тем, что перезагрузка горячего модуля Vue.js не может обновлять переменные среды на лету.
После этого вы можете пройти аутентификацию в своей внутренней рабочей области, нажмите Войти, и вы перейдете на страницу регистрации / входа. 8base под капотом использует https://auth0.com для обработки всей аутентификации и хранения пароля пользователя.
Теперь не путайте свою учетную запись 8base и учетную запись рабочей области приложения. Это разные учетные записи, прямо сейчас, даже если вы зарегистрированы на 8base, вы фактически не зарегистрированы в приложении, которое связано с 8base. Таким образом, вам нужно будет нажать Зарегистрироваться и продолжить, введя свои данные. Вам не нужно вводить те же учетные данные, что и в 8base, потому что это разные учетные записи, они обрабатываются отдельно.
После этого вы можете продолжить процесс входа в систему, и вы будете перенаправлены обратно на главную страницу.
Пока что мы успешно подключили наше приложение к нашему рабочему пространству. Что касается обработки процесса аутентификации пользователя, он вышел из коробки;)
Теперь приступим к модификации кода, из корневой папки откройте src / components / Navbar.vue.
Удалите тег style и все, что внутри него, у нас есть Vuetify, который сделает за нас много работы, включая создание красивой панели навигации.
Замените код следующим:
Перед обновлением:
После обновления:
Прямо сейчас, если ваше приложение запущено, вы получите сообщение об ошибке, потому что мы не обновили наш файл App.vue.
Откройте src / App.vue и замените код следующим:
Перед обновлением:
После обновления:
Теперь откройте http: // localhost: 3000 и вот что увидите:
Пришло время создать несколько операций CRUD: D
Создайте файл OperationControls.vue в каталоге src / components.
Введите следующий код:
Должно получиться так:
Также обновите файл Home.vue, расположенный в src / views, чтобы мы могли просматривать наш новый компонент. Замените следующим кодом:
Должно получиться так:
Откройте localhost, и вы увидите что-то вроде этого:
Пользовательский интерфейс мне нравится, давайте также добавим несколько значков на кнопки. Сначала мы установим пакет Material Design Icons и будем использовать его как SVG. Если вы попытаетесь использовать импорт всего пакета, это приведет к значительному увеличению размера нашего приложения, а разработчики внешнего интерфейса не этого хотят, меньший размер = быстрее скачать.
Запустить:
npm i -S @mdi/js
После установки вернитесь к OperationControls.vue и обновите код, чтобы он соответствовал, как показано на снимке экрана:
Домашняя страница теперь будет выглядеть так:
Теперь, когда у нас есть компонент для наших операций CRUD, я собираюсь ускорить процесс. Создайте папки mutations и states в src / store также создайте файлы default.js в каждой из этих папок.
Обновите оба файла соответствующим кодом, он должен выглядеть следующим образом:
Состояния:
Мутации:
Объяснение состояний:
- activePad - используется для переключения блокнота со списком доступных заметок.
- i d - идентификатор примечания
- текст - текст заметки.
- title - Заголовок заметки
- userData - аутентифицированные данные пользователя, такие как адрес электронной почты, идентификатор пользователя и т. д.
- Notes - массив заметок, каждый объект содержит идентификатор заметки, заголовок и текст.
Мутации довольно понятны. Теперь мы обновим магазин, заменим код в src / store / index.js так, чтобы он совпадал, как показано на снимке экрана:
Создайте TextPad.vue в src / components и введите следующий код:
TextPad.vue записывает заголовок и текст заметки и синхронизирует данные с хранилищем Vuex.
Создайте еще один компонент NotesList.vue в src / components со следующим кодом:
NotesList.vue будет использоваться для отображения наших ранее сохраненных заметок в базе данных 8base. При нажатии на заметку он вводит свой идентификатор, заголовок и текст в магазин, чтобы мы могли обновить / удалить его.
Наконец, теперь мы обновляем файл Home.vue, чтобы он выглядел так:
На этот раз мы внесли 3 изменения;
1- Добавлен компонент TextPad в Home.vue
2- Добавлен компонент NotesList в Home.vue
3- На смонтированном сервере запросить пользовательские данные и сохранить их в хранилище vuex.
Посетите http: // localhost: 3000, и вы должны увидеть это так:
Прежде чем мы продолжим, нам нужно определить нашу схему в 8base. Откройте https://8base.com и войдите в систему, затем перейдите в рабочую область, щелкните раздел Данные.
Вы увидите «Пользовательские таблицы» и «Системные таблицы». Системные таблицы содержат таблицу под названием Пользователи, которая используется для хранения информации о пользователях (а не паролей).
Давайте создадим новую таблицу для нашего приложения для заметок, нажмите кнопку «+ Добавить таблицу», введите ее заголовок «Заметки» .
Поля «Идентификатор», «Создано в», «Обновлено в», «Создано» Кем автоматически создаются и изменяются при необходимости.
Прямо сейчас нам нужно 3 настраиваемых поля в нашей таблице: идентификатор пользователя / адрес электронной почты, заголовок заметки, текст заметки. Начнем с сопоставления пользовательских данных.
Введите UserID в качестве имени поля и выберите его тип данных Таблица. Тип данных Таблица используется здесь для отношений, он нам нужен для связи с адресом электронной почты пользователя, который находится внутри таблицы Пользователи в таблице систем. категория.
Теперь давайте свяжем и заполним оставшиеся текстовые поля. Отношения, которые мы здесь используем, - это один-много, то есть у одного пользователя может быть много заметок.
Затем добавьте поле Заголовок для заголовка заметки, его тип данных должен быть Текст и максимальная длина - 120 символов. Поле должно быть обязательным и допускать несколько.
Наконец, мы добавим поле Примечания для текста примечания. Его тип данных - Текст с максимальной длиной 40000 символов. Мы могли бы добавить больше, но давайте просто ограничимся этим числом для этого урока.
Наша схема определена, теперь осталось только создавать запросы GrapQL, к счастью для нас, в 8base есть API-проводник для быстрого создания запросов, мутаций или подписок.
«API Explorer использует ваши реальные, текущие и производственные данные» - это именно те слова, которые вы прочитаете в верхней части проводника. Вот как это выглядит;
Проводник довольно полезен, вы можете заметить, что он содержит слова «заметки» и «список заметок». Если я щелкну по нему, он начнет создавать для меня запрос, а также уточнять его.
Давайте воспользуемся им и создадим запрос для извлечения всех заметок на основе адреса электронной почты пользователя. Нажмите Список заметок ›фильтр› ID пользователя ›адрес электронной почты› равно.
Следующая проверка:
- NotesList ›элементы› id
- список заметок ›элементы› заголовок
- notesList ›items› note
У вас должно получиться что-то вроде этого:
Первая часть используется для фильтрации заметок по адресу электронной почты пользователя, а вторая - для выбора полей из базы данных. Если вы знаете основные команды базы данных, такие как select, update и delete, тогда это должно быть довольно просто.
Затем нам нужно иметь значение динамического адреса электронной почты, запрос нам бесполезен, если нам нужно жестко запрограммировать его для каждого пользователя из проводника. Сначала измените MyQuery на GetNotes и добавьте параметр $ note: String!
Также замените значение пустой строки в адресе электронной почты на $ note.
Если все пойдет хорошо, то получится так:
Вы можете запустить запрос в реальном времени, если хотите, он даст вам результаты, которые вы определили в запросе.
Теперь аналогично мы создадим 3 мутации: одну для вставки, вторую для обновления и третью для удаления заметок.
Я уже создал и протестировал их, вот как они в итоге выглядят:
У нас есть запросы и изменения, замените код файла src / utils / graphql.js следующим:
Должно получиться так:
Теперь давайте завершим приложение, обновив компонент OperationControls.vue. Сначала добавьте закусочную, чтобы мы также могли обновлять уведомления о запросах API. Затем добавьте несколько фиктивных методов для операций CRUD.
Код моего компонента теперь будет выглядеть так:
Некоторое объяснение:
- Вычисленные свойства предоставят реактивные данные из магазина.
- Функция triggerClick действует как промежуточное ПО для всех методов работы.
- Snackbar - это уведомление, которое автоматически закроется через X секунд.
Добавление кода в функции new () и insert ();
Объяснение:
- Вызов функции new () покажет блокнот и очистит его значения.
- Вызов функции insert () проверяет наличие нулевых значений и ничего не делает, если они есть, а также отображает уведомление snackbar
- Функция insert () отключит кнопку Insert и переведет ее в режим загрузки, пока не будет получен ответ API.
- В случае успешной операции вставки отобразится уведомление закусочная, и блокнот будет обновлен для вставки новой заметки.
- В случае ошибки во время вставки сообщение об ошибке будет показано в снэк-баре.
Таким же образом добавим код для остальных операций;
Объяснение одинаково для всех, как если бы это была операция Insert. Что касается функции List All, она также меняет местами блокнот с компонентом NotesList.
Еще одна вещь, которую нужно сделать, - отключить кеширование с помощью apollo для этого руководства, потому что мы хотим видеть мгновенные обновления и результаты в нашем приложении.
Я добавил объект customOptions, который отключает кеш, код файла находится в src / utils / api.js
Тестируем наше новое приложение:
Я также загрузил исходный код на Github: https://github.com/WhiteBookmark/8base-notepad
Инструменты, использованные при написании этой статьи:
- Fotor для редактирования изображений
- Visual Studio Code для редактирования кода
- Расширение Polacode для скриншотов внутри VS Code
- Платформа 8base для бессерверного приложения
- Youtube для закачки видео
