我正在使用 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(未找到)
答案 0 :(得分:0)
下面是一个在 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;
}
答案 1 :(得分:0)
基于 @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