基于JSON文件生成页面

Question

我有一个JSON文件，其中包含每个人的信息(姓名、简历、图片等)。

我想知道什么技术可以让我从JSON文件中的人生成网页:例如，如果url是site.com/person/steve，那么它将在JSON中找到名称steve并显示信息(名称、简介、图片等)。关于史蒂夫的事。

优选地，我将能够通过抓取persontemplate.html并在JSON中找到匹配项来创建JSON以及任何可以填充相关部分的技术。

我当前的系统使用JS和node.js，所以如果我可以使用它们，那就很好，但不是必须的。

我已经阅读了其他堆栈溢出，但它们不能解决我的问题。

非常感谢。

Answer 1

我不确定使用ajax和节点来渲染视图的意义。它比使用模板引擎更复杂吗？

因此您可以使用express (随npm一起安装)和handlebars (也随npm一起安装)从res.render('views/nameOfYourFile.hbs')后端呈现.hbs文件

如果你不想使用handlebars，你也可以使用jade，它是express的默认模板引擎。

但是如果你真的想用ajax从你的后端获取数据，那么只需要在你的页面上运行一个script，它会得到window.location(当前的url)，使用get让它通过这个url到达你的后端，并在你的后端函数中使用res.send()来发送那个json数据。但是它比使用express…复杂得多。这取决于你到底想做什么。

Answer 2

拥有这个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 ()函数，从那里您可以呈现所获取的数据。这是一个演示，你必须考虑什么与安全相关，以及你找不到结果的情况