跳至主要内容
Deno 2 终于发布了 🎉️
了解更多

使用 Deno 构建网站和应用程序

为什么选择 Deno？

当您开始构建网站或应用程序时，您可以立即使用 Deno 提高生产力。

路由和渲染

使用 Deno 构建网站或应用程序有很多方法。由于 Deno 原生支持 JSX 和 TSX，因此构建网站的最简单方法是使用路由器和组件。

以下是一个使用 Home 和 About 页面的极其简化的网站示例。

import { router } from "https://crux.land/[email protected]";
import { h, ssr } from "https://crux.land/[email protected]";

const render = (component) => ssr(() => <App>{component}</App>);

Deno.serve(router(
  {
    "/": () => render(<Home />),
    "/about": () => render(<About />),
  },
));

function App({ children }) {
  return (
    <div>
      <NavBar />
      {children}
    </div>
  );
}

function NavBar() {
  return (
    <nav>
      <div>
        <a href="/">
          Home
        </a>
      </div>
      <div>
        <a href="/about">
          About
        </a>
      </div>
    </nav>
  );
}

function Home() {
  return (
    <div>
      <span>Home</span>
    </div>
  );
}

function About() {
  return (
    <div>
      <span>About</span>
    </div>
  );
}

此示例摘自 这篇关于用单个 JavaScript 文件编写的简单投资组合网站的博客文章。还有 这篇包含交互式版本的博客文章，它还具有包含在单个 JavaScript 文件中的 Web 表单。

使用 Deno KV 添加状态

如何构建具有某些逻辑的 Web 应用程序？以下是用 Deno KV 作为存储的链接缩短 Web 应用程序的示例，代码仅 23 行。

const kv = await Deno.openKv();

Deno.serve(async (request: Request) => {
  // Create short links
  if (request.method == "POST") {
    const body = await request.text();
    const { slug, url } = JSON.parse(body);
    const result = await kv.set(["links", slug], url);
    return new Response(JSON.stringify(result));
  }

  // Redirect short links
  const slug = request.url.split("/").pop() || "";
  const url = (await kv.get(["links", slug])).value as string;
  if (url) {
    return Response.redirect(url, 301);
  } else {
    const m = !slug ? "Please provide a slug." : `Slug "${slug}" not found`;
    return new Response(m, {
      status: 404,
    });
  }
});
Node 怎么办？
使用 Node.js 创建任何具有状态的应用程序都需要云数据库提供商，需要创建帐户、预配数据库、获取必要的 API 密钥、将其设置为环境变量，然后连接到数据库并存储数据。

Web 框架

许多人更喜欢使用全栈 Web 框架和元框架来构建网站和应用程序。

Fresh 是一个为速度、可靠性和简单性而构建的下一代 Web 框架。它使用服务器端渲染，默认情况下不会向客户端发送任何 JavaScript，并采用渐进增强。

了解有关为什么服务器端渲染对现代 Web 有益的更多信息。

SaaSKit 在 Fresh 之上构建，以提供每个现代 SaaS 应用程序都需要的功能，包括订阅计费、身份验证和会话管理、管理面板等等。SaaSKit 不仅为 SaaS 提供必要的功能，而且还提供现代开发体验，包括原生 TypeScript 支持、Deno 的一体化工具链等等。

Aleph 是一个基于 React 的现代全栈框架，它使构建前端变得容易。

Ultra 是一个基于 React 的现代全栈框架，它专为悬念服务器端渲染而构建。它完全采用现代工具和技术，例如 ESM。

了解有关 Deno 原生框架的更多信息。

您也可以在 Deno 中使用 Node.js 框架

了解有关在 Deno 中使用 npm 的更多信息。

部署到生产环境

Deno Deploy 是我们的全球边缘无服务器平台，它允许您在我们的网络上将您的服务器托管和运行在全球范围内，靠近您的用户，提供高可用性和最小的网络延迟。

通过 连接 GitHub 帐户，在 Deno Deploy 上托管您的网站或应用程序非常简单且免费。

了解为什么边缘是 Web 的未来.

您也可以将 Deno 服务器托管在任何运行 VM 或 VPS 的平台上，这些平台都使用 Docker。以下是一些帮助您入门的指南。

其他资源

以下是一些有关使用 Deno 构建静态网站和应用程序的示例、博客文章和视频。