koa2 从入门到进阶之路（四）

之前的文章我们介绍了一下 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 改为如下：

 1 //引入 koa模块
 2 const Koa = require('koa');
 3 const Router = require('koa-router');
 4 const views = require('koa-views');
 5
 6 //实例化
 7 const app = new Koa();
 8 const router = new Router();
 9
10 //配置模板引擎中间件
11
12 // 模板的后缀名是.html
13 // app.use(views('views', {14 //     map: {html: 'ejs'}
15 // }));
16 // 模板的后缀名是.html
17 app.use(views('views', {
18     extension: 'ejs'
19 }));
20
21 //写一个中间件配置公共的信息
22 app.use(async (ctx, next) => {
23     ctx.state.commonData = "这是一个公有数据，每个页面都能引用";
24     // 继续向下匹配路由
25     await next();
26 });
27
28 router.get('/', async (ctx) => {
29     let title = "hello world";
30     let list = ["aaa", "bbb", "ccc"];
31
32     await ctx.render('index', {
33         title,
34         list,
35     });
36 });
37
38 router.get('/news', async (ctx) => {
39     await ctx.render('news', {});
40 });
41
42 //启动路由
43 app.use(router.routes());
44 app.use(router.allowedMethods());
45
46 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 中的代码：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title></title>
 6 </head>
 7 <body>
 8     <% include blocks/header.ejs %>
 9     <p><%= commenData %></p>
10     <p><%= title %></p>
11     <ul>
12         <% for(var i = 0;i < list.length;i++){ %>
13             <li><%= list[i] %></li>
14         <% } %>
15     </ul>
16 </body>
17 </html>

news.ejs

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title></title>
 6 </head>
 7 <body>
 8 <% include blocks/header.ejs %>
 9 <h2><%= commonData %></h2>
10 </body>
11 </html>

blocks/header.ejs

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

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

最终结果如下：

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

转载于:https://www.cnblogs.com/weijiutao/p/10691481.html

koa2 从入门到进阶之路（四）相关推荐

koa2 从入门到进阶之路（五）
之前的文章我们介绍了一下 koa 中使用 ejs 模板及页面渲染,本篇文章我们来看一下 koa post提交数据及 koa-bodyparser中间件. 在前端页面中,不免会用到 form 表单和 p ...
车辆动力学从入门到进阶之路（传统篇）
编辑:CrazyRabbit 日期:2022年6月16日本文主要讲一下车辆动力学如何入门,如何进阶,供想进入该领域的工程师参考. 本篇主要讲的是传统领域,不包含电控开发. 0. 前言何为车辆动力学 ...
Vue 从入门到进阶之路（十四）
之前的文章我们对 vue 的基础用法已经有了很直观的认识,本章我们来看一下 vue 中的生命周期函数. 上图为 Vue官方为我们提供的完整的生命周期函数的流程图,下面的案例我们只是走了部分情况流程,但 ...
Python 爬虫从入门到进阶之路（四）
之前的文章我们做了一个简单的例子爬取了百度首页的 html,我们用到的是 urlopen 来打开请求,它是一个特殊的opener(也就是模块帮我们构建好的).但是基本的 urlopen() 方法不支持 ...
python爬虫入门-Python 爬虫从入门到进阶之路（一）
通用爬虫和聚焦爬虫根据使用场景,网络爬虫可分为通用爬虫和聚焦爬虫两种. 通用爬虫通用网络爬虫是捜索引擎抓取系统(Baidu.Google.Yahoo等)的重要组成部分.主要目的是将互联 ...
java开发13寸_Java 从入门到进阶之路（二十九）
在之前的文章我们已经可以对本地对文件和目录进行新建和删除等操作,接下来我们来对文件内对具体内容进行操作. 如下代码,我们实现了一个基本的文件写入: 1 /** 2 * java.io.RandomAc ...
成为1个技术大牛的入门到进阶之路（学习路线图）
本人新书出版,对技术感兴趣的朋友请关注: https://mp.weixin.qq.com/s/uq2cw2Lgf-s4nPHJ4WH4aw 计算机领域技术更迭非常之快,内容博大精深.涉及到分布式架构 ...
Python 爬虫从入门到进阶之路（七）
在之前的文章中我们一直用到的库是 urllib.request,该库已经包含了平常我们使用的大多数功能,但是它的 API 使用起来让人感觉不太好,而 Requests 自称 "HTTP fo ...
python的进阶之路_Python 从入门到进阶之路（三）
在之前的文章我们介绍了一下 Python 中 if while for 的使用,本章我们来看一下 Python 中的变量类型. 在 Python 定义变量时的规则是变量名 = 变量 ,Python ...

koa2 从入门到进阶之路（四）

koa2 从入门到进阶之路（四）相关推荐

最新文章

热门文章

koa2 从入门到进阶之路 （四）

koa2 从入门到进阶之路 （四）相关推荐

最新文章

热门文章

koa2 从入门到进阶之路（四）

koa2 从入门到进阶之路（四）相关推荐