Как создать CRUD‑приложение на JavaScript?

обзор в этом учебном пособии вы научитесь создавать полное crud (создание, чтение, обновление, удаление) приложение с использованием javascript мы будем использовать back4app для легкого управления вашими данными на сервере этот гид охватывает основные операции crud, от настройки проекта back4app до интеграции вашего javascript приложения с parse javascript sdk или rest api сначала вы создадите проект на back4app под названием basic crud app javascript , который предлагает надежное решение для бэкенда затем вы определите схему данных — либо вручную, либо с помощью ai агента back4app — чтобы соответствовать требованиям вашего приложения далее вы будете управлять своим бэкендом через удобное приложение администратора back4app, что позволит вам выполнять операции с данными через простой интерфейс перетаскивания наконец, вы подключите ваше javascript приложение к back4app, реализуя безопасную аутентификацию пользователей и основные функции crud к концу этого руководства вы создадите готовое к производству приложение на javascript, способное выполнять все основные операции crud с безопасным контролем доступа ключевые моменты, которые нужно помнить освойте разработку приложения crud на основе javascript с масштабируемым бэкендом поймите, как структурировать ваш бэкенд и интегрировать его с вашим кодом на javascript научитесь использовать admin app от back4app для простого манипулирования данными и операций crud изучите варианты развертывания, включая контейнеризацию с помощью docker, чтобы запустить ваше приложение на javascript предварительные требования перед тем как начать, убедитесь, что у вас есть аккаунт back4app с настроенным проектом нужна помощь? посетите начало работы с back4app https //www back4app com/docs/get started/new parse app настройка разработки на javascript вы можете использовать visual studio code или любой другой предпочитаемый редактор вместе с node js (версии 14 или выше) базовые знания javascript, современных фреймворков и rest api обратитесь к документации по javascript https //developer mozilla org/en us/docs/web/javascript при необходимости шаг 1 – инициализация вашего проекта настройка нового проекта back4app войдите в свою учетную запись back4app нажмите на кнопку “новое приложение” на вашей панели управления введите имя проекта basic crud app javascript и завершите процесс настройки создать новый проект после создания проекта он появляется на вашей панели управления, закладывая основу для вашей конфигурации бэкенда шаг 2 – создание вашей схемы данных проектирование структур данных для нашего crud приложения мы создадим два основных класса (коллекции) на back4app эти классы и их поля необходимы для выполнения необходимых операций crud 1\ элементы коллекция эта коллекция хранит детали для каждого элемента поле тип детали ид идентификатор объекта автоматически сгенерированный уникальный идентификатор название строка название элемента описание строка краткое резюме предмета создано дата время создания элемента обновлено дата время последнего обновления 2\ пользователи коллекция эта коллекция обрабатывает учетные данные пользователей и детали аутентификации поле тип детали ид идентификатор объекта автоматически сгенерированный уникальный идентификатор имя пользователя строка уникальный идентификатор для пользователя электронная почта строка уникальный адрес электронной почты пользователя хешпароля строка хэшированный пароль для безопасной аутентификации создано дата время создания аккаунта обновлено дата последнее время обновления учетной записи вы можете создать эти классы и их поля непосредственно в панели управления back4app создать новый класс вы можете добавлять столбцы, выбрав тип, назвав поле, назначив значения по умолчанию и установив обязательные параметры создать столбец использование ai агента back4app для генерации схемы ai агент back4app упрощает создание схемы, автоматически генерируя вашу модель данных на основе вашего описания эта функция ускоряет настройку проекта и гарантирует, что ваша схема соответствует вашим требованиям crud как использовать ai агента откройте ai агента войдите в свою панель управления back4app и найдите ai агента в настройках проекта опишите вашу схему введите подробное описание коллекций и полей, которые нужны просмотрите и подтвердите после обработки ai агент отобразит предложенную схему просмотрите и подтвердите, чтобы применить её пример описания create the following collections in my back4app project 1\) collection items \ fields \ id objectid (auto generated) \ title string \ description string \ createdat date (auto generated) \ updatedat date (auto updated) 2\) collection users \ fields \ id objectid (auto generated) \ username string (unique) \ email string (unique) \ passwordhash string \ createdat date (auto generated) \ updatedat date (auto updated) этот подход с поддержкой ии экономит время и гарантирует хорошо структурированную модель данных для вашего приложения шаг 3 – включение админ приложения и выполнение операций crud обзор админ приложения админ приложение back4app предлагает интерфейс без кода для эффективного управления данными на сервере с его интуитивно понятными функциями перетаскивания вы можете без труда выполнять операции crud, такие как добавление, просмотр, изменение и удаление записей активация админ приложения перейдите в раздел “дополнительно” на вашей панели управления back4app выберите “админ приложение” и нажмите на “включить админ приложение ” настройте свои учетные данные администратора , создав начальную учетную запись администратора это также устанавливает роли, такие как b4aadminuser и системные классы включить админ приложение после активации войдите в админ приложение, чтобы управлять данными вашего приложения панель управления админ приложением управление операциями crud через админ приложение внутри админ приложения вы можете вставить записи используйте опцию “добавить запись”, чтобы создать новые записи в коллекции, такой как элементы просмотреть и редактировать записи нажмите на любую запись, чтобы увидеть детали или изменить поля удалить записи удалите любые записи, которые больше не нужны этот простой интерфейс упрощает управление данными и повышает общую удобство использования шаг 4 – подключение вашего javascript приложения к back4app с установленным бэкендом следующим шагом является интеграция вашего javascript приложения с back4app вариант a использование parse javascript sdk включите parse sdk если вы используете npm, установите sdk, выполнив npm install parse инициализируйте parse в вашем приложении создайте файл инициализации (например, parseconfig js ) // parseconfig js import parse from 'parse'; parse initialize("your application id", "your javascript key"); parse serverurl = 'https //parseapi back4app com'; 3\ implement crud functions for example, create a module to handle item operations ```javascript // itemsservice js import parse from 'parse'; export const getitems = async () => { const query = new parse query("items"); try { const results = await query find(); return results; } catch (error) { console error("error retrieving items ", error); return \[]; } }; export const createitem = async (title, description) => { const item = parse object extend("items"); const item = new item(); item set("title", title); item set("description", description); try { await item save(); console log("item created successfully "); } catch (error) { console error("error creating item ", error); } }; export const updateitem = async (objectid, newtitle, newdescription) => { const query = new parse query("items"); try { const item = await query get(objectid); item set("title", newtitle); item set("description", newdescription); await item save(); console log("item updated successfully "); } catch (error) { console error("error updating item ", error); } }; export const deleteitem = async (objectid) => { const query = new parse query("items"); try { const item = await query get(objectid); await item destroy(); console log("item deleted successfully "); } catch (error) { console error("error deleting item ", error); } }; вариант b использование rest или graphql если вы предпочитаете не использовать parse sdk, вы можете взаимодействовать с back4app через rest запросы например, чтобы получить элементы с помощью rest import fetch from 'node fetch'; export const fetchitemsrest = async () => { try { const response = await fetch('https //parseapi back4app com/classes/items', { method 'get', 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 fetched ", data); } catch (error) { console error("error fetching items via rest ", error); } }; интегрируйте эти api запросы в ваши модули javascript по мере необходимости шаг 5 – защита вашего бэкенда настройка контроля доступа обеспечьте безопасность ваших данных, настроив списки контроля доступа (acl) например, чтобы создать элемент, доступный только его создателю import parse from 'parse'; export const createprivateitem = async (title, description, user) => { const item = parse object extend("items"); const item = new item(); item set("title", title); item set("description", description); const acl = new parse acl(); acl setreadaccess(user, true); acl setwriteaccess(user, true); acl setpublicreadaccess(false); acl setpublicwriteaccess(false); item setacl(acl); try { await item save(); console log("private item created successfully "); } catch (error) { console error("error creating private item ", error); } }; настройка разрешений на уровне класса (clp) установите правила доступа по умолчанию для ваших коллекций через панель управления back4app, обеспечивая доступ к конфиденциальным данным только для аутентифицированных пользователей шаг 6 – реализация аутентификации пользователей настройка учетных записей пользователей back4app использует встроенный класс пользователя parse для обработки аутентификации в вашем javascript приложении управляйте регистрацией и входом пользователей следующим образом import parse from 'parse'; export const signupuser = async (username, password, email) => { const user = new parse user(); user set("username", username); user set("password", password); user set("email", email); try { await user signup(); console log("user registered successfully!"); } catch (error) { console error("error during sign up ", error); } }; export const loginuser = async (username, password) => { try { const user = await parse user login(username, password); console log("logged in as ", user get("username")); } catch (error) { console error("login failed ", error); } }; этот метод можно расширить для управления сессиями, восстановления пароля и многого другого шаг 7 – развертывание вашего javascript приложения back4app упрощает развертывание вы можете развернуть ваше javascript приложение, используя такие методы, как контейнеризация docker 7 1 создание вашего приложения соберите ваше приложение используйте ваш инструмент сборки (например, webpack или аналогичный сборщик), чтобы скомпилировать ваш код проверьте сборку убедитесь, что ваши собранные файлы содержат все необходимые модули и ресурсы 7 2 организация структуры вашего проекта типичная структура javascript проекта может выглядеть следующим образом basic crud app javascript/ \| src/ \| | index js \| | parseconfig js \| | services/ \| | itemsservice js \| | authservice js \| public/ \| | index html \| package json \| readme md пример parseconfig js // parseconfig js import parse from 'parse'; parse initialize("your application id", "your javascript key"); parse serverurl = 'https //parseapi back4app com'; 7 3 докеризация вашего javascript приложения если вы выберете контейнеризацию, включите dockerfile в корень вашего проекта \# use an official node js runtime as the base image from node 14 alpine \# set the working directory in the container workdir /app \# copy package files and install dependencies copy package json / run npm install \# copy the rest of the application code copy \# expose the application port (adjust if necessary) expose 3000 \# define the command to run your application cmd \["npm", "start"] 7 4 развертывание через back4app web deployment подключите ваш репозиторий github убедитесь, что ваш проект на javascript размещен на github настройте параметры развертывания в панели управления back4app используйте опцию web deployment для связи с вашим репозиторием (например, basic crud app javascript ) и выберите нужную ветку установите команды сборки и вывода укажите вашу команду сборки (например, npm run build ) и директорию вывода развертывание нажмите deploy и следите за логами, пока ваше приложение не станет доступным шаг 8 – заключительные мысли и будущие улучшения поздравляем! вы успешно разработали приложение crud на основе javascript, интегрированное с back4app вы настроили проект под названием basic crud app javascript , структурировали свои items и users коллекции и управляли своим бэкендом с помощью приложения back4app admin кроме того, вы подключили свое javascript приложение через parse sdk (или rest api) и реализовали надежные меры безопасности что исследовать дальше улучшите функциональность рассмотрите возможность добавления таких функций, как фильтры поиска, детализированные представления или обновления данных в реальном времени расширьте функции бэкенда изучите облачные функции, интеграцию сторонних api или реализацию продвинутых контролей доступа на основе ролей углубите свои знания посетите документацию back4app https //www back4app com/docs и изучите дополнительные учебные материалы, чтобы еще больше оптимизировать ваше приложение счастливого кодирования и наслаждайтесь созданием вашего продвинутого приложения crud на javascript!