Создание страниц на основе файла JSON - PullRequest
Новая
       13

Создание страниц на основе файла JSON

0 голосов
/ 14 апреля 2020

У меня есть файл JSON с информацией о каждом человеке в этом файле (имя, биография, фотография и т. Д. c ...).

Мне было интересно, какие технологии позволят мне генерировать веб-страницы людей в этом файле JSON: например, если URL-адрес site.com/person/steve, он найдет имя steve в JSON и отобразит информацию (имя, биография, изображение и т. д. c). ..) о Стиве.

Желательно, чтобы я мог составить личный шаблон. html и какую бы технологию он не заполнил в соответствующих разделах, взяв URL и найдя совпадение в JSON.

Моя текущая система использует JS и node.js, так что, если я могу остаться в них, это здорово, но не существенно.

Я прочитал другие стековые потоки, но они не решают мой вопрос .

Большое спасибо.

Ответы [ 2 ]

0 голосов
/ 14 апреля 2020

Имея это html

<div id="root"></div>

Имея этот скрипт 

// Sample data, in real app you probably load this data using an import

const data = [
  {
    name: "Ada",
    surname: "Wong",
  },
  {
    name: "Leon",
    surname: "Kennedy",
  },
];

function render() {
  const { name, surname } = getPerson();

  document.querySelector("#root").innerHTML = `
      <table>
          <tbody>
              <tr>
                  <td>Name</td>
                  <td>${name}</td>
              </tr>
              <tr>
                  <td>Surname</td>
                  <td>${surname}</td>
              </tr>
          </tbody>
      </table>`;
}

function getPerson() {
  const location = document.location.search.substring(1);
  const searchParams = new URLSearchParams(location);
  const name = searchParams.get("person");

  return data.find((entry) => entry.name === name);
}

render();

, вы можете попытаться получить данные, которые вы ищете по URL, посмотрите на getPerson () Функция в примере, оттуда вы можете визуализировать полученные данные. Это демонстрация, вы должны рассмотреть, что связано с безопасностью и в случае, если вы не найдете результатов

0 голосов
/ 14 апреля 2020

Я не уверен насчет смысла использования ajax с узлом для визуализации представлений? Это сложнее, чем использовать шаблонизатор?

Таким образом, вы можете использовать express (установить его с npm) и рули (также для установки с npm) для рендеринга файла .hbs из вашего бэкэнда с res.render('views/nameOfYourFile.hbs')

Вы также можете использовать jade, который является механизмом шаблонов по умолчанию для express, если вы не хотите использовать руль.

Но если вы действительно хотите получить данные из своего бэкэнда с помощью ajax, просто запустите на своей странице script, который получит window.location (текущий URL), с GET, чтобы перейти к вашему backend с этим URL и используйте res.send () в вашей функции backend для отправки этих json данных. Но это гораздо сложнее, чем с помощью экспресс ... это зависит от того, что вы хотите сделать точно.

...