KOA笔记（02）：ejs模板引擎

最新推荐文章于 2023-10-14 01:54:25 发布

@lazypet~

最新推荐文章于 2023-10-14 01:54:25 发布

阅读量272

点赞数

分类专栏： KOA 文章标签： js node.js

本文链接：https://blog.csdn.net/qq_43323305/article/details/106117270

版权

KOA 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

1、ejs模板引擎的作用

在开发中，我们经常会将后端的数据渲染到前端，这个时候就要用到ejs模板引擎
ejs起到的是一个中间件的作用，在后端的数据经过出路返回到前端

2、ejs模板的使用
要想使用ejs，先得在项目中添加 koa-views 与 ejs

npm i ejs --save
npm i koa-views --save

3、在代码中使用ejs

3.1、引入第三方中间件

const views = require('koa-views');

3.2、配置模板引擎方式一
以这种方式默认后缀名为html为模板

const mEjs = views(__dirname+'/views',{
//这里如果不写dirname会在node_modules下查找
    map:{
        html:'ejs' //找到后缀名为html的文件，以ejs渲染，此时模板为html
    }
})

3.3、配置模板引擎方式二
以这种方式默认后缀名为ejs为模板

const mEjs = views('views',{
    extension:'ejs'//以这种方式模板为ejs
})

3.4、使用ejs

koa.use(mEjs);

4、使用render函数渲染ejs模板

render函数是异步函数，要记得在前面加await

在views文件夹下建立模板
这里我配置的koa-view是按照第一种
在这里插入图片描述
在路由中渲染ejs模板

router
    .get('/', async(ctx) => {
        await ctx.render('test')
    })

此时路由就会返回index页面

5、ejs的进阶

1、传递数据

  //ejs把后台数据渲染到前台
    .get('/new', async (ctx) => {
        let evil = '迪奥布兰度';//以ejs渲染，直接将后台数据渲染，不会再返回body了
        await ctx.render('index2',{//render函数会在数据加载完毕后，在进行渲染
            //所以render是一个异步方法，这里记得加await
            evil:evil
        });
    })

对应的ejs模板

<body>
    JOJOprprprp
    <h2><%=evil%> </h2>
</body>

2、循环数据

 //ejs模板引擎循环数据
    .get('/circu', async (ctx) => {
        let list = [1,2,3];
        await ctx.render('circu',{
            list:list 
        });
    })

对应的ejs模板

<ul>
    <% list.forEach(ele => { %>
    <li><%= ele %> </li>
    <% }) %>
</ul>

3、在ejs中引入其他的ejs

   <%- include public/header.html %>

4、如果我们有公共的数据要往多个ejs模板中传递
将他们保存到ctx.state中

//写一个中间件配置公共的信息
    koa.use(async ctx=>{
        ctx.state.userInfor = 'sss';
        await next();
    })

//<%= .h%> 按照原样输出
//<%-%>中可以放html代码，也可以放一些字符串,会为你解析html

@lazypet~

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
KOA笔记（02）：ejs模板引擎

1、ejs模板引擎的作用在开发中，我们经常会将后端的数据渲染到前端，这个时候就要用到ejs模板引擎ejs起到的是一个中间件的作用，在后端的数据经过出路返回到前端2、ejs模板的使用要想使用ejs，先得在项目中添加 koa-views 与 ejsnpm i ejs --savenpm i koa-views --save3、在代码中使用ejs3.1、引入第三方中间件const views = require('koa-views');3.2、配置模板引擎方式一以这种方式默认后缀名为h
复制链接

扫一扫

专栏目录