How Can I Serve Static Content Alongside Dynamic Routes in A Deno Oak Server

在Deno Oak框架中，要同时提供静态内容和动态路由，我们可以通过配置Oak的中间件来实现。Oak是一个强大的中间件框架，它允许你轻松地处理HTTP请求和响应。下面，我将举一个例子来说明如何在同一个应用中提供静态文件服务和处理动态路由请求。

1. 初始化项目和依赖

首先，确保你已经安装了Deno。然后，创建一个项目目录并初始化项目。你可以在项目的根目录创建一个deps.ts文件，用于管理项目依赖：

typescript
// deps.ts
export { Application, Router, send } from "https://deno.land/x/oak/mod.ts";

2. 设置静态文件服务

接着，我们可以使用Oak的send功能来提供静态文件服务。这可以通过一个中间件来实现，该中间件检查请求的URL，如果请求的是一个文件，就从文件系统中提供内容。

typescript
// staticMiddleware.ts
import { send } from "./deps.ts";

export async function staticFileMiddleware(ctx: any, next: any) {
  const path = ctx.request.url.pathname;
  const fileWhitelist = ["/index.html", "/styles.css", "/script.js"];

  if (fileWhitelist.includes(path)) {
    await send(ctx, path, {
      root: `${Deno.cwd()}/public`,
      index: "index.html",
    });
  } else {
    await next();
  }
}

3. 创建动态路由

使用Oak的Router，我们可以定义一些动态路由来处理更复杂的请求。例如，我们可以创建一个API来返回当前的时间：

typescript
// router.ts
import { Router } from "./deps.ts";

const router = new Router();

router.get("/api/time", (context) => {
  context.response.body = { time: new Date().toISOString() };
});

export default router;

4. 组合应用

最后，我们将静态文件服务和路由中间件整合到Oak的应用中。这样设置后，服务器可以同时响应静态文件请求和API调用。

typescript
// server.ts
import { Application } from "./deps.ts";
import router from "./router.ts";
import { staticFileMiddleware } from "./staticMiddleware.ts";

const app = new Application();

// 使用静态文件中间件
app.use(staticFileMiddleware);

// 使用路由
app.use(router.routes());
app.use(router.allowedMethods());

await app.listen({ port: 8000 });

5. 运行服务器

在终端中运行以下命令来启动服务器：

bash
deno run --allow-net --allow-read server.ts

这样，你的Deno Oak服务器就可以同时提供静态内容和动态路由了。通过访问不同的URL，你可以得到静态页面或者动态生成的API响应。这种方式非常适合构建具有前端和后端逻辑的全栈应用。