How to Build a Basic CRUD App with Knockout.js: A Step-by-Step Guide

обзор в этом руководстве вы узнаете, как создать полнофункциональное crud (создание, чтение, обновление, удаление) приложение с использованием knockout js этот учебник демонстрирует, как реализовать основные операции в веб приложении, используя back4app в качестве вашего серверного решения мы начнем с настройки проекта back4app под названием basic crud app knockout , создавая надежную систему управления данными для вашего приложения после этого вы разработаете гибкую схему базы данных, определив коллекции и поля — либо вручную, либо с помощью ai агента back4app — чтобы гарантировать, что ваше приложение сможет эффективно обрабатывать все операции crud затем вы воспользуетесь приложением back4app admin app, удобным инструментом перетаскивания, чтобы легко управлять вашими коллекциями этот интерфейс упрощает процесс выполнения операций crud наконец, вы интегрируете ваш фронтенд на knockout js с back4app, используя вызовы rest api эта интеграция также охватит безопасные практики работы с сервером с правильными контролями доступа к концу этого учебника вы создадите веб приложение, готовое к производству, которое поддерживает базовую функциональность crud, включает аутентификацию пользователей и обладает надежным управлением данными основные выводы понять, как разрабатывать приложения crud, которые эффективно управляют данными с помощью back4app получить практический опыт в проектировании масштабируемого бэкенда и связывании его с фронтендом на knockout js научиться использовать инструмент администрирования без кода (back4app admin app) для выполнения операций создания, чтения, обновления и удаления изучить стратегии развертывания, включая контейнеризацию docker, чтобы быстро запустить ваше веб приложение предварительные требования перед началом убедитесь, что у вас есть аккаунт back4app и активный проект смотрите начало работы с back4app https //www back4app com/docs/get started/new parse app если вам нужна помощь настроенная среда разработки для knockout js включите библиотеки через cdn или установите через npm, если предпочитаете модульную настройку базовые знания javascript, knockout js и rest api обратитесь к документации knockout js https //knockoutjs com/documentation/introduction html для введения шаг 1 – инициализация проекта настройка вашего проекта back4app получите доступ к вашей учетной записи back4app выберите опцию “новое приложение” на вашей панели управления введите имя проекта basic crud app knockout и завершите процесс настройки создать новый проект после создания ваш проект будет виден на вашей панели управления, формируя основу для вашей конфигурации бэкенда шаг 2 – создание схемы вашей базы данных проектирование структуры данных для этого crud приложения вы создадите несколько коллекций ниже приведены образцы коллекций с предложенными полями и типами данных для помощи в проектировании вашей базы данных эта схема поддерживает основные операции crud 1 коллекция предметов поле тип данных детали ид идентификатор объекта автоматически сгенерированный уникальный ключ название строка название элемента описание строка краткое резюме предмета создано в дата время создания элемента обновлено дата время последнего обновления 2 сбор пользователей поле тип данных детали ид идентификатор объекта автоматически сгенерированный уникальный идентификатор имя пользователя строка уникальный идентификатор для каждого пользователя электронная почта строка уникальный адрес электронной почты пользователя хэш пароля строка безопасный хэш пароля пользователя создано в дата время создания аккаунта обновлено дата метка времени для последнего обновления аккаунта вы можете вручную создать эти коллекции в панели управления back4app, добавив новый класс для каждой коллекции и определив поля создать новый класс определите свои поля, выбрав тип данных, назвав поле, установив значения по умолчанию и отметив обязательные поля создать колонку использование ai агента back4app для автоматизации схемы ai агент back4app упрощает генерацию схемы непосредственно из вашей панели управления он может автоматически создавать коллекции и поля на основе вашего описания шаги для использования ai агента запустите ai агента получите доступ к нему через панель управления back4app или настройки проекта подробно опишите свою модель данных вставьте описательный запрос, перечисляющий ваши необходимые коллекции и поля просмотрите и примените агент предложит схему просмотрите и подтвердите предложения, чтобы интегрировать их в ваш проект пример запроса create the following collections in 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) этот процесс экономит время и обеспечивает согласованную, оптимизированную схему для вашего приложения шаг 3 – активация админ приложения и управление crud операциями обзор интерфейса администратора приложение администратора back4app предоставляет решение без кода для управления вашими данными на сервере его интуитивно понятный интерфейс перетаскивания позволяет легко выполнять операции crud как активировать приложение администратора перейдите в меню “дополнительно” на вашей панели управления back4app выберите “приложение администратора” и нажмите на “включить приложение администратора ” настройте свои учетные данные администратора создав первого администратора, который также настраивает роли, такие как b4aadminuser и основные системные коллекции включить приложение администратора после активации войдите в приложение администратора, чтобы начать управление данными панель управления приложения администратора использование интерфейса администратора для crud в приложении администратора вы можете добавить записи нажмите кнопку “добавить запись” в коллекции (например, товары), чтобы создать новые записи просмотреть/изменить записи выберите запись, чтобы просмотреть ее детали или обновить поля удалить записи удалите любые записи, которые больше не нужны этот упрощенный интерфейс улучшает удобство использования и ускоряет управление вашими данными шаг 4 – подключение knockout js к back4app с вашим бэкендом на месте, пришло время интегрировать ваш фронтенд на knockout js с помощью вызовов rest api использование rest api для операций crud поскольку sdk parse обычно не используется с knockout js, вы будете выполнять вызовы api напрямую ниже приведены примеры того, как обрабатывать задачи crud пример получения элементов // example rest call to retrieve items function fetchitems() { fetch('https //parseapi back4app com/classes/items', { headers { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key' } }) then(response => response json()) then(data => { viewmodel items(data results); }) catch(error => console error('error retrieving items ', error)); } fetchitems(); пример viewmodel на knockout js ниже приведен пример viewmodel для управления вашими элементами function appviewmodel() { var self = this; self items = ko observablearray(\[]); self newtitle = ko observable(""); self newdescription = ko observable(""); self additem = function() { var newitem = { title self newtitle(), description self newdescription() }; fetch('https //parseapi back4app com/classes/items', { method 'post', headers { 'content type' 'application/json', 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key' }, body json stringify(newitem) }) then(response => response json()) then(data => { self items push(data); self newtitle(""); self newdescription(""); }) catch(error => console error('error adding item ', error)); }; self deleteitem = function(item) { fetch('https //parseapi back4app com/classes/items/' + item objectid, { method 'delete', headers { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key' } }) then(() => { self items remove(item); }) catch(error => console error('error deleting item ', error)); }; // additional methods for update and read operations can be added similarly } // activate knockout js ko applybindings(new appviewmodel()); эта модель представления интегрирует вызовы api для создания и удаления элементов, управляя состоянием с помощью наблюдаемых knockout js шаг 5 – защита вашего бэкенда списки контроля доступа (acls) защитите свои данные, назначив acl для каждого объекта например, чтобы сделать элемент доступным только для его создателя function createsecureitem(itemdata, owneruserid) { var newitem = { title itemdata title, description itemdata description, acl { " " { "read" false, "write" false }, \[owneruserid] { "read" true, "write" true } } }; fetch('https //parseapi back4app com/classes/items', { method 'post', headers { 'content type' 'application/json', 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key' }, body json stringify(newitem) }) then(response => response json()) then(data => console log('secure item created ', data)) catch(error => console error('error creating item ', error)); } разрешения на уровне класса (clp) в панели управления back4app установите clp для каждой коллекции, чтобы гарантировать, что только аутентифицированные или авторизованные пользователи могут получить доступ к конфиденциальной информации шаг 6 – реализация аутентификации пользователей настройка учетных записей пользователей back4app использует класс пользователя для управления аутентификацией в вашем приложении knockout js обрабатывайте регистрацию и вход пользователей с помощью вызовов rest api пример регистрация пользователя function registeruser(username, password, email) { var user = { username username, password password, email email }; fetch('https //parseapi back4app com/users', { method 'post', headers { 'content type' 'application/json', 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key' }, body json stringify(user) }) then(response => response json()) then(data => alert('registration successful!')) catch(error => alert('registration error ' + error message)); } аналогичный подход можно использовать для входа пользователей и управления сессиями дополнительные функции, такие как проверка электронной почты и сброс пароля, могут быть настроены через back4app шаг 7 – развертывание вашего фронтенда knockout js с использованием веб развертывания функция веб развертывания back4app позволяет вам без труда размещать ваш фронтенд knockout js, связывая его с вашим репозиторием github следуйте этим шагам 7 1 создайте ваши производственные файлы откройте каталог вашего проекта в терминале запустите процесс сборки если вы используете инструмент сборки, такой как webpack, выполните соответствующую команду (например, npm run build ) для компиляции ваших ресурсов подтвердите сборку убедитесь, что ваша папка сборки содержит index html и все необходимые статические ресурсы 7 2 организуйте и зафиксируйте свой код в github ваш репозиторий должен включать все исходные файлы для вашего фронтенда на knockout js пример структуры может быть следующим basic crud app knockout frontend/ ├── node modules/ ├── public/ │ └── index html ├── src/ │ ├── index js │ ├── appviewmodel js │ └── styles css ├── package json └── readme md пример файла src/appviewmodel js function appviewmodel() { var self = this; self items = ko observablearray(\[]); self newtitle = ko observable(""); self newdescription = ko observable(""); self additem = function() { var itemdata = { title self newtitle(), description self newdescription() }; fetch('https //parseapi back4app com/classes/items', { method 'post', headers { 'content type' 'application/json', 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key' }, body json stringify(itemdata) }) then(response => response json()) then(data => { self items push(data); self newtitle(""); self newdescription(""); }) catch(error => console error('error adding item ', error)); }; // additional crud methods (update, delete) can be defined similarly } // apply knockout bindings ko applybindings(new appviewmodel()); коммит и отправка кода в github инициализируйте git (если еще не сделано) git init подготовьте ваши файлы git add зафиксируйте ваши изменения git commit m "первоначальный коммит для фронтенда knockout js" создайте репозиторий на github (например, basic crud app knockout frontend ) отправьте ваш код git remote add origin https //github com/your username/basic crud app knockout frontend git git push u origin main 7 3 связывание вашего репозитория github с веб развертыванием получите доступ к функции веб развертывания в вашей панели управления back4app выберите ваш проект (basic crud app knockout) и нажмите на веб развертывание подключитесь к github следуйте инструкциям для интеграции вашей учетной записи github выберите ваш репозиторий и ветку выберите ваш репозиторий (например, basic crud app knockout frontend ) и ветку (например, main ) содержащую ваш код 7 4 настройки развертывания команда сборки если в вашем репозитории нет предварительно собранной папки, укажите команду сборки (например, npm run build ) каталог вывода установите это в папку, содержащую ваши статические файлы (например, build или public ) переменные окружения добавьте любые необходимые переменные окружения, такие как ключи api 7 5 контейнеризация вашего приложения с помощью docker (по желанию) если вы хотите использовать docker, включите dockerfile в ваш репозиторий # use an official node image for building from node 16 alpine as build \# set working directory workdir /app \# copy package files and install dependencies copy package json / run npm install \# copy source code and build the app copy run npm run build \# use nginx to serve the static files from nginx\ stable alpine copy from=build /app/build /usr/share/nginx/html expose 80 cmd \["nginx", " g", "daemon off;"] 7 6 развертывание вашего приложения нажмите кнопку развернуть после настройки параметров начните развертывание мониторинг процесса back4app получит ваш код, соберет его (если необходимо) и развернет ваше контейнеризированное приложение доступ к вашему приложению после завершения back4app предоставит url для доступа к вашему приложению knockout js 7 7 тестирование развертывания откройте предоставленный url проверьте, загружается ли ваше приложение правильно запустите тесты убедитесь, что все маршруты и ресурсы (css, js, изображения) работают отладка при необходимости используйте инструменты разработчика для проверки ошибок и обратитесь к журналам развертывания back4app шаг 8 – заключение и будущие направления молодец! вы успешно создали базовое crud приложение с использованием knockout js и back4app вы настроили проект под названием basic crud app knockout , разработали подробные коллекции для элементов и пользователей и управляли своими данными через админ приложение кроме того, вы интегрировали свой фронтенд на knockout js с бэкендом, используя вызовы rest api, и реализовали безопасные контроль доступа следующие шаги расширьте свой фронтенд улучшите свое приложение такими функциями, как подробные представления элементов, возможности поиска или обновления в реальном времени добавьте сложную логику бэкенда изучите использование облачных функций или интеграцию сторонних сервисов углубитесь обратитесь к документации back4app https //www back4app com/docs для дальнейшей оптимизации и сложных интеграций следуя этому руководству, вы теперь обладаете знаниями для создания надежного и масштабируемого crud приложения с использованием knockout js и back4app удачного кодирования!