之前的文章我们介绍了一下 koa 中间件 以及 koa 中间件的洋葱图执行流程，本篇文章我们来看一下 koa 中使用 ejs 模板及页面渲染。

在 Express 中，我们经常会用 ejs 模板来渲染前端页面，在 koa 中同样可以使用 ejs 模板引擎，关于 ejs 模板引擎的用法这里就不做过多说明了，https://ejs.bootcss.com/，这是官网，为我们做了详细的教程。

在 koa 中使用 ejs 我们需要安装 koa-views 和 ejs 两个模块：

安装 koa-views npm installkoa-views --save  / cnpm install koa-views --save

安装 ejs npm install ejs --save / cnpm install ejs --save

然后就可以在我们的项目中配置和使用了，我们在之前的项目中将 app.js 改为如下：

 //引入 koa模块

 const Koa = require('koa');

 const Router = require('koa-router');

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

 //实例化

 const app = new Koa();

 const router = new Router();

 //配置模板引擎中间件

 // 模板的后缀名是.html

 // app.use(views('views', {

 //     map: {html: 'ejs'}

 // }));

 // 模板的后缀名是.html

 app.use(views('views', {

     extension: 'ejs'

 }));

 //写一个中间件配置公共的信息

 app.use(async (ctx, next) => {

     ctx.state.commonData = "这是一个公有数据，每个页面都能引用";

     // 继续向下匹配路由

     await next();

 });

 router.get('/', async (ctx) => {

     let title = "hello world";

     let list = ["aaa", "bbb", "ccc"];

     await ctx.render('index', {

         title,

         list,

     });

 });

 router.get('/news', async (ctx) => {

     await ctx.render('news', {});

 });

 //启动路由

 app.use(router.routes());

 app.use(router.allowedMethods());

 app.listen(3000);

首先在模块中引入 koa-views；然后我们用中间件 app.use("views",{ }) 的形式引入 ejs 模板引擎，其中注释掉的为第一种，是以 .html 结尾，第二种是以 .ejs 结尾。

"views" 是我们要指定的目录，我们写成 "views"，就需要在项目目录中创建一个 views 目录来存放我们的 ejs 文件。

之后我们写了一个应用级中间件来存放一个共有的数据，这个中间件可以去上一篇文章看一下具体作用，这里不过多解释。

然后我们在 router.get("/", ) 路由中存放了两条数据，一条字符串，一条数组。

我们不再使用 stx.body="" 的方式向前端输出内容，而是使用 ctx.render("index",{ }) 形式向前端输出内容，其中 "idenx" 为我们在 "views" 目录中定义的 index.ejs 的文件名称，{ } 内为我们要传入的数据。

剩下的内容就和我们之前项目的一样即可，我们再来看一下现在的项目目录：

如果我们在 views 目录中定义的以 .html 结尾，将上面代码的 html 注释解开，将 ejs 注释掉即可。

然后我们来看一下 index.ejs 中的代码：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title></title>

 </head>

 <body>

     <% include blocks/header.ejs %>

     <p><%= commenData %></p>

     <p><%= title %></p>

     <ul>

         <% for(var i = 0;i < list.length;i++){ %>

             <li><%= list[i] %></li>

         <% } %>

     </ul>

 </body>

 </html>

news.ejs

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title></title>

 </head>

 <body>

 <% include blocks/header.ejs %>

 <h2><%= commonData %></h2>

 </body>

 </html>

blocks/header.ejs

<h1>这是一个头部的模块</h1>

关于 ejs 文件内的运算符号 <%%> 在这里就不做过多解释了，大家可以去 ejs 官网学习，不是很难。

最终结果如下：

可以看出我们的 ejs 模板引擎运行的没有问题，数据也都正常显示在了页面中。

