koa设置静态资源以加载html页面

冷不防 2023-01-17 07:45 156阅读 0赞

koa是express之后又一个node框架，它可以很方便的构建http服务。

一般，我们看到的koa是配合koa-router路由来做服务端请求控制，大部分是要么返回string，要么返回json对象，有时候返回静态页面也是通过string拼接的方式。

koa启动，可以设置静态资源，需要借助koa-static依赖，而html页面同样也是静态资源。这里可以设置koa让他渲染我们定义的html页面，而无需手动拼接html片段。

const Koa = require("koa")
    const serve = require("koa-static")
    const app = module.exports = new Koa()
    app.use(serve(__dirname+"/views",{extensions:["html"]}))
    if(!module.parent){
      app.listen(3000,function(){
         console.log("koa server running at port 3000");
      })	
    }

准备两个页面放在项目views目录下。

index.html

<!doctype html>
    <html>
    	<head>
    	   <title>koa</title>
    	   <meta charset="UTF-8"/>
    	</head>
    	<body>
    		<h1>hello,koa.</h1>
    		<a href="/link">helloworld</a>
    	</body>
    </html>

link.html

<!doctype html>
    <html>
    	<head>
    	   <title>koa</title>
    	   <meta charset="UTF-8"/>
    	</head>
    	<body>
    		<h1>hello,world.</h1>
    		<a href="/">home</a>
    	</body>
    </html>

启动koa服务，打开浏览器，访问url:http://localhost:3000

![20210428143216147.gif][]

[20210428143216147.gif]: /images/20221021/bc5b003f31d64c7882e2b0cf64989247.png

发表评论取消回复

表情：

评论列表（有 0 条评论，156人围观）

还没有评论，来说两句吧...

相关阅读

相关【QT】QWebEngineView加载静态html页面

需求：想在窗口中添加在线帮助一个功能模块方法：可以先把在线帮助word文档做出来，然后通过wps直接另存为html格式的文件，然后在QT中加载即可。预

雨点打透心脏的1/2处/ 2024年04月07日 14:47/ 0 赞/ 81 阅读

相关 koa设置静态资源以加载html页面

koa是express之后又一个node框架，它可以很方便的构建http服务。一般，我们看到的koa是配合koa-router路由来做服务端请求控制，大部分是

冷不防/ 2023年01月17日 07:45/ 0 赞/ 157 阅读

相关 HTML页面加载流程

浏览器加载显示html的顺序是按下面的顺序进行的： 1、IE下载的顺序是从上到下，渲染的顺序也是从上到下，下载和渲染是同时进行的。 2、在渲染到页面的某一部分时，其上面

小灰灰/ 2022年07月18日 00:24/ 0 赞/ 219 阅读

相关 SpringBoot加载静态资源

在SpringBoot中加载静态资源和在普通的web应用中不太一样。默认情况下，Spring Boot从classpath下一个叫/static（/public，/resour

清疚/ 2022年06月04日 08:06/ 0 赞/ 341 阅读

相关 HTML 页面加载过程

window.onload 和 DOMContentLoaded 的区别从输入 url 到得到 html 的过程浏览器渲染页面的过程 window.o

客官°小女子只卖身不卖艺/ 2022年05月26日 12:41/ 0 赞/ 271 阅读

相关 HTML页面加载过程

window.onload 和 DOMContentLoaded 的区别从输入 url 到得到 html 的过程浏览器渲染页面的过程 window.o

ゞ浴缸里的玫瑰/ 2022年05月16日 04:44/ 0 赞/ 250 阅读

相关 springboot2.x,加载静态资源，加载外部静态资源

springboot2.x 加载静态文件升级到springboot2.x，网上的资料都是1.x的 springboot1.x ![在这里插入图片描述][70]

阳光穿透心脏的1/2处/ 2022年05月10日 21:14/ 0 赞/ 363 阅读

相关 Flask------在HTML中加载静态资源

> 我们通过复制bootstrap的代码，是通过远程方式加载出来的，如果我们在放在本地资源中怎么加载呢。 > 我们在static下面创建bootstarp文件，在该文件夹下再

小咪咪/ 2021年11月27日 02:32/ 0 赞/ 552 阅读

相关 nodejs动态加载动态html、js并且加载静态资源

网上可以很轻松的找到动态加载资源、或者加载动态页面、或者加载静态资源的文章，但是找了好久都没找到将这几个功能整合起来的文章。于是决定自己写一个。本文通过nodejs，实现真

灰太狼/ 2021年09月30日 14:20/ 0 赞/ 602 阅读

相关 koa static静态资源

1、安装 cnpm install koa-static --save 2、引入 const static=require('k

我会带着你远行/ 2021年07月25日 00:37/ 0 赞/ 473 阅读