根据 JSON 文件生成页面

Question

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

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

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

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

我读过其他计算器，但它们没有解决我的问题。

非常感谢。

Answer 1

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

因此，您可以使用 express（使用 npm 安装）和 handlebars（也使用 npm 安装）使用res.render('views/nameOfYourFile.hbs')从后端渲染 render.hbs 文件

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

但是，如果您真的想使用 ajax 从您的后端获取数据，那么只需在您的页面上运行一个script ，获取window.location （当前 url），使用 GET 以便使用该 url 进入您的后端并使用 res.send( ) 在您的后端 function 中发送该 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 () function，您可以从那里呈现获取的数据。 这是一个演示，您必须考虑与安全相关的内容以及您没有找到结果的情况