之前的文章我们介绍了一下 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. centos6 启动流程

    具体过程:1)加载BIOS的硬件信息,执行BIOS内置程序.2)读取MBR(Master Boot Record)中Boot Loader中的引导信息.3)加载内核Kernel boot到内存中.4) ...

  2. OS X 10.9 Mavericks下显示和隐藏文件（区别10.8.*）

    我们常常在Windows系统下通过界面设置显示和隐藏文件,在Mac OS X通常采用defaults write命令来解决这个问题. 之前的OS X 10.8.*系统可以使用如下两条命令来开始或者关闭 ...

  3. CentOS 7 配置 mariadb

    一.安装mariadb :  yum groupinstall  mariadb  mariadb-client -y 二.启动(设置开机启动)服务 : systemctl  start (enabl ...

  4. elasticsearch 复合查询

    常用查询 固定分数查询 127.0.0.1/_search(全文搜索) { "query":{ "match"{ "title":" ...

  5. Ubuntu Linux 使用桂电校园网 上网

    2016年9月1日 星期四 桂电校园网今天升级新的出校器,旧的出校器已经不能使用,所以本篇博客已经过期,下面的方法已经不能让Ubuntu使用桂电校园网上外网了.详细的原因,请到这个网站查看:校园网计费 ...

  6. R语言对矩阵按某一列排序

    [plain] view plaincopy a <- c(5,4,3,2,1) b <- c(1,2,3,4,5) c <- cbind(a,b) [plain] view pla ...

  7. p1098 逆序对

    传送门 题目 输入格式: 第一行,一个数n,表示序列中有n个数. 第二行n个数,表示给定的序列. 输出格式: 给定序列中逆序对的数目. 数据范围: 对于50%的数据,n≤2500 对于100%的数据, ...

  8. (转)web端测试环境的搭建（tomcat）

    C/s架构,常见的QQ这种结构的程序是有服务器来提供服务的,客户端来使用服务:B/S架构不需要安装客户端,只需要浏览器就可以了例如QQ农场,BS架构的程序在更新维护的时候,不需要更新客户端,仅在服务器 ...

  9. JavaWeb:JSP技术基础

    JavaWeb:JSP技术 快速开始 介绍 JSP全称Java Server Pages,是一种动态网页开发技术.它使用JSP标签在HTML网页中插入Java代码.标签通常以<%开头以%> ...

  10. 解读人：刘杰，Targeted Quantitative Kinome Analysis Identifies PRPS2 as a Promoter for Colorectal Cancer Metastasis（PRM-磷酸化激酶定量发现结肠癌转移促进因子-PRPS2）

    关键词:PRM,kinase,colorectal cancer, metastasis, PRPS2 来自加州大学河滨分校的Yinsheng Wang教授应用PRM技术筛选出介导结肠癌细胞转移促进因 ...