Как создать приложение CRUD с помощью ReactJS?

введение в этом учебном пособии вы создадите комплексное приложение crud (создание, чтение, обновление и удаление) с использованием reactjs этот гид предназначен для выполнения основных операций программного приложения, демонстрируя, как создавать приложения crud, которые эффективно управляют и обновляют данные вы начнете с создания и настройки проекта back4app с именем basic crud app reactjs , который будет служить надежной системой бэкенда для вашего веб приложения затем вы разработаете масштабируемую схему базы данных, определив детализированные коллекции и поля — либо вручную, либо с помощью ai агента back4app после этого вы воспользуетесь приложением back4app admin — удобным инструментом управления с интерфейсом перетаскивания — для легкого управления вашими коллекциями этот административный интерфейс улучшает пользовательский опыт и упрощает интерфейс, позволяя пользователям быстро выполнять операции crud наконец, вы развернете свой фронтенд на reactjs и интегрируете его с back4app, используя rest/graphql (или parse sdk, где это возможно), при этом обеспечивая безопасность вашего бэкенда с помощью расширенных средств управления доступом к концу этого руководства вы создадите веб приложение, готовое к производству, которое не только поддерживает основные операции crud, но также включает аутентификацию пользователей и надежные возможности обновления данных основные выводы узнайте, как создавать приложения crud, которые эффективно управляют данными с помощью надежной системы управления базами данных получите практические знания о проектировании масштабируемого бэкенда и интеграции его с фронтендом на reactjs для улучшения пользовательского опыта узнайте, как использовать инструмент управления с функцией перетаскивания (приложение back4app admin app) для упрощения операций создания, чтения, обновления и удаления поймите техники развертывания, включая контейнеризацию docker, чтобы быстро запустить ваше веб приложение предварительные требования перед тем, как начать, убедитесь, что у вас есть следующее аккаунт back4app и новый проект если вам нужна помощь, обратитесь к начало работы с back4app https //www back4app com/docs/get started/new parse app среда разработки reactjs используйте create react app https //create react app dev/docs/getting started/ или аналогичный инструмент убедитесь, что установлен node js (версия 14 или выше) базовое понимание javascript, reactjs и rest api при необходимости ознакомьтесь с документацией reactjs https //reactjs org/docs/get started html шаг 1 – настройка проекта создание нового проекта back4app войдите в свою учетную запись back4app нажмите кнопку “новое приложение” на вашей панели управления введите имя проекта basic crud app reactjs и следуйте инструкциям для создания вашего проекта создать новый проект после создания ваш новый проект появится на панели управления back4app, предоставляя надежную основу для вашей конфигурации бэкенда и управления проектом шаг 2 – проектирование схемы базы данных проектирование вашей модели данных для базового crud приложения вы создадите несколько коллекций ниже приведены некоторые примеры коллекций, которые вам понадобятся, с описанием необходимых полей и типов данных, чтобы помочь вам эффективно настроить схему вашей базы данных эти коллекции предназначены для выполнения основных операций crud, которые позволяют пользователям создавать, читать, обновлять и удалять данные 1\ коллекция предметов эта коллекция хранит информацию о каждом предмете поле тип данных описание ид идентификаторобъекта автоматически сгенерированный первичный ключ название строка название элемента описание строка краткое описание предмета создано в дата время создания элемента обновлено дата время, когда элемент был последний раз обновлен 2\ сбор пользователей эта коллекция хранит информацию о пользователе и данные аутентификации поле тип данных описание ид идентификатор объекта автоматически сгенерированный первичный ключ имя пользователя строка уникальное имя пользователя для пользователя электронная почта строка уникальный адрес электронной почты хэш пароля строка хэшированный пароль для аутентификации создано в дата время, когда была создана учетная запись пользователя обновлено дата время, когда учетная запись пользователя была обновлена вы можете настроить эти коллекции вручную в панели управления back4app, создав новый класс для каждой коллекции и добавив столбцы для определения полей создать новый класс вы можете легко создать поля для вашей базы данных, выбрав тип данных, назвав поле, установив значение по умолчанию и определив, является ли оно обязательным создать колонку использование ai агента back4app для генерации схемы ai агент back4app — это мощный инструмент, доступный непосредственно из вашей панели управления back4app это позволяет вам автоматически генерировать схему вашей базы данных на основе подсказки, которая описывает ваши желаемые коллекции и поля эта функция значительно экономит время при управлении проектом и помогает гарантировать, что ваша система управления базами данных настроена для выполнения основных операций, необходимых вашему веб приложению как использовать ai агента откройте ai агента войдите в свою панель управления back4app и найдите ai агента в меню или в настройках вашего проекта опишите вашу модель данных в интерфейсе ai агента вставьте подробную подсказку, которая описывает коллекции и поля, которые вам нужны просмотрите и примените после отправки ai агент сгенерирует коллекции и определения полей просмотрите эти предложения и примените их к вашему проекту пример подсказки 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) использование ai агента таким образом экономит время и гарантирует, что ваша схема последовательна и оптимизирована для нужд вашего приложения шаг 3 – включение приложения администратора и операции crud обзор приложения администратора приложение администратора back4app – это мощный интерфейс без кода, который позволяет вам управлять вашими данными на сервере этот инструмент управления предоставляет интерфейс перетаскивания, который позволяет пользователям легко выполнять операции crud, такие как создание, чтение, обновление и удаление записей включение приложения администратора перейдите в меню “дополнительно” на вашей панели управления back4app нажмите на “приложение администратора” и затем на “включить приложение администратора ” настройте свои учетные данные администратора создав своего первого администратора этот процесс также настраивает роли (например, b4aadminuser ) и системные коллекции включить приложение администратора после включения войдите в приложение администратора, чтобы управлять вашими данными панель управления приложения администратора использование приложения администратора для операций crud в приложении администратора вы можете создавать записи нажмите кнопку “добавить запись” в коллекции (например, товары), чтобы создать новые записи читать/обновлять записи выберите любую запись, чтобы просмотреть ее детали или отредактировать поля, обеспечивая плавное обновление данных удалять записи используйте опцию удаления, чтобы удалить записи, которые больше не нужны этот простой в использовании инструмент управления улучшает общий пользовательский опыт, предоставляя простой интерфейс перетаскивания для функций crud шаг 4 – интеграция reactjs с back4app теперь, когда ваш бэкенд настроен и управляется через приложение администратора, пришло время подключить ваш фронтенд на reactjs к back4app вариант a использование parse sdk установите parse sdk npm install parse инициализируйте parse в вашем react приложении создайте файл (например, 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 в компоненте react например, создайте компонент для получения и отображения элементов // src/components/itemslist js import react, { useeffect, usestate } from 'react'; import parse from ' /parseconfig'; const itemslist = () => { const \[items, setitems] = usestate(\[]); useeffect(() => { const fetchitems = async () => { const items = parse object extend("items"); const query = new parse query(items); try { const results = await query find(); setitems(results); } catch (error) { console error("ошибка при получении элементов ", error); } }; fetchitems(); }, \[]); return ( \<div> \<h2>элементы\</h2> \<ul> {items map(item => ( \<li key={item id}> {item get("title")} — {item get("description")} \</li> ))} \</ul> \</div> ); }; export default itemslist; вариант b использование rest или graphql если ваша среда не поддерживает parse sdk, вы можете выполнять операции crud с помощью rest или graphql например, чтобы получить элементы с помощью rest // example rest call to fetch 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('fetched items ', data results); } catch (error) { console error('error fetching items ', error); } }; fetchitems(); интегрируйте эти api вызовы в ваши компоненты react по мере необходимости шаг 5 – защита вашего бэкенда списки управления доступом (acl) обеспечьте безопасность ваших данных, назначив 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 only the owner can read and write 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); } } разрешения на уровне класса (clp) в панели управления back4app настройте clp для каждой коллекции, чтобы установить правила доступа по умолчанию это гарантирует, что только аутентифицированные или авторизованные пользователи могут получить доступ к конфиденциальным данным шаг 6 – аутентификация пользователей настройка учетных записей пользователей back4app использует класс user от parse для аутентификации в вашем приложении react обработайте регистрацию и вход пользователя следующим образом // src/components/auth js import react, { usestate } from 'react'; import parse from ' /parseconfig'; export const signup = () => { const \[username, setusername] = usestate(''); const \[password, setpassword] = usestate(''); const \[email, setemail] = usestate(''); const handlesignup = async (e) => { e preventdefault(); const user = new parse user(); user set('username', username); user set('password', password); user set('email', email); try { await user signup(); alert('user signed up successfully!'); } catch (error) { alert('error signing up ' + error message); } }; return ( \<form onsubmit={handlesignup}> \<input type="text" placeholder="username" value={username} onchange={e => setusername(e target value)} /> \<input type="password" placeholder="password" value={password} onchange={e => setpassword(e target value)} /> \<input type="email" placeholder="email" value={email} onchange={e => setemail(e target value)} /> \<button type="submit">sign up\</button> \</form> ); }; аналогичный подход можно использовать для входа и управления сессиями дополнительные функции, такие как социальные входы, подтверждение электронной почты и сброс пароля, могут быть настроены в панели управления back4app шаг 7 – развертывание вашего фронтенда reactjs с помощью веб развертывания функция веб развертывания back4app позволяет вам без проблем размещать ваш фронтенд reactjs, развертывая ваш код из репозитория github в этом разделе вы узнаете, как подготовить вашу производственную сборку, зафиксировать ваш исходный код в github, интегрировать ваш репозиторий с веб развертыванием и развернуть ваш сайт 7 1 подготовьте вашу производственную сборку откройте папку вашего проекта в терминале запустите команду сборки npm run build эта команда создает папку build с оптимизированными статическими файлами (включая index html , javascript, css и изображения) проверьте сборку убедитесь, что папка build содержит файл index html вместе с необходимыми подкаталогами активов 7 2 организуйте и загрузите ваш исходный код ваш репозиторий должен включать полный исходный код вашего фронтенда на reactjs типичная структура файлов может выглядеть так basic crud app reactjs frontend/ ├── node modules/ ├── public/ │ └── index html ├── src/ │ ├── app js │ ├── parseconfig js │ └── components/ │ ├── itemslist js │ └── auth js ├── package json └── readme md примеры файлов исходного кода src/parseconfig js // src/parseconfig js import parse from 'parse'; // replace with your actual back4app credentials parse initialize('your application id', 'your javascript key'); parse serverurl = 'https //parseapi back4app com'; export default parse; src/app js // src/app js import react, { useeffect, usestate } from 'react'; import parse from ' /parseconfig'; function app() { const \[items, setitems] = usestate(\[]); const \[newitemtitle, setnewitemtitle] = usestate(""); const \[newitemdescription, setnewitemdescription] = usestate(""); const \[editingitemid, seteditingitemid] = usestate(null); const \[editingtitle, seteditingtitle] = usestate(""); const \[editingdescription, seteditingdescription] = usestate(""); const fetchitems = async () => { const items = parse object extend("items"); const query = new parse query(items); try { const results = await query find(); setitems(results); } catch (error) { console error("error fetching items ", error); } }; useeffect(() => { fetchitems(); }, \[]); const handleadditem = async () => { const items = parse object extend("items"); const item = new items(); item set("title", newitemtitle); item set("description", newitemdescription); try { await item save(); setnewitemtitle(""); setnewitemdescription(""); fetchitems(); } catch (error) { console error("error saving item ", error); } }; const handledeleteitem = async (id) => { try { const item = await parse object createwithoutdata("items", id); await item destroy(); fetchitems(); } catch (error) { console error("error deleting item ", error); } }; const starteditingitem = (item) => { seteditingitemid(item id); seteditingtitle(item get("title")); seteditingdescription(item get("description")); }; const handleupdateitem = async () => { try { const items = parse object extend("items"); const item = new items(); item id = editingitemid; item set("title", editingtitle); item set("description", editingdescription); await item save(); seteditingitemid(null); seteditingtitle(""); seteditingdescription(""); fetchitems(); } catch (error) { console error("error updating item ", error); } }; return ( \<div style={{ padding '2rem' }}> \<h1>items\</h1> \<div style={{ marginbottom '1rem' }}> \<h2>add item\</h2> \<input type="text" placeholder="title" value={newitemtitle} onchange={(e) => setnewitemtitle(e target value)} style={{ marginright '0 5rem' }} /> \<input type="text" placeholder="description" value={newitemdescription} onchange={(e) => setnewitemdescription(e target value)} style={{ marginright '0 5rem' }} /> \<button onclick={handleadditem}>add item\</button> \</div> \<h2>item list\</h2> \<ul> {items map((item) => ( \<li key={item id} style={{ marginbottom '1rem' }}> {editingitemid === item id ? ( \<div> \<input type="text" value={editingtitle} onchange={(e) => seteditingtitle(e target value)} style={{ marginright '0 5rem' }} /> \<input type="text" value={editingdescription} onchange={(e) => seteditingdescription(e target value)} style={{ marginright '0 5rem' }} /> \<button onclick={handleupdateitem}>save\</button> \<button onclick={() => seteditingitemid(null)} style={{ marginleft '0 5rem' }}> cancel \</button> \</div> ) ( \<div> \<strong>{item get("title")}\</strong> {item get("description")} \<button onclick={() => starteditingitem(item)} style={{ marginleft '1rem' }}> edit \</button> \<button onclick={() => handledeleteitem(item id)} style={{ marginleft '0 5rem' }}> delete \</button> \</div> )} \</li> ))} \</ul> \</div> ); } export default app; \#### commit your code to github 1\ initialize a git repository in your project folder (if you haven’t already) ```bash git init добавьте ваши исходные файлы git add зафиксируйте ваши изменения git commit m "первоначальная фиксация исходного кода фронтенда reactjs" создайте репозиторий на github например, создайте репозиторий с именем basic crud app reactjs frontend на github отправьте ваш код на github git remote add origin https //github com/your username/basic crud app reactjs frontend git git push u origin main 7 3 интеграция вашего репозитория github с веб развертыванием доступ к веб развертыванию войдите в свою панель управления back4app, перейдите к своему проекту (basic crud app reactjs) и нажмите на функцию веб развертывание подключение к github если вы еще этого не сделали, интегрируйте свою учетную запись github, следуя подсказкам на экране это соединение позволяет back4app получить доступ к вашему репозиторию выберите свой репозиторий и ветку выберите репозиторий, который вы создали (например, basic crud app reactjs frontend ) и выберите ветку (например, main ) которая содержит ваш код reactjs 7 4 настройте вашу развертку укажите дополнительные детали конфигурации команда сборки если ваш репозиторий не содержит предварительно собранной папки сборки , укажите команду сборки (например, npm run build ) back4app выполнит эту команду во время развертывания каталог вывода установите каталог вывода на build , чтобы back4app знал, в какой папке находятся ваши статические файлы сайта переменные окружения если ваше приложение зависит от каких либо переменных окружения (например, ключи api), добавьте их в настройки конфигурации 7 5 докеризуйте ваш проект приложения reactjs если вы предпочитаете использовать docker для развертывания, вы можете контейнеризовать ваше приложение reactjs включите dockerfile в ваш репозиторий с содержимым, аналогичным следующему \# use an official node runtime as a parent image from node 16 alpine as build \# set the working directory workdir /app \# copy package json and package lock json copy package json / \# install dependencies run npm install \# copy the rest of the application copy \# build the react app run npm run build \# use nginx to serve the build from nginx\ stable alpine copy from=build /app/build /usr/share/nginx/html expose 80 cmd \["nginx", " g", "daemon off;"] включите этот dockerfile в ваш репозиторий затем, в конфигурации развертывания веб приложения, выберите опцию развертывания docker, чтобы собрать и развернуть ваше контейнеризированное приложение 7 6 разверните ваше приложение нажмите кнопку развертывания после настройки параметров развертывания нажмите кнопку развернуть мониторинг процесса сборки back4app извлечет ваш код из github, выполнит команду сборки (если она настроена) и развернет ваше приложение в контейнере получите ваш url после завершения развертывания back4app предоставит url, по которому размещено ваше приложение reactjs 7 7 проверьте ваше развертывание посетите предоставленный url откройте url в вашем веб браузере, чтобы просмотреть ваш развернутый сайт проверьте приложение убедитесь, что ваше приложение загружается правильно, все маршруты работают как ожидалось, и все ресурсы (css, javascript, изображения) правильно обслуживаются устраните неполадки при необходимости используйте инструменты разработчика вашего браузера, чтобы проверить наличие ошибок если возникнут проблемы, просмотрите журналы развертывания в back4app и проверьте интеграцию с github и настройки сборки шаг 8 – заключение и следующие шаги поздравляем! вы создали полноценное базовое crud приложение с использованием reactjs и back4app вы настроили проект под названием basic crud app reactjs , разработали детализированные коллекции базы данных для элементов и пользователей, и управляли своими данными через мощное приложение администратора вы также интегрировали свой фронтенд на reactjs с бэкендом и защитили свои данные с помощью надежных средств управления доступом следующие шаги улучшите свой фронтенд расширьте свое приложение на reactjs такими функциями, как детализированные представления элементов, функциональность поиска и уведомления в реальном времени интегрируйте дополнительные функции рассмотрите возможность добавления более сложной логики бэкенда (например, облачные функции), интеграции сторонних api или контроля доступа на основе ролей изучите дополнительные ресурсы просмотрите документацию back4app https //www back4app com/docs и дополнительные учебные пособия для более глубокого изучения оптимизации производительности и пользовательских интеграций следуя этому руководству, вы теперь обладаете навыками для создания надежного, масштабируемого crud бэкенда для вашего приложения на reactjs с использованием back4app удачного кодирования!