我用的是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(未找到)
下面是一个最小的例子，为我工作的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中可用的get请求中获取整体更容易，它总是存在的。与你刚才所做的类似，该路径下的文件在被请求时由路由器发送。
完整的示例
// 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;
}
根据@audrow的回答，这里有一个更"安全"的答案。是这样的。
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文件夹。此外，您还需要https://deno.land/std@0.97.0/path/mod.ts中的join函数。
完整代码示例:
// 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