Skip to content
Веб-разработка
GitHub

Редактирование и сохранение модели

Цель: закрепить знания по работе с AJAX, добавив в проект работу с формой и задействуя оставшиеся конечные точки разработанного API.

Содержание и порядок выполнения лабораторной работы

Новая модель

  1. К прошлому заданию добавить кнопку создания новой модели.
  2. При ее нажатии раскрывается секция с формой и canvas c three.js.
  3. В форме присутствуют поля необходимые для заполнения документа в коллекции в базе данных. Для создания новой модели требуется выбрать минимум: тип объекта из 2-х вариантов или более вариантов (куб, сфера или другие), их базовую характеристику и цвет.
  4. В конце формы есть кнопка для сохранения модели. Если в памяти есть идентификатор _id модели, тогда используем конечную точку c методом PUT/PATCH в зависимости от вашей реализации, если же нет _id, то используем - POST.
  5. Внизу страницы должен быть canvas с подключенным к нему отрисовщиком из three.js. Для загрузки данных и их отображения на сцене используйте ObjectLoader класс.
  6. Для сохранения объекта в формате JSON используйте на его экземпляре метод .toJSON() и этот метод лучше вызывать при событии submit на форме. В этой работе проще на сервере хранить только информацию о mesh (geometry + material), а сцену, освещение, камеру сделать одинаковой для всех.
  7. Модель в сцене логичнее обновлять когда поле, с которым взаимодействовал пользователь потеряло фокус.
  8. После сохранения данных закрыть раздел с формой и отображением модели. Отправить запрос на получение нового списка всех моделей.

Существующая модель

  1. Если была нажата кнопка для просмотра модели в таблице, то полученные с сервера данные вы добавляете в форму в качестве значений.
  2. В Three.js с помощью класса ObjectLoader добавляется объект из пришедшего с сервера ответа в сцену.
  3. В конце формы есть кнопка для сохранения модели. Если в памяти есть идентификатор _id модели, тогда используем конечную точку c методом PUT/PATCH в зависимости от вашей реализации, если же нет _id, то используем - POST.
  4. Для сохранения объекта в формате JSON используйте на его экземпляре метод .toJSON() и этот метод лучше вызывать при событии submit на форме. В этой работе проще на сервере хранить только информацию о mesh (geometry + material), а сцену, освещение, камеру сделать одинаковой для всех.
  5. Модель в сцене логичнее обновлять когда поле, с которым взаимодействовал пользователь потеряло фокус.
  6. После сохранения данных закрыть раздел с формой и отображением модели. Отправить запрос на получение нового списка всех моделей.

Результаты выполнения лабораторной работы

  1. Финальный вариант приложения.
  2. Работающий локально сервер с подключением к бд и логикой, которая соответствует требованиям. Код сохранен в системе контроля версий.
  3. Статическая страница, которая с помощью AJAX взаимодействует с сервером.

Вопросы

Проверяется только работа веб-приложения.