Итак, я изучал и экспериментировал с Svelte.JS, очень простой и простой средой Javascript для внешнего интерфейса, и я решил, что, поскольку каждый может придумать новый технологический стек, почему бы не придумать свой 😅

СТЕК SEMN

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

S ДЛЯ СВЕЛТЕЙ

Итак, беглый взгляд на их веб-сайт, вы могли видеть, что Sveltejs на самом деле

Svelte — это радикально новый подход к созданию пользовательских интерфейсов. В то время как традиционные фреймворки, такие как React и Vue, выполняют основную часть своей работы в браузере, Svelte переносит эту работу на этап компиляции, который происходит при создании приложения.

Когда я попробовал фреймворк через несколько месяцев с ReactJS, все просто волшебным образом «щелкнуло», и если бы была только одна причина, по которой я бы оглянулся на React, это огромная экосистема и бесчисленные пакеты и плагины, а что нет.

Фреймворк очень минимален и идеально подходит для одностраничных приложений. Начать проект с ним так же просто, как npx degit sveltejs/template [NAME], и бум, все готово!

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

E ДЛЯ EXPRESSJS

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

ExpressJS — это бэкенд-фреймворк, который помогает нам создавать серверы с невероятной легкостью!

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

M ДЛЯ МОНГОДБ

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

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

N ДЛЯ NODEJS

NodeJS — это……… ну вы знаете, как был создан javascript для работы в браузере, он же клиент? Какой-то ботаник написал программу на C++, и теперь мы можем запускать javascript на сервере в значительной степени 😂

НАСТРОЙКА СРЕДЫ РАЗРАБОТКИ

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

  • NodeJS и npm отсюда
  • Учетная запись атласа MongoDB, чтобы мы могли получить доступ к нашей базе данных в облаке, нажмите здесь, чтобы настроить учетную запись, и здесь, чтобы узнать, как создать и подключиться к вашему кластеру.

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

Сначала создайте и перейдите в новый каталог для нашей серверной части приложения.

mkdir semn_stack && cd semn_stack

Затем мы инициализируем новый проект npm init -y

Установите пакеты npm i express cors mongoose , а затем npm i nodemon --save-dev

  • express поможет нам настроить сервер, который будет обрабатывать запросы и прочее
  • mongoose — это пакет, который помогает нам подключиться к нашему кластеру и структурировать схему, которая будет использоваться для хранения наших данных, подробнее об этом чуть позже.
  • cors помогает нам решить проблемы политики перекрестного происхождения между нашим интерфейсом и сервером, поскольку они работают на разных портах, больше об этой политике безопасности можно найти здесь
  • nodemon обозначает монитор узла, будет обновлять наш сервер узла каждый раз, когда мы вносим изменения, поэтому это сэкономит нам некоторое время.

ФАЙЛОВАЯ СТРУКТУРА ДЛЯ ИНТЕРФЕЙСА

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

Хорошо, у нас здесь только несколько интересных штук

  1. models будет содержать наши модели базы данных, думайте о модели как о плане документа, который мы сохраним, поэтому в нашем случае со списком задач у него будет заголовок, описание и, возможно, другие поля.
  2. routes будет содержать маршруты к нашему бэкэнду Express, маршруты помогают нам организовать, куда идут запросы и как мы должны реагировать на них.
  3. services будет содержать логику и функциональность для наших маршрутов, в настоящее время будут только функции для взаимодействия с нашей базой данных.
  4. index.js — наша точка входа

ВРЕМЯ ПОСМОТРЕТЬ ВНУТРИ ЭТИХ КАТАЛОГОВ

Пришло время распаковать эти каталоги и посмотреть код внутри, так что давайте :))

  • модели

Внутри каталога models у нас будет наша модель todo, которая выглядит примерно так

Так что, черт возьми, это все, что вы можете спросить себя сейчас

Позвольте мне сначала показать вам, как выглядит документ mongodb

ОМГ JSON ЭТО ТЫ 😲, да, это похоже на JSON и работает как JSON

