koa2中使用模板引擎

ゝ一纸荒年。 2021-12-01 14:46 364阅读 0赞

#### 创建项目目录 ####

mkdir koa_view

#### 进入项目目录 ####

cd koa_view

#### 初始化 ####

npm init

#### 安装对应模块 ####

[https://www.npmjs.com/package/koa-view][https_www.npmjs.com_package_koa-view]  
[https://www.npmjs.com/package/koa-ejs][https_www.npmjs.com_package_koa-ejs]

yarn add koa --save
    yarn add koa-router --save
    yarn add koa-view --save || npm install koa-views --save
    yarn add ejs --save

#### 使用 ####

#### 目录结构 ####

![在这里插入图片描述][2019072110573572.png]

#### 绑定数据 ####

app.js

router.get('/', async (ctx) => {
        await ctx.render('index', {
            user: '天使'
        });
    });

index.ejs

你好<%=user%>

#### 引入模板 ####

<%-include common/header.ejs%>

#### 判断语句 ####

router.get('/', async (ctx) => {
        let num = 23;
        await ctx.render('index', {
            num: num
        });
    });

<%if(num > 24){%>
      年龄大于24
    <%}else{%>
      年龄小于24
    <%}%>

#### 循环语句 ####

router.get('/news', async (ctx) => {
        let list = ['111', '222', '333'];
        await ctx.render('news', {
            list: list
        });
    });

#### 在中间件中配置公共数据 ####

/**
     * 注意：需要在每一个路由的render里面都要渲染一个公共的数据
     * ctx.state = {  // 放在中间件里面
     *      session: this.sesstion,
     *      title: 'app'
     * };
     */
    
    app.use(async (ctx, next) => {
        ctx.state.userinfo = "张三";
        await next(); // 继续向下匹配路由
    });

[https_www.npmjs.com_package_koa-view]: https://www.npmjs.com/package/koa-view
[https_www.npmjs.com_package_koa-ejs]: https://www.npmjs.com/package/koa-ejs
[2019072110573572.png]: /images/20211201/6545f4de3bc84c2691cd1d0693d3478e.png