deno.com
本页内容

使用 Deno 构建 Qwik

Qwik 是一个 JavaScript 框架，它利用可恢复性而非水合作用来提供即时加载的 Web 应用程序。在本教程中，我们将构建一个简单的 Qwik 应用程序并使用 Deno 运行它。该应用程序将显示一个恐龙列表。当你点击其中一个时，它会带你到一个恐龙页面，其中包含更多详细信息。

我们将介绍如何使用 Deno 构建一个简单的 Qwik 应用程序

欢迎直接跳到源代码或继续阅读以下内容！

搭建 Qwik 应用 跳转到标题

我们可以像这样使用 deno 创建一个新的 Qwik 项目

deno init --npm qwik@latest

这将引导你完成 Qwik 和 Qwik City 的设置过程。在这里，我们选择了最简单的“空应用”部署，使用 npm 依赖项。

完成后，你将拥有一个如下所示的项目结构

.
├── node_modules/
├── public/
└── src/
    ├── components/
    │   └── router-head/
    │       └── router-head.tsx
    └── routes/
        ├── index.tsx
        ├── layout.tsx
        ├── service-worker.ts
        ├── entry.dev.tsx
        ├── entry.preview.tsx
        ├── entry.ssr.tsx
        ├── global.css
        └── root.tsx
├── .eslintignore
├── .eslintrc.cjs
├── .gitignore
├── .prettierignore
├── package-lock.json
├── package.json
├── qwik.env.d.ts
├── README.md
├── tsconfig.json
└── vite.config.ts

其中大部分是我们将不会触及的样板配置。以下是一些关于 Qwik 工作原理的重要文件：

  • src/components/router-head/router-head.tsx：管理 Qwik 应用程序中不同路由的 HTML 头部元素（如标题、元标签等）。
  • src/routes/index.tsx：用户访问根 URL 时看到的应用程序主入口点和主页。
  • src/routes/layout.tsx：定义包裹页面的通用布局结构，允许你保持一致的 UI 元素，如页眉和页脚。
  • src/routes/service-worker.ts：处理渐进式 Web 应用程序 (PWA) 功能、离线缓存和应用程序的后台任务。
  • src/routes/entry.ssr.tsx：控制应用程序如何进行服务器端渲染，管理初始 HTML 生成和水合过程。
  • src/routes/root.tsx：作为应用程序外壳的根组件，包含全局提供者和主要路由结构。

现在我们可以在应用程序中构建自己的路由和文件了。

设置数据和类型定义 跳转到标题

我们首先将恐龙数据添加到新的 ./src/data 目录中，命名为 dinosaurs.json。

// ./src/data/dinosaurs.json

{
  "dinosaurs": [
    {
      "name": "Tyrannosaurus Rex",
      "description": "A massive carnivorous dinosaur with powerful jaws and tiny arms."
    },
    {
      "name": "Brachiosaurus",
      "description": "A huge herbivorous dinosaur with a very long neck."
    },
    {
      "name": "Velociraptor",
      "description": "A small but fierce predator that hunted in packs."
    }
    // ...
  ]
}

这将是我们获取数据的地方。在完整的应用程序中，这些数据将来自数据库。

⚠️ 本教程中我们硬编码了数据。但你可以连接到各种数据库，甚至在 Deno 中使用像 Prisma 这样的 ORM。

接下来，让我们为恐龙数据添加类型定义。我们将其放在 ./src/ 目录下的 types.ts 文件中。

// ./src/types.ts

export type Dino = {
  name: string;
  description: string;
};

接下来，让我们添加 API 路由来提供这些数据。

添加 API 路由 跳转到标题

首先，让我们创建路由来为索引页加载所有恐龙。此 API 端点使用 Qwik City 的 RequestHandler 创建一个 GET 端点，该端点使用 JSON 辅助函数加载并返回我们的恐龙数据，以进行正确的响应格式化。我们将以下代码添加到 ./src/routes/api/dinosaurs/index.ts 中的新文件中。

// ./src/routes/api/dinosaurs/index.ts

import { RequestHandler } from "@builder.io/qwik-city";
import data from "~/data/dinosaurs.json" with { type: "json" };

export const onGet: RequestHandler = async ({ json }) => {
  const dinosaurs = data;
  json(200, dinosaurs);
};

