Egg 模板渲染

vienceTang
1,664 阅读5分钟

「这是我参与11月更文挑战的第1天，活动详情查看：2021最后一次更文挑战」

心若有所向往 何惧道阻且长

持续更新中...

系列文章传送门：

View模板引擎渲染

上文中我们学习了 Service 服务，本文我们来了解一下 Egg 模板渲染。

首先我们要知道页面是需要在服务端进行渲染之后展示的，为什么需要在服务端渲染呢？

  • 有利于 SEO 优化
  • 渲染性能好
  • 对前后端分离开发模式的补充

Egg 内置 egg-view 作为模板解决方案，并支持多模板渲染，每个模板引擎以插件的方式进行引入，我们今天学习的是 EJS 模板引擎 ，高效的嵌入式 JavaScript 模板引擎。

EJS 模板引擎

使用说明：github.com/eggjs/egg-v…

引入

# use npm
npm install egg-view-ejs --save

# use yarn
yarn add egg-view-ejs

配置

  • 首先配置 /config/plugins.js 文件，把该文件清空后进行下面的配置

    'use strict';

exports.ejs = {
  enable: true,
  package: 'egg-view-ejs',
};

  • 然后配置 /config/config.default.js 文件

    // 配置 ejs 模板引擎
config.view = {
  // 表示对.html文件进行模板渲染
  mapping: {
    '.html': 'ejs'
  }
};

配置完成之后我们就可以在控制器 Controller 中共使用 EJS 模板引擎了。

使用

我们需要在控制器中进行渲染模板页面，所以在此之前我们需要在 app/service/article.js 中 getArticle 方法结束后，创建一个服务用来返回数据，代码如下

// app/service/article.js
async getArticleDetails() {
  // 实际开发此处应该去数据库中查询对应的文章详情
  // const article = await this.ctx.query(`select * from articles where id = ?`, id)
  // 因为没有连接数据库，所以此处使用模拟数据
  const res = {
    id: '0001',
    title: '尤雨溪都不知道的100个vue小知识',
    content: '这是内容<h1>这是内容</h1>这是内容这是内容这是内容这是内容',
    author: 'vience',
    cover_image: 'https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/1523141b2d864b0e9963d62e8748a04f~tplv-k3u1fbpfcp-watermark.image?'
  }
  return res;
}

在数据准备之后，在 app/controller/home.js 中 vience 方法结束后，书写控制器方法进行模板页面渲染，代码如下

// app/controller/home.js
async useEjs() {
  const { ctx } = this;
  const res = await ctx.service.article.getArticleDetails();
  //ctx.render()方法，进行渲染一个模板，第一个参数时，模板名称；第二个参数时渲染模板使用的数据()
  await ctx.render('index', {
    res,
    list: [
      { id: '001', name: '柚子'},
      { id: '002', name: '橙子'},
      { id: '003', name: '梨子'},
      { id: '004', name: '李子'},
      { id: '005', name: '车厘子'}
    ]
  })
}

在控制器代码完成之后，我们在 /app/router.js 进行配置路由

// ejs 页面路由配置
router.get('/useEjs', controller.home.useEjs);

这里我们还没有模板index.html，我们需要在 /app 下面创建一个 view 文件夹，在 /app/view 下创建 idnex.html 文件，并进行数据的展示。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>EJS 模板</title>
</head>
<body>
<h3 class="title">this page use ejs</h3>
<h3 id="article">this is article detail</h3>
<p>id: <%= res.id %></p>
<p>title: <%= res.title %></p>
<p>content: <%= res.content %></p>
<p>author: <%= res.author %></p>
<img src="<%= res.cover_image %>" alt="egg">
<h3>水果列表</h3>
<ul> 
  <% for(var i=0; i<list.length; i++) { %>
  <li><%= list[i].id %> === <%= list[i].name %></li>
  <% } %>
</ul>
</body>
</html>

模板效果

EJS模板

EJS 模板语法

<%：'脚本'标签，用于流程控制，无输出

<%_：删除器前端的空格符

<%=：输出数据到模板（输出是转义 HTML 标签）

<%-：输出非转义的数据到模板

<%#：注释标签，不执行，不输出内容

<%%：输出字符串'<%'

%>：一般结束标签

-%>：删除紧接其后的换行符

_%>：将结束标签后面的空格符删除

默认分隔符修改

