KOA中的ejs的基本使用

最新推荐文章于 2024-08-23 09:51:15 发布

原创最新推荐文章于 2024-08-23 09:51:15 发布 · 830 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#ejs

本文介绍了ejs服务端模板引擎，它可在ejs文件用script标签写js内容。在koa中使用时需先导入注册，通过render返回内容和数据。还讲解了变量输出方法、循环和判断的写法，以及引用组件的方式，即将重复内容写在文件内引用复用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

ejs

服务端模板引擎

ejs文件也可以使用script标签来写js内容

在koa中使用ejs

先导入和注册

const views = require('koa-views')
app.use(views(__dirname + '/views', {  // 这里已经说明的使用ejs模板的文件是哪个了  在后面只需要说明文件名
  extension: 'ejs'
})) // ejs注册

然后通过render在路由中返回ejs需要的内容和数据比如变量

router.get('/', async (ctx, next) => {
  // 加await是应为 渲染时异步的
  await ctx.render('index', {  // render两个参数 第一个是使用ejs模板的文件名  只需要文件名因为在上面导入时已经说明了文件的位置
    // 第二个就是传递给ejs模板的内容  比如title就是个变量
    title: 'Hello Koa 2!',
    isMe:true,
    blogList: [
      {
        id:1,
        title:'aaa'
      },
      {
        id:2,
        title:'bbb'
      },
      {
        id:3,
        title:'ccc'
      }
    ]
  })
})

变量如何输出

ejs模板获得变量的方法

<标签><%= 变量名 %></标签> // = 表示要输出的内容 或者变量
<p><%= title %></p>

如果以这种方式传入的变量没有就会报错

不报错的方法是<p><%= locals.title %></p>这种方法的变量不存在会返回一个空

循环和判断的方法

ejs的逻辑代码要一行就写一个<% 逻辑代码 %> 包括“{” “}”等

<div>
    <% if (isMe){ %>
    	<a>if的结果</a>
    <% } else{ %>
    	<a>else的结果</a>
    <% } %>
</div>

<ul>
  <% blogList.forEach(blog => { %>
    <li data-id="<%= blog.id %>"><%= blog.title %></li>
  <% }) %>
</ul>

引用的组件

就是将一些重复用到的内容写到一个文件内，通过引用的方法重复使用

引入的方法<%- include('路径/文件名',{传入的参数}) %>

传入的参数是在组件中的变量之类的

// widgets/user-info的文件
<div>
    <% if (isMe){ %>
    	<a>if的结果</a>
    <% } else{ %>
    	<a>else的结果</a>
    <% } %>
</div>

//index.ejs的文件
<!DOCTYPE html>
<html>
  <head>
    <title><%= title %></title>
    <link rel='stylesheet' href='/stylesheets/style.css' />
  </head>
  <body> 
    <h1><%= title %></h1>
    <p>EJS Welcome to <%= title %></p>
    <hr>
    <%- include('widgets/user-info',{isMe}) %>
  </body>
</html>