koa简易框架（四）

绝地灬酷狼 2023-07-24 08:52 14阅读 0赞

之前我们实现了简易版koa，router，static，今天我们在来实现一下koa-view，不说废话，直接上代码

### koa-view ###

#### 源码： ####

const path = require('path')
    const EventEmitter = require('events');
    
    /* * 匹配<%=xx%>将其变成${xx} 匹配<%xxxx%>将xxxx中的内容拼接起来变成一个函数字符串 然后通过new Function函数字符串生成一个函数执行数据就会返回渲染后的字符串 * */
    
     class View extends EventEmitter{ 
         constructor() { 
             super();
         }
         async render(paths,obj,ctx,next){ 
             function render(r, obj) { 
                 let head = `let str = ''\r\n`;
                 //with可以将变量的上下文指向为obj，所以a => obj.a
                 head += 'with(b){\r\n';
                 let content = 'str+=`';
                 //先将匹配<%=xx%>将其变成${xx}
                 r = r.replace(/<%=([\s\S]*?)%>/g, function () { 
                     var key = `${ arguments[1]}`
                     return `${ obj[key]}`; }) //匹配<%xxxx%>将xxxx中的内容拼接起来变成一个函数主要逻辑 content += r.replace(/<%([\s\S]*?)%>/g, function () { return '`\r\n' + arguments[1] + "\r\n str+=`"
                 });
                 let tail = "`\r\n} \r\n return str";
                 let fnStr = head+content+tail;
                 let fn = new Function('b', fnStr);
                 return fn(obj);
             }
             let realPath = paths;
             let { promisify} = require('util');
             let fs = require('fs');
             let read = promisify(fs.readFile);  //promise化
             let r = await read(realPath,'utf8');
             ctx.body = render(r, obj);
             return next()
    
         }
     }
    module.exports = View;

### 调用方式： ###

const Koa = require('./lib/application');
    const Router = require('./lib/router');
    const View = require('./lib/views')
    const path = require('path');
    const router = new Router();
    const app = new Koa();
    const view = new View();
    
    app.use(router.routes());
    router.get('/html',async (ctx,next)=> { 
        await view.render(path.join(__dirname,'./views/index.ejs'),{ title:'hello koa2'},ctx,next);
        next();
    })
    app.listen(3000);

### views/index.ejs ###

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <%=title%>
        <button></button>
    </body>
    </html>

### 渲染以后的页面 ###

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        hello koa2
        <button></button>
    </body>
    </html>

发表评论取消回复

表情：

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

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

相关阅读

相关 koa简易框架（四）

之前我们实现了简易版koa，router，static，今天我们在来实现一下koa-view，不说废话，直接上代码 koa-view 源码： const

绝地灬酷狼/ 2023年07月24日 08:52/ 0 赞/ 15 阅读

相关 koa简易框架（二）

koa-router简易封装之前我们封装了application，可以通过app.use方式，设置ctx.body，但是如果我们不设置路由，就会想下面一样：

墨蓝/ 2023年07月24日 08:48/ 0 赞/ 1 阅读

相关 Node框架koa写接口

1.创建一个文件夹koa-app并用vscode打开 npm init -y cnpm install koa koa-router --save 2.创建

柔光的暖阳◎/ 2023年02月23日 03:59/ 0 赞/ 6 阅读

相关第四代Express框架koa简介

文章目录简介 koa和express koa使用介绍中间件的级联关系 koa的构造函数启动http ser

痛定思痛。/ 2022年12月25日 01:51/ 0 赞/ 91 阅读

相关 Koa 框架简介

一句话简介基于 Node.js 的下一代 Web框架 > 基于 nodejs: 代表了它是 nodejs 的模块 > 下一代: 第一代 web 框架是 Expre

今天药忘吃喽~/ 2022年12月15日 02:52/ 0 赞/ 148 阅读

相关 Koa 框架教程

[Koa][] 就是一种简单好用的 Web 框架。它的特点是优雅、简洁、表达力强、自由度高。本身代码只有1000多行，所有功能都通过插件实现，很符合 Unix 哲学。本文从

布满荆棘的人生/ 2022年05月23日 05:36/ 0 赞/ 169 阅读

相关 koa框架会用也会写—(koa-bodyparser、koa-better-body)

Koa中常用的中间件： koa-session：让无状态的http拥有状态，基于cookie实现的后台保存信息的session koa-mysql:封装了需要

╰+哭是因爲堅強的太久メ/ 2022年04月23日 02:44/ 0 赞/ 271 阅读

相关 koa框架会用也会写—(koa-view、koa-static)

Koa中常用的中间件： koa-session：让无状态的http拥有状态，基于cookie实现的后台保存信息的session koa-mysql:封装了需要

Bertha 。/ 2022年04月23日 02:36/ 0 赞/ 271 阅读

相关 Koa框架教程

　　《[Koa框架教程][Koa]》的所有示例代码我都运行过，完整代码见附件koa2.zip。　　《[koa2开发入门][koa2]》的所有示例代码我都运行过，完整代码见附

偏执的太偏执、/ 2022年04月06日 13:14/ 0 赞/ 170 阅读

相关 koa框架会用也会写—(koa-router)

Koa中常用的中间件： koa-session：让无状态的http拥有状态，基于cookie实现的后台保存信息的session koa-mysql:封装了需要

电玩女神/ 2022年03月25日 14:10/ 0 赞/ 204 阅读