XML, чтение, отправка, запись: Javascript спереди на Express / Node.js обратно
Поскольку я никогда раньше не использовал XML для хранения и передачи данных, я полагаю, что будут и другие люди, которые ломают голову так же, как я недавно, когда меня попросили взять XML-документ, проанализировать его и принять в какая-то база данных.
Чтобы прояснить, расширяемый язык разметки (XML) похож на HTML, но с дизайном для хранения и передачи данных. С учетом сказанного давайте сначала рассмотрим некоторые отличия, которые составляют XML. Если вы хотите пропустить эту часть (TL / DR) и погрузиться в рабочий код, перейдите к разделу А теперь давайте перейдем к коду.
Как и в HTML, мы будем видеть теги и атрибуты, но в отличие от HTML они не предопределены, а, скорее, определены автором документа XML. Вы можете увидеть следующий XML без атрибутов:
Этот XML красивый и изящный. Он легко читается и может быть легко проанализирован и добавлен в базу данных. Когда этот XML попадет в ваш синтаксический анализатор xml, вы получите JSON, который выглядит следующим образом:
Выглядит неплохо! Но что, если у нас есть XML, который использует атрибуты для хранения данных, и что, если мы добавим некоторые другие метатеги для хорошей оценки? Это немного сложнее. Он не расширяемый, что означает, что вы не сможете легко изменить его в будущем и что ваше приложение, возможно, придется изменить вместе с ним, если изменится структура документа. Теперь мы возьмем те же данные и сохраним их в XML с помощью атрибутов и посмотрим, чем отличается JSON. Возьмем, к примеру, следующее:
Что касается синтаксического анализатора, который мы будем использовать в нашей серверной части Node / Express, express-xml-bodyparser, я обнаружил, что он не особо любит эти первые три строки, поэтому я просто удалил их с помощью некоторого JavaScript. Вы можете увидеть репо, если хотите узнать, как это сделать (checkpublic/app.js). А теперь давайте изучим наши новые альбомы JSON:
Как вы можете видеть, наш синтаксический анализатор сделал наш JSON немного более вложенным, и если вы можете себе представить, чем больше вложены ваши XML-теги и чем больше атрибутов у вас есть при использовании прежнего синтаксиса attribute, тем больше вложенных и сложный ваш результирующий JSON будет затруднять его расширение. Наконец, атрибуты в основном используются для хранения метаданных.
Теперь перейдем к коду
Я сделал минимальный интерфейс, используя HTML, JavaScript, CSS и библиотеку jQuery. Начнем с моего HTML. У меня есть 46-строчный HTML-документ, но мы рассмотрим наиболее важные для этой темы строки.
Строка оформления заказа 4. У меня есть ввод, который принимает только xml. 🤔Теперь, когда мы это увидели, давайте посмотрим на наш app.js. Как и в случае с HTML-файлом, я поделился лишь некоторыми строками, которые наиболее важны для этой статьи.
Немного об этих двух функциях processFile и sendXML. processFile будет вызываться, когда пользователь нажимает кнопку «Загрузить» в нашем приложении, и инициирует чтение и первоначальный анализ нашего XML, чтобы он был готов к отправке на наш сервер Express.
В случае, если у нас есть XML, структурированный аналогично album.attribute.xml, нам нужно будет удалить первые три строки, чтобы этот XML работал с нашим синтаксическим анализатором XML на нашем сервере. Это то, что происходит в строках 22 и 23. ВНИМАНИЕ, что в строке 22 мы предполагаем, что его приложение будет использоваться только для загрузки XML для альбомов. Мы можем сделать его более динамичным, но цель этого поста - показать, как принимать XML-файл во внешнем интерфейсе, анализировать его во внутреннем интерфейсе и сохранять данные в выбранной нами базе данных.
С учетом сказанного, давайте взглянем на наш server.js! Это минимальный сервер:
Этот сервер использует sqlite3 для сохранения наших данных и использует express-xml-bodyparser, чтобы мы действительно могли работать с данными, которые передаются ему из нашего интерфейса. Если мы перейдем к строке 47 нашего server.xml.js, мы увидим, что мы публикуем сообщение и берем тело нашего проанализированного xml, перебираем его и создаем соответствующий запрос и вуаля! мы можем добавить его в нашу базу данных.
По бессмертным словам Багза Банни: «Вот и все, ребята!»
Полное репо этого проекта можно увидеть здесь.
Актуальную версию приложения можно посмотреть здесь. Он находится на бесплатном динамометрическом стенде, поэтому дайте ему время загрузиться. Чтобы проверить это: возьмите следующее, поместите его и сохраните в .xml файл и загрузите его, чтобы начать воспроизведение, или создайте свой собственный, используя следующий формат:
<albums> <album> <artist>Prince</artist> <title>Purple Rain</title> <year>1984</year> <awards> <grammy>3</grammy> </awards> </album> <album> <artist>Rick James</artist> <title>Street Songs</title> <year>1981</year> <awards> <grammy>1</grammy> </awards> </album> </albums>
Надеюсь, это кому-то поможет! Дайте мне знать, что вы думаете!