koa2 从入门到进阶之路 （四）的更多相关文章

  1. koa2 从入门到进阶之路 （二）

    之前的文章我们已经能够在本地启动一个简单的项目,本章我们来看一下 koa 路由,get 传值,动态路由. 一.Koa 路由 路由(Routing)是由一个 URI(或者叫路径)和一个特定的 HTTP ...

  2. koa2 从入门到进阶之路 （一）

    首先我们先来了解一下 Koa 是什么,https://koa.bootcss.com/,这是 Koa 的官方网站,映入眼帘的第一句就是 Koa -- 基于 Node.js 平台的下一代 web 开发框 ...

  3. koa2 从入门到进阶之路 （五）

    之前的文章我们介绍了一下 koa 中使用 ejs 模板及页面渲染,本篇文章我们来看一下 koa post提交数据及 koa-bodyparser中间件. 在前端页面中,不免会用到 form 表单和 p ...

  4. koa2 从入门到进阶之路 （三）

    之前的文章我们介绍了一下 koa 路由,get 传值,动态路由,本节我们看一下 koa 中间件 以及 koa 中间件的洋葱图执行流程. 一.什么是 Koa 的中间件 通俗的讲:中间件就是匹配路由之前或 ...

  5. koa2 从入门到进阶之路 （七）

    之前的文章我们介绍了一下 koa koa-static静态资源中间件,本篇文章我们来看一下 koa 中 cookie 和 session 的使用. cookie 是存储于访问者的计算机中的变量.可以让 ...

  6. koa2 从入门到进阶之路 （六）

    之前的文章我们介绍了一下 koa post提交数据及 koa-bodyparser中间件,本篇文章我们来看一下 koa-static静态资源中间件. 我们在之前的目录想引入外部的 js,css,img ...

  7. Python 爬虫从入门到进阶之路（十四）

    之前的文章我们已经可以根据 re 模块,Xpath 模块和 BeautifulSoup4 模块来爬取网站上我们想要的数据并且存储在本地,但是我们并没有对存储数据的格式有要求,本章我们就来看数据的存储格 ...

  8. Python 从入门到进阶之路（四）

    之前的文章我们简单介绍了一下 Python 的几种变量类型,本篇文章我们来看一下 Python 中的函数. 函数是组织好的,可重复使用的,用来实现单一,或相关联功能的代码段. 函数能提高应用的模块性, ...

  9. Vue 从入门到进阶之路（十四）

    之前的文章我们对 vue 的基础用法已经有了很直观的认识,本章我们来看一下 vue 中的生命周期函数. 上图为 Vue官方为我们提供的完整的生命周期函数的流程图,下面的案例我们只是走了部分情况流程,但 ...

随机推荐

  1. 【转】Jquery折叠效果

    转自:http://www.cnblogs.com/clc2008/archive/2011/10/25/2223254.html <!DOCTYPE html PUBLIC "-// ...

  2. python并发编程之多线程2死锁与递归锁，信号量等

    一.死锁现象与递归锁 进程也是有死锁的 所谓死锁: 是指两个或两个以上的进程或线程在执行过程中,因争夺资源而造成的一种互相等待的现象,若无外力作用, 这些永远在互相等待的进程称为死锁进程 如下就是死锁 ...

  3. winform 客户端 HTTP协议与服务端通信以及解决中文乱码

    本来从来没有仔细研究过Http协议,今天因为公司业务需求,调试了半天,终于现在会Winform用Http协议与服务端通信了,其中常用的有POST和Get方式: 仔细看了人人网和新浪等大部分都是采用GE ...

  4. ORA-12504:tns:监听程序在 CONNECT_DATA中未获得SERVICE_NAME

    在VS2008中创建一个数据源时,提示以下错误 “ORA-12504:tns:监听程序在 CONNECT_DATA中未获得SERVICE_NAME” 本机安装ORACLE客户端,找出以下路径的文件D: ...

  5. java poi导出Excel 总结

    首先下载 Apache 的POI jar包 将更目录下的poi-3.8-20120326.jar 和lib下的三个jar包导入 如下图: 首先必须搞一个通用的工具类,网上找的,能用就行,java就是这 ...

  6. Command line option syntax error. Type Command /? for Help.

    --------------------------- Microsoft Visual C++ 2005 Redistributable --------------------------- Co ...

  7. spring framework 源码

    spring framework 各版本源码下载地址 现在spring的源码下载地址真是不好找,这次终于找到了.记录一下,以帮助需要的朋友. https://github.com/spring-pro ...

  8. JsonParse类

    using System.Data; using Newtonsoft.Json; using Newtonsoft.Json.Converters; using System; using Syst ...

  9. 聚类算法（二）--BIRCH

    BIRCH (balanced iterative reducing and clustering using hierarchies)(名字太长不用管了) 无监督,适合大样本的聚类方法.大多数情况只 ...

  10. Maven核心知识

    什么是Maven? Maven是基于项目对象模型(POM), 可以通过一小段描述信息来管理项目的构建和文档的软件项目管理工具 目录结构如下 src main java package test jav ...