mongoose помогает нам «формировать» документ, и эта «форма» называется схемой, а затем эта схема может использоваться для создания модели, и это то, что мы используем в качестве критерия для хранения данных в документе.

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

  • Маршруты

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

Нам нужно решить, как наш бэкэнд должен реагировать, когда конечный пользователь запрашивает каждую из этих «конечных точек», и именно здесь проявляется красота Express 😍

Давайте заглянем в наш файл маршрутов routes.js

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

GET / представляет собой конечную точку для получения всех сохраненных задач.

POST / this используется для хранения новой задачи

DELETE / это удалит ВСЕзадачи

DELETE /:id это приведет к удалению ОДНОЙзадачи по ее идентификатору

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

Но откуда взялся этот «апи» ?????? Это будет дальше!

  • услуги

Этот каталог будет содержать логику каждой конечной точки и какие данные сервер должен возвращать конечному пользователю.

Внутри него есть только один файл для обработки всего этого, так что давайте заглянем

Как вы можете видеть, мы экспортируем четыре функции, чтобы они соответствовали конечным точкам, которые у нас есть в нашем routes.js, и они довольно понятны.

ТЕПЕРЬ К НАШЕЙ ГЛАВНОЙ ЗАПИСИ

Наш index.js теперь довольно прост, так как вся логика выполняется отдельно в каталогах, упомянутых ранее. Нам нужно только установить еще один пакет под названием dotenv, который помогает нам взаимодействовать с переменными среды для защиты важных фрагментов кода, таких как ключи API и прочее. так что давайте npm i dotenv этого плохого мальчика

Мы просто инициализируем экспресс-приложение и включаем cors, затем используем промежуточное программное обеспечение JSON, предоставленное express, чтобы иметь возможность обрабатывать входящие данные JSON, а также отправлять ответы JSON, а затем в строке 9 мы сообщаем express, что всякий раз, когда приходит запрос к / then использовать наши маршруты, определенные в routes.js, которые мы импортировали как маршруты

ВРЕМЯ СТАТЬ

Спойлер: вам понравится Svelte 😉

Как я уже говорил ранее, начать новый проект Svelte очень просто, если у вас есть nodejs и npm, поэтому мы просто делаем немного npx degit sveltejs/template todo-app, затем переходим в каталог и запускаем npm install для установки зависимостей, а затем npm run dev для запуска локального сервера разработки, который вы могли бы найти на локальном хосте: 8080

НЕКОТОРЫЕ ОСНОВНЫЕ СВЕДЕНИЯ

Давайте сначала взглянем на структуру файла приложения, поэтому я скажу вам, что игнорировать и где произойдет волшебство.

Да, поэтому нас интересует только каталог src, поскольку он будет содержать наши фактические компоненты, поэтому давайте перейдем в него и посмотрим, как их создавать и отображать.

По умолчанию вы, конечно, не найдете каталог components, поэтому мы создадим его

Рабочий процесс в Svelte прост и похож на любой интерфейсный фреймворк JS: вы создаете файлы .svelte в каталоге компонентов, а затем импортируете их в App.svelte, поскольку он представляет собой «корень» нашего проекта Svelte.

СОЗДАНИЕ КОМПОНЕНТОВ И НАШЕГО ФАЙЛА APP.SVELTE

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

Таким образом, каждый компонент svelte состоит из этих трех разделов: тега script для хранения JS для этого конкретного компонента приложения, раздела html, который в данном случае является тегом <main>, и, наконец, раздела стиля для стилизации компонента.

ЗАМЕЧАНИЯ

  • чтобы «привязать» функцию к компоненту, например к кнопке в нашем примере выше, мы используем on:click, которая является специфической функцией svelte.
  • эти разделы должны присутствовать в каждом компоненте, но любой из них может быть пустым

ПРИВЯЗКИ В SVELTE

Чтобы мы могли привязать значение поля ввода к переменной, нам нужно использовать директиву bind:value, которая является одной из многих доступных привязок для нас в Svelte, поэтому давайте посмотрим, как это будет работать в действии.

Довольно круто, верно? Итак, давайте посмотрим, как эта функция привязки работает более подробно.

