如何使用 html/javascript 加载相同的 html 但具有不同的数据和不同的 url？

Question

我没有使用前端框架，而仅使用 html/css 和 javascript 构建了一个网站。我有一个带有两个谷歌图表的页面portfolio.html。我的愿望是拥有所有格式的网址 www.mydomain.se/portfolio/param1=something&something&something/param2=something&something&something... （或类似的）显示portfolio.html 页面。图表将根据来自 express 后端的 url 提供不同的数据。我知道如何使用 Vue.js 之类的前端框架来实现这一点，但我想知道如何仅使用 html 和 javascript 来实现这一点。

那么我如何向www.mydomain.se/portfolio/param1=something&something&something/param2=something&something&something... (or similar) 提出所有请求 仅使用 html 和 javascript 显示包含不同数据的portfolio.html 页面？

我环顾四周，知道您可以在加载页面后更改 url，使其看起来像是为多个 url 提供不同的页面，但这并不是我真正想要做的。

Answer 1

如果您想从 URL 中的参数中获取数据并将其显示在您的页面上，您可以执行以下操作（不是快递，只是 html 和 JS）：

const getParams = () => {
  urlSuffix = document.URL.split("?")[1]; // get params (key val pairs) as string
  let keyValPairs = urlSuffix.split("&"); // split each key-value pairs

  // store params as an object
  result = {}; 
  keyValPairs.forEach(keyVal => {
    const split = keyVal.split("=");
    result[split[0]] = split[1];
  });
  return result 
}

然后你可以根据你得到的值进行各种 DOM 操作。例如触发 API 调用并基于此显示数据。希望对您有所帮助。

Answer 2

考虑到您的网址是www.mydomain.se/portfolio?param1=something

你可以这样做，根据查询参数渲染不同的模板

app.get('/portfolio', function(req, res) {

if(req.query.param1=="template1")
{
res.render("template1",{data:data1});
}
else if(req.query.param1=="template2")
  {
res.render("template2",{data:data2});
}
});

你也可以像这样使用请求参数

app.get('/portfolio/:param1', function(req, res) {

    if(req.params.param1=="template1")
    {
    res.render("template1",{data:data1});
    }
    else if(req.params.param1=="template2")
      {
    res.render("template2",{data:data2});
    }
    });