Как бы я сохранил мои объекты Javascript с помощью JSON / PHP / Mysql, чтобы повторно загрузить их по возвращении пользователя?

Question

Я работаю над созданием «песочницы», где многочисленные пользователи будут входить в систему и создавать перетаскиваемые «узлы» в своей «песочнице». Я хотел бы иметь возможность автоматически сохранять приложение после каждой модификации, но обо всем по порядку - я пытаюсь сохранить свои объекты Javascript в MySQL.

Я новичок в Javascript, PHP и MySQL, но JSON, кажется, мой лучший друг для этой задачи. Вот примерный пример узла:

node1.pos
node1.name
node1.content
node1.siblings

* Примечание. Фактический узел будет содержать гораздо больше атрибутов, некоторые с потенциально конфиденциальной информацией.

Моя цель состоит в том, чтобы пользователь управлял каждым узлом (перетаскиваемым, связанным с братьями и сестрами, изменением имени и т. Д.), А затем при повторном посещении страницы «песочница» повторно заполняется узлами в правильном положении. со всеми правильными данными, связанными с ним.

Я думаю, что могу справиться с функцией, которая будет заполнять холст, но смещение объекта между MySQL и Javascript меня смущает. Вызовет ли объект, имеющий методы, какие-либо проблемы?

У кого-нибудь есть помощь, совет или справочный материал, который мог бы мне помочь?

Answer 1

1. Я бы порекомендовал вам создать веб-сервис, который будет хранить любые данные, отправляемые пользователем.Давайте назовем это http://server.net/store.php.

2. Затем клиент будет использовать JavaScript для сериализации в JSON значимых данных вместе с некоторыми учетными данными пользователя ...

   var dataPacket = {
       userCredentials: 77777777, /* whatever is sensible */
       nodes: [ {id: 1, posX: 10, posY: 345 }, {id: 2, posX: 5, posY: 136} ]
   };
   

3. Затем клиент отправляет данные на сервер с помощью jQuery + AJAX ...

   $.ajax({
      type: "POST",
      url: "http://server.net/store.php",
      dataType: "json",
      data: dataPacket
    });
   

4. Затем на стороне сервера данные проверяются на наличие действительных учетных данных пользователя.и затем он может продолжить сохранение в какой-либо базе данных полученных данных в кодировке JSON, которые на самом деле являются простой строкой.

5. Создание веб-службы, которая будет читатьиз базы данных и вернуть любые ранее сохраненные данные.Давайте назовем это http://server.net/load.php.

6. Когда пользователю нужно загрузить то, что он делал ранее, клиент будет использовать JavaScript для запроса данных ...

   $.ajax({
      type: "POST",
      url: "http://server.net/load.php",
      dataType: "json",
      data: {
          userCredentials: 77777777, /* whatever is sensible */
      }
      success: function(dataPacket) {
         /* process the received dataPacket */
      }
    });
   

Обратите внимание, что код зависит от jQuery и предоставляется только в качестве примера, и я на самом деле его не тестировал.

---

См. Также:

• jQuery Tutorials
• jQuery AJAX документация
• JSON-анализаторы и документация (на случай, если вы хотите обработать dataPacket перед сохранением / извлечениемэто из БД)

Надеюсь, это поможет.

Благослови Бог!

Answer 2

Советы у меня в голове:

Сохранение изменений на лету:

Создание страницы PHP, которая ничего не делает, но принимает запросы POST от пользователя(вы, очевидно, захотите использовать некоторую форму аутентификации, чтобы случайные пользователи не могли просто попасть на страницу со случайными данными, но это другой вопрос).Эта страница будет нести ответственность только за принятие AJAX-запросов от пользователя.

Создайте свою страницу песочницы, используя что-то вроде библиотеки пользовательского интерфейса jQuery ( особенно , если вы новичок, используйте что-то заранее написанное,не пытайтесь написать свой собственный).Это будет страница PHP, которая просто загрузит все значения, которые уже были сохранены в базе данных вашей страницей обработки AJAX.Используя jQuery методы перетаскивания , вы можете обнаружить, когда элемент был перемещен.В конце хода вы будете использовать функциональность jQuery .ajax для отправки элемента и координат на страницу обработки ajax.

В следующий раз, когда пользователь войдет в систему, добавить / будет тривиальноРасположите элементы как требуется.