Когда вы обычно создаете форму в JS и хотите получить значение поля ввода, вы должны сделать что-то вроде let username = document.querySelector("#user"); хорошо, хотя это вполне допустимый код JS, ЕЩЕ ЕСТЬ ПРОБЛЕМА,JS, который мы создаем для нашего компоненты в svelte загружает ДО КОМПОНЕНТА

Это означает, что такой вещи, как querySelector("#user"), не будет, поэтому мы обходим эту проблему, привязывая поле ввода к переменной, которую мы инициализируем, в данном случае это username, а затем мы используем фигурные скобки для ссылки на эту переменную в любом месте, где мы хотим

ИСПОЛЬЗОВАНИЕ РЕПОРТАЖА В SVELTE

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

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

Таким образом, вы извлекаете данные из верхнего / корневого компонента, который в данном случае App.svelte, а затем передаете их в качестве реквизита, скажем, movieCard.svelte компоненту.

Теперь давайте создадим фиктивный массив объектов для представления некоторых фильмов и посмотрим, как работает реквизит.

Вау, вы также получаете бонусную функцию, описанную здесь 😃, так что давайте поговорим о логике в svelte.

В svelte много логических блоков как в #each и #if и они всегда должны заканчиваться вот так /each , /if

Итак, в нашем примере мы просто перебираем объекты в массиве, используя директиву #each, и присваиваем каждому из них имя переменной «movie» только для того, чтобы ссылаться во время цикла.

Затем мы визуализируем наш компонент movieCard, передавая ему единственный объект массива в качестве реквизита, но как выглядит этот компонент? Как мы обрабатываем переданный реквизит?

РЕНДЕРИНГ В НАШЕМ КОМПОНЕНТЕ

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

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

Таким образом, это ключевое слово export работает так, как если бы компоненты «ожидали» данных, поэтому в нашем случае это свойства И ЗАМЕЧАНИЕ, ЧТО имя, которое вы используете для передачи свойства в App.svelte, должно быть точным именем переменной в export в компоненте, которому вы передаете реквизит, поэтому

Я решил добавить некоторые условия для имени класса, чтобы мы могли динамически менять стиль карты, потому что это выглядит круто 😎

Поскольку мы передали объект в основном как реквизит, мы получаем доступ к его атрибутам, используя точечную нотацию, как и любой обычный объект JS.

СОЗДАНИЕ ВНЕШНЕГО КОНЦА ДЛЯ НАШЕГО ПРИЛОЖЕНИЯ TODO

ВНИМАНИЕ, СПОЙЛЕР: я не заморачивался со стилем, извините :( но я настроил tailwindcss для проекта, так что вы можете использовать его и ty ♥️

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

Итак, давайте посмотрим, что делают все эти функции.

  1. onMount() — это функция жизненного цикла в svelte, которая похожа на хук useEffect() в Reactjs, если вы знакомы с этим, в основном способ для нас запускать код каждый раз, когда компонент «монтируется» или загружается, и в этом случае мы просто вызываем наш API чтобы получить все сохраненные задачи
  2. addTodo() в основном отправляет почтовый запрос, соответствующий нашей конечной точке POST, чтобы сохранить новую задачу, связывая значение полей заголовка и описания, а затем используя переменные в запросе.
  3. wipeTodos() отправляет DELETE запрос нашему бэкэнду на удаление всех задач сразу

СОЗДАНИЕ КОМПОНЕНТА TODO

Теперь пришло время добавить компонент для хранения данных задачи и добавить кнопку для удаления этой отдельной задачи.

В соответствии с нашим внутренним кодом мы назначили конечную точку, которая получает запрос DELETE с параметром id, который в данном случае мы получили из самого объекта todo, КАЖДЫЙ ДОКУМЕНТ MONGODB ИМЕЕТ АТРИБУТ ID, и вот как мы справились чтобы получить его

ОГРОМНОЕ СПАСИБО, ЕСЛИ ВЫ ДОШЛИ ЭТО ДАЛЕКО ♥️

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

Береги себя 😃