Question

我正在使用 Deno

import { Application } from "https://deno.land/x/oak/mod.ts";
const port = 3000;
const app = new Application();
//HTML
app.use(async (ctx,next)=>{
  await ctx.send({
    root: `${Deno.cwd()}/views`,
    index: "index.html",
  })
  next()
})
// static content
app.use(async (context, next) => {
  const root = `${Deno.cwd()}/static`
  try {
      await context.send({ root })
  } catch {
      next()
  }
})

await app.listen({port});

我的文件夹结构如下。

Landing
| Routes
| -- index.js
| static (all JavaScript files for frontend, css, images)
| --main.css
| --main.js
| --images
| views
| --index.html
|

这是我的 index.js 文件中的内容。我收到 net::ERR_ABORTED 404（未找到）

Answer 1

下面是一个在 Deno 1.8 中对我有用的最小示例。

我在 Oak 中使用了 Router，因为我不确定如何仅使用应用程序来执行此操作。关键是以下几行：

router.get('/static/:path+', async (ctx) => {
  await send(ctx, ctx.request.url.pathname, {
    root: Deno.cwd(),
  });
});

其中 router.get('/static/:path+', ...) 为以 /static/ 开头的任何路径调用回调。如果您不熟悉 :path+ 语法，冒号使请求的一部分成为可通过 ctx.params.path 访问的参数，我相信 + 包括 URL 的以下部分。这对于将请求与预期路由进行匹配很重要。

path 的字符串在 ctx.params.path 中可用，但它可能存在也可能不存在。我发现从始终存在的 ctx.request.url.pathname 中可用的获取请求中获取整体更容易。与您之前所做的类似，路由器会在请求时发送该路径上的文件。

完整示例

// app.ts

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

const port = 3000;

const app = new Application();
const router = new Router();

// HTML
router.get('/', async (ctx) => {
  const body = await Deno.readTextFile(Deno.cwd() + '/views/index.html')
  ctx.response.body = body;
});

// Static content
router.get('/static/:path+', async (ctx) => {
  await send(ctx, ctx.request.url.pathname, {
    root: Deno.cwd(),
  });
});

app.use(router.routes());
app.use(router.allowedMethods());

await app.listen({port});

<!-- views/index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" type="text/css" href="/static/style.css"/>
  <title>Document</title>
</head>
<body>

  <h1>Hi there</h1>
  
</body>
</html>

/* static/style.css */
h1 {
  color: red;
}

Answer 2

基于 @audrow's answer，这是一种更“安全”的方法。

const main = new Router();

main.get('/static/:path+', async (ctx: Context) => {
    return await send(ctx, ctx.request.url.pathname, {
        root: join(Deno.cwd(), 'public')
    });
});

将您的静态文件放在 public/static 目录下并从 /static/your_file.extension 访问它在 public 目录下，您还可以添加一个 views 目录并放置您的 HTML/HTM 文件。

将 root 指向您的 CWD 是非常危险的，即使 Deno 是安全的。在这种方法中，您将 root 指向您的 ${Deno.cwd()}/public 文件夹。此外，您将需要 join 中的 https://deno.land/std@0.97.0/path/mod.ts 函数。

完整代码示例：

// mod.ts
export * from 'https://deno.land/x/oak@v7.5.0/mod.ts';
export * from 'https://deno.land/std@0.97.0/path/mod.ts';

// index.ts
import { Application, Context, join, Router, send } from './mod.ts';

const app = new Application();
const main = new Router();

main.get('/static/:path+', async (ctx: Context) => {
    return await send(ctx, ctx.request.url.pathname, {
        root: join(Deno.cwd(), 'public')
    });
});

main.get('/', ({ response }: Context) => {
    response.body = 'hello world'
});

app.use(main.routes())
app.use(main.allowedMethods());

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

编辑：这是你的工作目录应该是什么样子

- app       # Your app
 - public   # The public folder
  - views   # HTML
  - static  # CSS and JS

如何使用橡木服务 css？

2 个答案:

完整示例