koa利用koa-views通过路由返回html页面

快来打我* 2023-01-17 08:59 144阅读 0赞

[前面一篇博客][Link 1]介绍了koa借助koa-static依赖可以实现以静态资源的形式加载html，但是没有路由功能，一般而言，前后端分离之后，路由控制是由前端控制，也有一些不分离的项目，需要后端通过url路径请求直接返回一个html，这个页面是一个动态页面，如果使用ejs模板，甚至可以在渲染加载页面的时候，增加页面参数。

koa-views可以实现这个功能，同时，配合koa-router可以实现服务端路由控制来跳转页面。

const Koa = require("koa")
    const app = module.exports = new Koa()
    const router = require("@koa/router")()
    const path = require("path")
    const views = require("koa-views")
    app.use(views(path.join(__dirname,"views/"),{extension:'html'}))
    router.get("/",index)
          .get("/link",linkpage)
    	  
    async function index(ctx){
    	await ctx.render("index")
    }
    
    async function linkpage(ctx){
    	await ctx.render("link")
    }
    
    app.use(router.routes())
    
    if(!module.parent){
      app.listen(3000,function(){
         console.log("koa server running at port 3000");
      })	
    }

这里模板没有使用其他ejs之类，就是普通的html。

如果不加入koa-views依赖和配置，ctx对象没有render方法。

要看到效果，还需要在项目目录views下新建index.html,link.html，这两个页面很简单：

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>

这种通过服务端控制路由的方式，就回到了早期jsp开发的模式，页面和服务端代码在一起，没有分离，路由跳转交给服务端控制，页面和服务端一起部署。在如今的前后端分离的浪潮下，这种方式已经越来越不受青睐。简单的项目可以玩玩。

[Link 1]: https://blog.csdn.net/feinifi/article/details/116207128