我在在模板使用了很多 %，其实这个符号是可以进行配置修改的，但是我们一般不进行修改。

在 config/config.default.js 中添加如下配置可以进行修改

config.ejs = {
  // 此处配置可以让 ejs 模板中的 % 写成 $
  delimiter: "$"
}

公共代码引用

在实际的项目中我们的模板肯定不会是一个单独的 index.html 页面，我们般会把页面的公共的部分进行抽离，单独做成一个模板，然后在需要的模板中进行引用。

我们在 app/view 中创建 header.html 和 footer.html 文件，并分别编写部分代码进行演示

<!-- heaer.html -->
<h3>这是页面的 header 部分</h3>

<!-- footer.html -->
<h3>这是页面的 footer 部分</h3>

然后我们在 indexx.html 模板中使用 <% include header.html %> 引入头部和底部模板，代码如下

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>EJS 模板</title>
</head>
<body>
  <% include header.html %>
  <h3 class="title">this page use ejs</h3>
  <h3 id="article">this is article detail</h3>
  <p>id: <%= res.id %></p>
  <p>title: <%= res.title %></p>
  <p>content: <%= res.content %></p>
  <p>author: <%= res.author %></p>
  <img src="<%= res.cover_image %>" alt="egg">
  <h3>水果列表</h3>
  <ul> 
    <% for(var i=0; i<list.length; i++) { %>
    <li><%= list[i].id %> === <%= list[i].name %></li>
    <% } %>
  </ul>
  <% include footer.html %>
</body>
</html>

在终端中用yarn dev启动服务，然后在浏览器中输入http://127.0.0.1/useEjs。 可以看到公用部分的文件已经引入进来了。

静态资源的使用

Egg 中默认的静态资源文件是放在 app/public 目录下，我们可以在该目录下创建 js css img 文件，进行存储静态资源。

img 文件

我们在img文件下，存放一张EGG.jpg，这时我们可以在模板中使用该图片，代码如下

<!-- index.html -->
<h3>this is a local image</h3>
<img src="/public/img/EGG.jpg" alt="EGG">

我们可以通过访问 http://127.0.0.1:7001/public/img/EGG.jpg，也可以访问到该图片。

同理，css 文件和 js 文件也是可以这样访问的.

当我们的路径上不想出现 public 时，我们可以在配置文件 config/config.default.js中进行配置，但是我们一般不进行修改，代码如下

// 修改静态资源地址 /public
// eg:/public/css/style.css
// 修改后为:/assets/css/style.css
config.static = {
  prefix: '/assets'
}

javascript 文件

在 app/public/js 中创建一个 main.js 文件，并进行编写下面代码，我们再写一个 css 样式文件，统一看效果。

(function () {
  var article = document.getElementById('article')
  article.style.color = 'red'
})();

css 文件

在 app/public/css 中创建一个 style.css 文件，并进行编写下面代码。

.title {
  font-size: 28px;
  color:cadetblue;
}

我们在 index.html 模板中引入 js css img 一起看效果，index.html 代码如下

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>EJS 模板</title>
  <!-- 引入 css 文件 -->
  <link rel="stylesheet" href="/public/css/style.css">
</head>
<body>
  <% include header.html %>
  <h3 class="title">this page use ejs</h3>
  <h3 id="article">this is article detail</h3>
  <p>id: <%= res.id %></p>
  <p>title: <%= res.title %></p>
  <p>content: <%= res.content %></p>
  <p>author: <%= res.author %></p>
  <img src="<%= res.cover_image %>" alt="egg">
  <hr>
  <h3>this is a local image</h3>
  <!-- 使用本地图片 -->
  <img src="/public/img/EGG.jpg" alt="EGG">
  <h3>水果列表</h3>
  <ul> 
    <% for(var i=0; i<list.length; i++) { %>
    <li><%= list[i].id %> === <%= list[i].name %></li>
    <% } %>
  </ul>
  <% include footer.html %>
  <!-- 引入 js 文件 -->
  <script src="/public/js/main.js"></script>
</body>
</html>

静态资源效果

EJS模板渲染

写在最后

关注我，更多内容持续输出

🌹 喜欢就点个赞吧👍🌹

🌹 觉得有收获的，可以来一波 收藏+关注，以免你下次找不到我😁🌹

🌹欢迎大家留言交流，批评指正，转发请注明出处，谢谢支持！🌹

avatar
文章
阅读
粉丝