zoukankan      html  css  js  c++  java
  • koa利用koa-views通过路由返回html页面

    前面一篇博客介绍了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开发的模式,页面和服务端代码在一起,没有分离,路由跳转交给服务端控制,页面和服务端一起部署。在如今的前后端分离的浪潮下,这种方式已经越来越不受青睐。简单的项目可以玩玩。 
    ————————————————
    版权声明:本文为CSDN博主「luffy5459」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
    原文链接:https://blog.csdn.net/feinifi/article/details/116234374

  • 相关阅读:
    php练习题之裁判打分
    OPENSUSE:安装方式
    openSUSE:下载帮助
    安装mysql时出现HTTP&nbsp;500&nbsp;内部服务…
    关于wamp启动是80端口被占用的问题…
    推荐15款好用的JS开发工具
    u盘美化
    wordpress怎么修改地址栏小图标
    显示桌面图标不见了
    站长必备的131个高权重外链库(转…
  • 原文地址:https://www.cnblogs.com/browser/p/14826706.html
Copyright © 2011-2022 走看看