一个 JavaScript 文件构建整个网站（续）

早在 4 月，我们就发布了“一个 JavaScript 文件构建整个网站”。然而，根据一些评论，我们意识到，我们没有完全传达出我们认为这种练习的独特之处 - 它的简单性和性能，却没有牺牲现代网站用户期望的功能。

因此，这是一篇后续博客文章，以及一个新的游乐场，它展示了一个功能齐全的 Web 应用程序，它具有动态 API 端点、动态渲染、表单功能 - 所有这些都包含在一个 JavaScript 文件中。

动态渲染

A screenshot of the landing page with dynamically rendered data.

登录页面显示您的位置、本地日期和时间。

首先，让我们看看如何获取位置。

const ip = (context.remoteAddr as Deno.NetAddr).hostname;
const res = await fetch("http://ip-api.com/json/" + ip);
const data: APIData = await res.json();
return ssr(() => <Landing {...data} />);

首先，我们获取 IP 地址，使用 router，可以在路由回调的第二个参数中获得。获得 IP 地址后，我们向 IP-API 发起一个 HTTP 请求，它返回位置数据，例如城市和国家。我们将此数据传递给 <Landing> 组件，并在其中进行渲染。

为了显示本地日期和时间，我们在组件中使用 timezone 作为参数来渲染 Date 构造函数。注意，timezone 是 IP 地址响应的一部分，与 city 和 country 一同提供。

function Landing({
  country,
  city,
  timezone,
}: APIData) {
  return (
    <div class="min-h-screen p-4 flex gap-12 flex-col items-center justify-center">
      <h1 class="text-2xl font-semibold">
        Welcome to Bagel Search
      </h1>
      <p class="max-w-prose">
        It's currently {new Date().toLocaleString("en-US", {
          dateStyle: "full",
          timeStyle: "medium",
          timeZone: timezone,
        })} in {city}, {country}—the perfect time and place to look up a bagel.
      </p>
      <a
        href="/search"
        class="px-4 py-2.5 rounded-md font-medium leading-none bg-gray-100 hover:bg-gray-200"
      >
        Click here to search for bagels
      </a>
    </div>
  );
}

动态路由

A bagel page

为了展示动态路由，我们为每个贝果动态生成了一个路由，其模式如下：/bagels/:id。

正如前一篇文章中提到的，router 在幕后使用 URLPattern，因此我们可以使用适当的 URLPattern 语法进行模式匹配。在本例中，我们有 /bagels/:id，这意味着它将匹配任何以 /bagels/ 开头并跟随任何有效值（例如 /bagels/foo）的路径，但它将无法匹配任何子路径，例如 /bagels/foo/bar）。

serve(router(
  {
    "/bagels/:id": (_req, _context, matches) => {
      return ssr(() => <Bagel id={matches.id} />);
    },
    // Other routes removed in this example for simplification.
  },
));

我们可以从路径中使用 matches.id 获取 :id，因为 router 在 matches 中创建了一个键值，其中 id 作为键，字符串作为值。

然后，我们将 id 传递给 <Bagel> 组件

function Bagel({ id }: { id: string }) {
  const name = id.replaceAll("-", " ");
  const bagel = bagels.find((bagel) =>
    bagel.name.toLowerCase() === name.toLowerCase()
  );

  if (bagel === undefined) {
    return (
      <div>
        The bagel '{name}' does not exist
      </div>
    );
  }

  return (
    <div class="min-h-screen p-4 flex flex-col items-center justify-center">
      <div class="w-3/4 lg:w-1/4">
        <div class="w-full bg-gray-200 rounded-lg overflow-hidden">
          <img
            src={bagel.image}
            class="w-full object-center object-cover"
            alt={bagel.name}
          />
        </div>
        <div class="mt-3 flex items-center justify-between">
          <h1 class="font-semibold">{bagel.name}</h1>
          <p class="text-lg font-medium text-gray-900">
            ${bagel.price.toFixed(2)}
          </p>
        </div>
        <p class="mt-1 text-gray-600">
          {bagel.description}
        </p>
        <div class="mt-3 flex items-center justify-between">
          <div>
            <a href="/" class="underline text-blue-400">Home</a>
          </div>
          <div>
            <a href="/search" class="underline text-blue-400">Back to Search</a>
          </div>
        </div>
      </div>
    </div>
  );
}

首先，我们将 id 转换成更人性化的形式。接下来，我们使用该形式与我们数据中贝果名称的形式匹配。

如果找不到贝果，则返回错误。否则，我们将匹配的贝果信息进行渲染。

表单功能

“这很好，但我如何找到有哪些贝果？” 这个问题问得好！

Searching for egg and ham in the form

我们添加了一个 /search 页面，它包含一个文本输入框，您可以在其中输入内容。按下回车键后，页面上的结果将根据您的输入进行过滤。

这是使用表单实现的。默认情况下，<form> 标签使用 urlencoded 搜索参数来表示值。提交表单时（在本例中，通过按下回车键），它会获取 <input> 标签的 name 属性和值，并将其编码为搜索参数。

例如，我们的文本输入框具有属性 name="search"。如果我们输入 foo 并提交，它将通过追加查询字符串 ?search=foo 重定向到当前页面。我们还将表单方法设置为 GET，因此它将发出 GET 请求而不是 POST 请求。

然后，我们的路由器只需要解析查询字符串即可。

serve(router(
  {
    "/search": (req) => {
      const search = new URL(req.url).searchParams.get("search");
      return ssr(() => <Search search={search ?? ""} />);
    },
  },
));

然后，我们将 search 值传递给 <Search> 组件

function Search({ search }: { search: string }) {
  const foundBagels = bagels.filter((bagel) =>
    bagel.name.toLowerCase().includes(search.toLowerCase())
  );

  return (
    <form
      method="get"
      class="min-h-screen p-4 flex gap-8 flex-col items-center justify-center"
    >
      <input
        type="text"
        name="search"
        value={search}
        class="h-10 w-96 px-4 py-3 bg-gray-100 rounded-md leading-4 placeholder:text-gray-400"
        placeholder="Search and press enter..."
      />
      <output name="result" for="search" class="w-10/12 lg:w-1/2">
        <ul class="space-y-2">
          {foundBagels.length > 0 &&
            foundBagels.map((bagel) => (
              <li class="hover:bg-gray-100 p-1.5 rounded-md">
                <a href={`/bagels/${bagel.name.replaceAll(" ", "-")}`}>
                  <div class="font-semibold">{bagel.name}</div>
                  <div class="text-sm text-gray-500">{bagel.description}</div>
                </a>
              </li>
            ))}
          <li>
            {foundBagels.length === 0 &&
              <div>No results found. Try again.</div>}
          </li>
        </ul>
      </output>
    </form>
  );
}

我们过滤掉所有不包含 search 值的贝果并进行显示。为了提供无缝的用户体验，我们还将 <input> 值设置为 search。

接下来是什么？

编程意味着管理复杂性。虽然构建网站的方法有很多，但代码越简单直观，编程就越容易、越快、也越有趣。

这里提到的所有内容都可以在这个游乐场中查看。