Building a Basic CRUD Application with Lit?

обзор в этом руководстве вы создадите полностью функционирующее crud (создание, чтение, обновление, удаление) приложение с использованием lit мы продемонстрируем, как управлять данными динамически, создавая приложение, которое выполняет эти основные операции сначала вы настроите проект back4app под названием basic crud app lit который будет служить вашим надежным бэкендом после создания вашего проекта вы разработаете гибкую схему базы данных, определив коллекции и поля, либо вручную, либо с помощью ai агента back4app этот шаг имеет решающее значение для обеспечения надежного выполнения операций crud затем вы воспользуетесь приложением back4app admin app — удобным интерфейсом с функцией перетаскивания — для эффективного управления вашими коллекциями наконец, вы интегрируете ваш фронтенд на lit с back4app, используя rest/graphql, обеспечивая безопасность вашего бэкенда с помощью надлежащих средств контроля доступа к концу этого учебника у вас будет готовое к производству веб приложение, которое не только выполняет основные функции crud, но также включает аутентификацию пользователей и безопасную обработку данных ключевые моменты освойте разработку crud приложений, которые эффективно управляют данными с надежным бэкендом научитесь проектировать масштабируемую базу данных и бесшовно интегрировать ее с фронтендом на основе lit используйте инструмент администрирования с функцией перетаскивания (приложение back4app admin) для упрощения операций crud понимание стратегий развертывания, включая контейнеризацию с помощью docker, для эффективного запуска вашего веб приложения предварительные требования перед началом убедитесь, что у вас есть аккаунт back4app с новым проектом для получения помощи смотрите начало работы с back4app https //www back4app com/docs/get started/new parse app среда разработки lit настройте свой проект, используя предпочитаемый стартовый комплект, и убедитесь, что установлен node js (версии 14 или выше) базовые знания javascript, lit и rest api при необходимости обратитесь к документации lit https //lit dev/docs/ шаг 1 – инициализация вашего проекта создание нового проекта back4app войдите в свою учетную запись back4app выберите опцию “новое приложение” на вашей панели управления назовите ваш проект basic crud app lit и следуйте инструкциям для его создания создать новый проект после создания вашего проекта он появится на панели управления, предоставляя вам основу для настройки бэкенда и управления проектом шаг 2 – создание схемы вашей базы данных конструирование вашей модели данных для этого crud приложения вы определите несколько коллекций ниже приведены примеры коллекций с предложенными полями и типами данных, которые помогут вам настроить эффективную схему, способную обрабатывать операции crud 1\ сбор предметов поле тип данных детали ид идентификатор объекта автоматически сгенерированный первичный ключ название строка название предмета описание строка краткие сведения об элементе создано в дата время создания элемента обновлено дата время, когда элемент был в последний раз изменен 2\ сбор пользователей поле тип данных детали ид идентификаторобъекта автоматически сгенерированный первичный ключ имя пользователя строка уникальный идентификатор для пользователя электронная почта строка уникальный адрес электронной почты пользователя хэш пароля строка хэшированный пароль для безопасной аутентификации создано в дата метка времени для создания аккаунта обновлено дата метка времени для последнего обновления аккаунта вы можете добавить эти коллекции вручную через панель управления back4app, создав новые классы и определив соответствующие столбцы создать новый класс для каждого поля просто выберите тип данных, назначьте имя, установите значение по умолчанию, если это необходимо, и укажите, является ли оно обязательным создать колонку использование ai агента back4app для создания схемы ai агент back4app, доступный из вашей панели управления, может автоматически генерировать вашу схему на основе описательного запроса эта функция упрощает управление проектом, обеспечивая согласованность в настройке вашего бэкенда как использовать ai агента запустите ai агента перейдите к ai агенту из вашей панели управления back4app или в настройках проекта опишите вашу модель данных вставьте подробный запрос, описывающий коллекции и поля, которые вам нужны просмотрите и примените проверьте сгенерированные предложения и подтвердите их, чтобы обновить ваш проект пример запроса create the following collections in my back4app application 1\) collection items \ fields \ id objectid (auto generated primary key) \ title string \ description string \ created at date (auto generated) \ updated at date (auto updated) 2\) collection users \ fields \ id objectid (auto generated primary key) \ username string (unique) \ email string (unique) \ password hash string \ created at date (auto generated) \ updated at date (auto updated) использование этой функции ии экономит ценное время, обеспечивая при этом оптимальную структуру вашей базы данных шаг 3 – активация приложения администратора и функциональности crud введение в приложение администратора приложение администратора back4app предлагает интерфейс без кода для легкого управления данными на сервере его интуитивно понятная функция перетаскивания позволяет вам легко выполнять операции crud — создавать, читать, обновлять и удалять записи как включить приложение администратора перейдите в раздел “дополнительно” на вашей панели управления back4app выберите “приложение администратора” и нажмите “включить приложение администратора ” настройте свои учетные данные администратора создав первоначального администратора, который настроит роли (такие как b4aadminuser ) и системные коллекции включить приложение администратора после активации войдите в приложение администратора, чтобы управлять вашими коллекциями панель управления приложением администратора выполнение операций crud через приложение администратора внутри приложения администратора вы можете создавать записи нажмите кнопку “добавить запись” в коллекции (например, товары), чтобы создать новые записи читать/изменять записи нажмите на запись, чтобы просмотреть ее детали или изменить ее поля удалять записи используйте функцию удаления, чтобы устранить записи, которые больше не нужны этот простой интерфейс значительно улучшает пользовательский опыт, упрощая управление данными шаг 4 – подключение lit к back4app теперь, когда ваш бэкенд настроен и управляется, пришло время интегрировать ваш фронтенд lit с back4app вариант a использование parse sdk (если применимо) установите parse sdk npm install parse настройте parse в вашем приложении lit создайте файл конфигурации (например, src/parseconfig js ) // src/parseconfig js import parse from 'parse'; // вставьте свои учетные данные back4app здесь parse initialize('your application id', 'your javascript key'); parse serverurl = 'https //parseapi back4app com'; export default parse; реализуйте parse в компоненте lit создайте компонент lit, который извлекает и отображает элементы // src/components/itemslist js import { litelement, html, css } from 'lit'; import parse from ' /parseconfig'; class itemslist extends litelement { static properties = { items { type array } }; constructor() { super(); this items = \[]; } connectedcallback() { super connectedcallback(); this fetchitems(); } async fetchitems() { const items = parse object extend("items"); const query = new parse query(items); try { const results = await query find(); this items = results; } catch (error) { console error("ошибка при извлечении элементов ", error); } } render() { return html` \<h2>элементы\</h2> \<ul> ${this items map( (item) => html` \<li>${item get("title")} — ${item get("description")}\</li> ` )} \</ul> `; } } customelements define('items list', itemslist); export default itemslist; вариант b использование rest или graphql если parse sdk не подходит для вашего проекта, выполните операции crud с использованием rest или graphql например, чтобы извлечь элементы через rest // example rest request to get items const fetchitems = async () => { try { const response = await fetch('https //parseapi back4app com/classes/items', { headers { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key' } }); const data = await response json(); console log('items retrieved ', data results); } catch (error) { console error('error fetching items ', error); } }; fetchitems(); интегрируйте эти api вызовы в ваши компоненты lit по мере необходимости шаг 5 – защита вашего бэкенда реализация списков контроля доступа (acls) защитите ваши объекты, установив acl например, чтобы создать приватный элемент async function createprivateitem(itemdata, owneruser) { const items = parse object extend('items'); const item = new items(); item set('title', itemdata title); item set('description', itemdata description); // set acl so only the owner has access const acl = new parse acl(owneruser); acl setpublicreadaccess(false); acl setpublicwriteaccess(false); item setacl(acl); try { const saveditem = await item save(); console log('private item created ', saveditem); } catch (error) { console error('error saving item ', error); } } настройка разрешений на уровне класса (clps) в панели управления back4app настройте clp для каждой коллекции, чтобы установить правила доступа по умолчанию это гарантирует, что только аутентифицированные или авторизованные пользователи могут получить доступ к конфиденциальной информации шаг 6 – реализация аутентификации пользователей создание учетных записей пользователей back4app использует класс user от parse для управления аутентификацией в вашем приложении lit реализуйте регистрацию и вход пользователей, как показано ниже // src/components/auth js import { litelement, html, css } from 'lit'; import parse from ' /parseconfig'; class signupform extends litelement { static properties = { username { type string }, password { type string }, email { type string } }; constructor() { super(); this username = ''; this password = ''; this email = ''; } async handlesignup(e) { e preventdefault(); const user = new parse user(); user set('username', this username); user set('password', this password); user set('email', this email); try { await user signup(); alert('user registration successful!'); } catch (error) { alert('registration error ' + error message); } } render() { return html` \<form @submit="${this handlesignup}"> \<input type="text" placeholder="username" value="${this username}" @input="${e => this username = e target value}" /> \<input type="password" placeholder="password" value="${this password}" @input="${e => this password = e target value}" /> \<input type="email" placeholder="email" value="${this email}" @input="${e => this email = e target value}" /> \<button type="submit">register\</button> \</form> `; } } customelements define('sign up form', signupform); export default signupform; вы также можете реализовать вход и управление сессиями дополнительные функции, такие как социальная аутентификация, проверка электронной почты и сброс пароля, могут быть настроены через панель управления back4app шаг 7 – развертывание вашего lit фронтенда через веб развертывание функция веб развертывания back4app позволяет вам размещать ваше lit приложение, развертывая код из репозитория github следуйте этим шагам, чтобы подготовить вашу производственную сборку, отправить ваш код в github и развернуть ваш сайт 7 1 создание вашей производственной сборки откройте каталог вашего проекта в терминале запустите команду сборки npm run build это создаст папку с оптимизированными статическими ресурсами проверьте сборку подтвердите, что папка включает файл index html вместе с необходимыми подкаталогами 7 2 организация и загрузка вашего кода ваш репозиторий github должен содержать полный исходный код вашего lit фронтенда типичная структура проекта может выглядеть так basic crud app lit frontend/ ├── node modules/ ├── public/ │ └── index html ├── src/ │ ├── app js │ ├── parseconfig js │ └── components/ │ ├── itemslist js │ └── auth js ├── package json └── readme md пример конфигурационного файла src/parseconfig js import parse from 'parse'; // insert your actual back4app credentials here parse initialize('your application id', 'your javascript key'); parse serverurl = 'https //parseapi back4app com'; export default parse; пример основного файла приложения src/app js import { litelement, html } from 'lit'; import parse from ' /parseconfig'; class approot extends litelement { static properties = { items { type array }, newtitle { type string }, newdescription { type string } }; constructor() { super(); this items = \[]; this newtitle = ''; this newdescription = ''; } connectedcallback() { super connectedcallback(); this loaditems(); } async loaditems() { const items = parse object extend("items"); const query = new parse query(items); try { const results = await query find(); this items = results; } catch (error) { console error("failed to load items ", error); } } async additem() { const items = parse object extend("items"); const item = new items(); item set("title", this newtitle); item set("description", this newdescription); try { await item save(); this newtitle = ''; this newdescription = ''; this loaditems(); } catch (error) { console error("error adding item ", error); } } render() { return html` \<div style="padding 2rem;"> \<h1>items\</h1> \<div> \<input type="text" placeholder="title" value="${this newtitle}" @input="${e => this newtitle = e target value}" /> \<input type="text" placeholder="description" value="${this newdescription}" @input="${e => this newdescription = e target value}" /> \<button @click="${this additem}">add item\</button> \</div> \<ul> ${this items map(item => html` \<li> \<strong>${item get("title")}\</strong> ${item get("description")} \</li> `)} \</ul> \</div> `; } } customelements define('app root', approot); export default approot; отправка кода на github инициализируйте git в каталоге вашего проекта git init добавьте все ваши файлы git add зафиксируйте ваши изменения git commit m "первый коммит lit frontend" создайте новый репозиторий на github (например, basic crud app lit frontend ) отправьте ваш код git remote add origin https //github com/your username/basic crud app lit frontend git git push u origin main 7 3 подключение вашего репозитория github к развертыванию в back4app доступ к развертыванию в вебе войдите в свою панель управления back4app, выберите свой проект (basic crud app lit) и выберите развертывание в вебе свяжите свою учетную запись github следуйте инструкциям, чтобы подключить свою учетную запись github, позволяя back4app получить доступ к вашему репозиторию выберите свой репозиторий и ветку выберите репозиторий (например, basic crud app lit frontend ) и ветку (например, main ) с вашим кодом lit 7 4 настройка параметров развертывания укажите настройки сборки команда сборки если отсутствует предсобранная папка сборки , используйте команду, такую как npm run build back4app выполнит эту команду во время развертывания каталог вывода установите это на build , чтобы back4app мог найти ваши статические файлы переменные окружения включите любые необходимые api ключи или другие значения, специфичные для окружения 7 5 контейнеризация вашего lit приложения с помощью docker если вы предпочитаете docker, включите dockerfile в ваш репозиторий \# use a lightweight node image for building the app from node 16 alpine as build \# set the working directory workdir /app \# copy package files and install dependencies copy package json / run npm install \# copy remaining source code and build the app copy run npm run build \# use nginx to serve the built app from nginx\ stable alpine copy from=build /app/build /usr/share/nginx/html expose 80 cmd \["nginx", " g", "daemon off;"] в настройках развертывания back4app выберите опцию развертывания docker, чтобы контейнеризировать ваше приложение 7 6 запуск вашего приложения инициализируйте развертывание нажмите кнопку развернуть после завершения настройки мониторинг процесса back4app получит ваш код с github, выполнит команду сборки и развернет ваш контейнер получите ваш живой url после завершения развертывания будет предоставлен url, по которому размещено ваше lit приложение 7 7 проверка вашего развертывания посетите url откройте предоставленную ссылку в вашем браузере проверьте функциональность убедитесь, что приложение загружается правильно, навигация работает, и все ресурсы корректно обслуживаются отладьте при необходимости используйте инструменты разработчика браузера для проверки любых проблем если возникнут проблемы, просмотрите журналы развертывания в back4app шаг 8 – заключительные мысли и будущие улучшения отличная работа! вы успешно разработали базовое crud приложение с использованием lit и back4app вы создали проект под названием basic crud app lit , определили подробную схему базы данных для элементов и пользователей и управляли своими данными с помощью admin app кроме того, вы интегрировали свой фронтенд на lit с бэкендом и реализовали надежные меры безопасности следующие шаги улучшите свой фронтенд добавьте функции, такие как подробные страницы элементов, функциональность поиска и обновления в реальном времени расширьте возможности бэкенда интегрируйте расширенные функции, такие как облачные функции, внешние api сервисы или управление доступом на основе ролей изучите больше ресурсов посетите документацию back4app https //www back4app com/docs и другие учебные пособия для более глубокого понимания производительности и настройки следуя этому руководству, вы теперь обладаете навыками для создания масштабируемого, безопасного crud бэкенда для вашего приложения на lit с использованием back4app удачного кодирования и продолжайте инновации!