根据 JSON 文件生成页面

Question

我有一个 JSON 文件，其中包含有关该文件中每个人的信息（姓名、简历、照片等...）。

我想知道什么技术可以让我从那个 JSON 文件中的人生成网页：例如，如果 url 是 site.com/person/steve 那么它会找到名字steve 在 JSON 中显示关于史蒂夫的信息（姓名、简介、照片等...）。

最好我能够制作一个 persontemplate.html 并且任何技术都可以通过抓住 URL 并在 JSON 中找到匹配项来填充相关部分。

我目前的系统使用 JS 和 node.js 所以如果我能保持在这些范围内那很好但不是必需的。

我已经阅读了其他计算器，但它们没有解决我的问题。

非常感谢。

Answer 1

我不确定将 ajax 与节点一起使用来呈现视图有什么意义？它比使用模板引擎更复杂？

所以你可以使用 express（用 npm 安装它）和 handlebars（也用 npm 安装）从你的后端渲染 .hbs 文件 res.render('views/nameOfYourFile.hbs')

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

但是，如果您真的想使用 ajax 从后端获取数据，那么只需在您的页面上运行一个 script，它会得到 window.location(current 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 () 函数，您可以从那里呈现获取的数据。这是一个演示，你必须考虑什么是关系到安全和你没有找到结果的情况

根据 JSON 文件生成页面

Generate pages based from a JSON file

javascript

json

dynamically-generated