接下来，让我们创建 API 路由以获取单个恐龙的信息。这从 URL 中获取参数，并使用它来搜索我们的恐龙数据。我们将以下代码添加到 ./src/routes/api/dinosaurs/[name]/index.ts 中。

// ./src/routes/api/dinosaurs/[name]/index.ts

import { RequestHandler } from "@builder.io/qwik-city";
import data from "~/data/dinosaurs.json" with { type: "json" };

export const onGet: RequestHandler = async ({ params, json }) => {
  const { name } = params;
  const dinosaurs = data;

  if (!name) {
    json(400, { error: "No dinosaur name provided." });
    return;
  }

  const dinosaur = dinosaurs.find(
    (dino) => dino.name.toLowerCase() === name.toLowerCase(),
  );

  if (!dinosaur) {
    json(404, { error: "No dinosaur found." });
    return;
  }

  json(200, dinosaur);
};

现在 API 路由已连接并提供数据，让我们创建两个前端页面：索引页和单独的恐龙详细信息页。

构建前端 跳转到标题

我们将通过更新 ./src/routes/index.tsx 文件来创建主页，使用 Qwik 的 routeLoader$ 进行服务器端数据获取。此 component$ 通过 useDinosaurs() 在 SSR 期间加载并渲染恐龙数据。

// ./src/routes/index.tsx

import { component$ } from "@builder.io/qwik";
import { Link, routeLoader$ } from "@builder.io/qwik-city";
import type { Dino } from "~/types";
import data from "~/data/dinosaurs.json" with { type: "json" };

export const useDinosaurs = routeLoader$(() => {
  return data;
});

export default component$(() => {
  const dinosaursSignal = useDinosaurs();

  return (
    <div class="container mx-auto p-4">
      <h1 class="text-3xl font-bold mb-4">Welcome to the Dinosaur app</h1>
      <p class="mb-4">Click on a dinosaur below to learn more.</p>
      <ul class="space-y-2">
        {dinosaursSignal.value.dinosaurs.map((dinosaur: Dino) => (
          <li key={dinosaur.name}>
            <Link
              href={`/${dinosaur.name.toLowerCase()}`}
              class="text-blue-600 hover:underline"
            >
              {dinosaur.name}
            </Link>
          </li>
        ))}
      </ul>
    </div>
  );
});

现在我们有了主索引页，让我们为单个恐龙信息添加一个页面。我们将使用 Qwik 的动态路由，其中 [name] 作为每个恐龙的键。此页面利用 routeLoader$ 根据 URL 参数获取单个恐龙详细信息，并内置了恐龙未找到时的错误处理。

该组件使用与我们的索引页相同的 SSR 模式，但采用基于参数的数据加载和更简单的显示布局，用于单个恐龙详细信息。

// ./src/routes/[name]/index.tsx

import { component$ } from "@builder.io/qwik";
import { Link, routeLoader$ } from "@builder.io/qwik-city";
import type { Dino } from "~/types";
import data from "~/data/dinosaurs.json" with { type: "json" };

export const useDinosaurDetails = routeLoader$(({ params }): Dino => {
  const { dinosaurs } = data;
  const dinosaur = dinosaurs.find(
    (dino: Dino) => dino.name.toLowerCase() === params.name.toLowerCase(),
  );

  if (!dinosaur) {
    throw new Error("Dinosaur not found");
  }

  return dinosaur;
});

export default component$(() => {
  const dinosaurSignal = useDinosaurDetails();

  return (
    <div class="container mx-auto p-4">
      <h1 class="text-3xl font-bold mb-4">{dinosaurSignal.value.name}</h1>
      <p class="mb-4">{dinosaurSignal.value.description}</p>
      <Link href="/" class="text-blue-600 hover:underline">
        Back to all dinosaurs
      </Link>
    </div>
  );
});

现在我们已经构建了路由和前端组件，我们可以运行我们的应用程序了。

deno task dev

这将启动应用程序，地址为 localhost:5173。

大功告成！

下一步 跳转到标题

🦕 现在你可以在 Deno 中构建和运行 Qwik 应用程序了！以下是一些你可以增强恐龙应用程序的方法：

Qwik 应用程序的下一步可能是使用 Qwik 的懒加载功能加载恐龙图片和其他组件，或者为复杂功能添加客户端状态管理。

您找到所需内容了吗？

编辑此页面
隐私政策