How to Build a CRUD App with Backbone.js? A Step-by-Step Tutorial

введение в этом руководстве вы узнаете, как создать функциональное crud (создание, чтение, обновление, удаление) приложение с использованием backbone js этот пошаговый процесс поможет вам понять основные операции веб приложения, показывая, как построить систему crud, которая эффективно манипулирует и управляет данными вы начнете с настройки проекта back4app под названием basic crud app backbone в качестве надежного бэкенда для вашего приложения после этого вы разработаете гибкую схему базы данных, определив конкретные коллекции и поля — либо вручную, либо с помощью ai агента back4app этот процесс гарантирует, что ваша структура данных будет адаптирована для бесшовных взаимодействий crud затем вы будете использовать интуитивно понятное приложение администратора back4app, которое имеет интерфейс перетаскивания, чтобы легко управлять вашими коллекциями данных этот инструмент упрощает операции crud, делая управление данными на бэкенде простым наконец, вы подключите свой фронтенд на backbone js к back4app, используя rest api, и руководство основывается на стандартных api вызовах для взаимодействия с вашим бэкендом вы также узнаете, как защитить свои данные с помощью надежных средств контроля доступа к концу этого учебника вы создадите веб приложение, готовое к производству, которое поддерживает функции crud и включает аутентификацию пользователей, а также расширенные функции управления данными ключевые выводы освойте искусство создания crud приложений, которые эффективно обрабатывают данные с помощью надежного серверного решения изучите стратегии создания масштабируемого проектирования базы данных и интеграции его с фронтендом на backbone js научитесь использовать функции перетаскивания в приложении back4app admin для упрощения задач создания, чтения, обновления и удаления познакомьтесь с методами развертывания, включая контейнеризацию docker, чтобы быстро запустить ваше приложение предварительные требования перед тем как начать, убедитесь, что у вас есть аккаунт back4app и активный проект смотрите начало работы с back4app https //www back4app com/docs/get started/new parse app если вам нужна помощь настройка разработки на backbone js вы можете включить backbone js через менеджер пакетов, такой как npm, или напрямую с cdn базовое понимание javascript, backbone js и restful api посмотрите документацию backbone js https //backbonejs org/#getting started для освежения знаний, если это необходимо шаг 1 – инициализация проекта создание вашего проекта back4app войдите в свою учетную запись back4app нажмите кнопку “новое приложение” на вашей панели управления назовите ваш проект basic crud app backbone и следуйте инструкциям для его настройки создать новый проект после создания вашего проекта он будет виден на вашей панели управления, готовый к настройке в качестве вашего бэкенда для приложения шаг 2 – создание схемы базы данных определение вашей модели данных для этого crud приложения вы создадите несколько коллекций ниже приведены образцы коллекций с полями и типами, которые вам нужно установить для вашей схемы, чтобы ваше приложение могло выполнять все операции crud 1\ коллекция элементов эта коллекция будет содержать детали для каждого элемента поле тип данных описание ид идентификатор объекта автоматически сгенерированный уникальный идентификатор название строка название или заголовок элемента описание строка краткий обзор предмета создано в дата метка времени, указывающая, когда элемент был добавлен обновлено дата метка времени для самого последнего обновления 2\ коллекция пользователей эта коллекция хранит данные пользователей и информацию для аутентификации поле тип данных описание ид идентификатор объекта автоматически сгенерированный уникальный идентификатор имя пользователя строка уникальный идентификатор для пользователя электронная почта строка уникальный адрес электронной почты пользователя хэш пароля строка безопасно захешированный пароль создано в дата время создания аккаунта обновлено дата последняя метка времени изменения данных пользователя вы можете создать эти коллекции вручную через панель управления back4app, добавив новый класс для каждой коллекции и настроив соответствующие поля создать новый класс просто выберите тип данных, задайте имя поля, предоставьте значение по умолчанию, если это необходимо, и отметьте поле как обязательное создать колонку использование ai агента back4app для создания схемы ai агент back4app — это удобный инструмент в вашей панели управления, который помогает автоматизировать создание схемы базы данных вводя описательный запрос для ваших желаемых коллекций и полей, ai агент может быстро сгенерировать необходимую структуру базы данных, экономя ваше время и обеспечивая согласованность как использовать ai агента получите доступ к ai агенту войдите в свою панель управления back4app и найдите ai агента в навигации или настройках проекта опишите свою модель данных введите запрос, который описывает коллекции и поля, которые вам нужны просмотрите и примените оцените предложенную схему и внесите изменения в ваш проект пример запроса create the following collections for my back4app project 1\) collection items \ fields \ id objectid (auto generated) \ title string \ description string \ created at date (auto generated) \ updated at date (auto updated) 2\) collection users \ fields \ id objectid (auto generated) \ 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 операциями с помощью приложения администратора в приложении администратора вы можете добавить новые записи используйте опцию “добавить запись” в любой коллекции (например, товары), чтобы создать новые записи просмотреть/изменить записи нажмите на запись, чтобы просмотреть или изменить ее детали удалить записи используйте функцию удаления, чтобы очистить ненужные данные этот интерфейс улучшает пользовательский опыт, упрощая все задачи управления данными шаг 4 – подключение backbone js к back4app теперь, когда ваш бэкенд настроен, пришло время интегрировать ваш фронтенд на backbone js с back4app использование backbone js с rest api вызовами поскольку sdk parse не предназначен для backbone js, вы будете использовать встроенные модели, коллекции и представления backbone в сочетании с rest api вызовами для взаимодействия с back4app настройка ваших моделей и коллекций backbone начните с определения модели для ваших элементов и соответствующей коллекции например // models/item js var item = backbone model extend({ urlroot 'https //parseapi back4app com/classes/items', idattribute 'objectid', defaults { title '', description '' } }); export default item; // collections/itemscollection js import item from ' /models/item'; var itemscollection = backbone collection extend({ model item, url 'https //parseapi back4app com/classes/items', parse function(response) { return response results; } }); export default itemscollection; создание представления backbone для взаимодействий crud создайте представление для отображения списка элементов и обработки действий пользователя, таких как добавление, редактирование и удаление // views/itemsview\ js import backbone from 'backbone'; import from 'underscore'; import itemscollection from ' /collections/itemscollection'; var itemsview = backbone view\ extend({ el '#app', initialize function() { this collection = new itemscollection(); this listento(this collection, 'sync update', this render); this collection fetch({ headers { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key' } }); }, events { 'click #add item' 'additem', 'click delete item' 'deleteitem', 'click edit item' 'edititem', 'click #save edit' 'saveedit' }, render function() { var template = template(` \<h2>items\</h2> \<div> \<input id="new title" type="text" placeholder="title"> \<input id="new description" type="text" placeholder="description"> \<button id="add item">add item\</button> \</div> \<ul> <% collection each(function(item) { %> \<li data id="<%= item id %>"> \<strong><%= item get('title') %>\</strong> <%= item get('description') %> \<button class="edit item">edit\</button> \<button class="delete item">delete\</button> \</li> <% }); %> \</ul> \<div id="edit section" style="display\ none;"> \<input id="edit title" type="text"> \<input id="edit description" type="text"> \<button id="save edit">save\</button> \</div> `); this $el html(template({ collection this collection })); return this; }, additem function() { var title = this $('#new title') val(); var description = this $('#new description') val(); var newitem = this collection create( { title title, description description }, { headers { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key' }, wait true, success function() { console log('item added successfully '); }, error function(error) { console error('failed to add item ', error); } } ); }, deleteitem function(e) { var itemid = $(e currenttarget) closest('li') data('id'); var item = this collection get(itemid); item destroy({ headers { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key' }, success function() { console log('item removed '); }, error function(error) { console error('error deleting item ', error); } }); }, edititem function(e) { var itemid = $(e currenttarget) closest('li') data('id'); var item = this collection get(itemid); this $('#edit section') show(); this $('#edit title') val(item get('title')); this $('#edit description') val(item get('description')); this currenteditid = itemid; }, saveedit function() { var newtitle = this $('#edit title') val(); var newdescription = this $('#edit description') val(); var item = this collection get(this currenteditid); item save( { title newtitle, description newdescription }, { headers { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key' }, success function() { console log('item updated '); }, error function(error) { console error('update failed ', error); } } ); this $('#edit section') hide(); } }); export default itemsview; этот вид получает элементы из back4app с использованием rest api и позволяет вам добавлять, редактировать и удалять записи шаг 5 – обеспечение безопасности вашего бэкенда реализация списков контроля доступа (acl) защитите свои данные, установив acl на ваши объекты например, чтобы ограничить доступ к элементу только его создателю function createsecureitem(itemdata, owner) { var item = backbone model extend({ urlroot 'https //parseapi back4app com/classes/items' }); var item = new item(); item set({ title itemdata title, description itemdata description }); // assume a custom api call or configuration that assigns acls based on the owner // here you would include acl headers or a similar mechanism as needed item save(null, { headers { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key' }, success function(saveditem) { console log('secure item created ', saveditem); }, error function(err) { console error('error creating secure item ', err); } }); } настройка разрешений на уровне класса (clp) в вашей панели управления back4app настройте clp для каждой коллекции, чтобы гарантировать, что только авторизованные пользователи могут получать доступ к конфиденциальным данным или изменять их шаг 6 – аутентификация пользователей настройка учетных записей пользователей в backbone js back4app использует систему управления пользователями, аналогичную классу user в parse для аутентификации в вашем приложении backbone js вы можете обрабатывать регистрацию и вход пользователей, используя ajax запросы к rest api back4app например, чтобы зарегистрировать нового пользователя function signupuser(username, password, email) { $ ajax({ url 'https //parseapi back4app com/users', method 'post', headers { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key', 'content type' 'application/json' }, data json stringify({ username username, password password, email email }), success function(response) { alert('user registered successfully!'); }, error function(error) { alert('error during registration ' + error responsejson error); } }); } аналогичный метод можно применить для входа пользователей и управления сессиями шаг 7 – развертывание вашего фронтенда backbone js функция веб развертывания back4app позволяет вам без проблем хостить ваше приложение backbone js, связывая его с вашим репозиторием github 7 1 создание производственной сборки откройте каталог вашего проекта в терминале запустите процесс сборки если вы используете сборщик задач или бандлер (например, webpack или gulp), выполните команду (например, npm run build ) для генерации оптимизированных статических ресурсов подтвердите сборку убедитесь, что ваш каталог вывода сборки содержит основной html файл и все необходимые папки с ресурсами 7 2 организация и загрузка вашего исходного кода ваш репозиторий github должен включать все исходные файлы для вашего приложения backbone js типичная структура может быть следующей basic crud app backbone/ \| bower components/ \| public/ \| └── index html \| src/ \| ├── models/ \| │ └── item js \| ├── collections/ \| │ └── itemscollection js \| ├── views/ \| │ └── itemsview\ js \| └── app js \| package json \| readme md пример конфигурационного файла src/app js import backbone from 'backbone'; import itemsview from ' /views/itemsview'; $(document) ready(function() { new itemsview(); }); отправка на github инициализируйте git (если не сделано) git init стадируйте ваши файлы git add зафиксируйте ваши изменения git commit m "первоначальная фиксация кода фронтенда backbone js" создайте репозиторий на github (например, basic crud app backbone ) отправьте ваш репозиторий git remote add origin https //github com/your username/basic crud app backbone git git push u origin main 7 3 интеграция вашего репозитория с веб развертыванием back4app перейдите в раздел веб развертывания в вашей панели управления back4app перейдите к вашему проекту и нажмите на веб развертывание свяжите свою учетную запись github следуйте инструкциям, чтобы авторизовать back4app для доступа к вашему репозиторию выберите ваш репозиторий и ветку выберите ваш basic crud app backbone репозиторий и основную ветку 7 4 конфигурация развертывания предоставьте дополнительные настройки команда сборки если нет предварительно собранных ресурсов, укажите команду (например, npm run build ) для сборки вашего приложения каталог вывода укажите папку (например, public или dist ) с вашими статическими файлами переменные окружения добавьте необходимые ключи api или конфигурации 7 5 докеризация вашего проекта backbone js если вы выберете docker для развертывания, включите dockerfile аналогичный \# use an official node image to build the application from node 16 alpine as builder \# set working directory workdir /app \# copy package files and install dependencies copy package json / run npm install \# copy the entire project and build the app copy run npm run build \# use nginx to serve the static files from nginx\ stable alpine copy from=builder /app/public /usr/share/nginx/html expose 80 cmd \["nginx", " g", "daemon off;"] настройте back4app для использования развертывания docker, если это необходимо 7 6 запуск вашего приложения нажмите кнопку развертывания после настройки конфигурации нажмите развернуть мониторинг сборки back4app получит ваш код, выполнит процесс сборки и развернет ваше контейнеризированное приложение получите ваш живой url после развертывания будет предоставлен url, по которому размещено ваше приложение backbone js 7 7 проверка вашего развертывания посетите предоставленный url откройте url в вашем браузере, чтобы подтвердить, что ваше приложение загружается правильно проверьте функциональность убедитесь, что навигация, получение данных и операции crud работают как ожидалось устранение неполадок используйте инструменты браузера и логи back4app для решения любых проблем шаг 8 – заключение и будущие направления отличная работа! вы успешно создали crud приложение с использованием backbone js и back4app вы настроили проект под названием basic crud app backbone , определили детализированные коллекции для элементов и пользователей, и управляли своим бэкендом с помощью admin app кроме того, вы интегрировали свой фронтенд на backbone js через вызовы rest api и применили основные меры безопасности следующие шаги улучшите фронтенд расширьте свое приложение на backbone js более детализированными представлениями, возможностями поиска и обновлениями в реальном времени добавьте новые функции рассмотрите возможность интеграции более сложной логики бэкенда, сторонних api или уточненных средств управления доступом дальнейшее обучение посетите документацию back4app https //www back4app com/docs для получения дополнительных сведений о повышении производительности и пользовательских интеграциях следуя этому руководству, вы теперь обладаете знаниями для создания надежного, масштабируемого crud бэкенда для вашего приложения на backbone js с использованием back4app удачного кодирования и изучения новых функций!