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 改为如下：

 //引入 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 从入门到进阶之路（四）的更多相关文章

koa2 从入门到进阶之路（二）
之前的文章我们已经能够在本地启动一个简单的项目,本章我们来看一下 koa 路由,get 传值,动态路由. 一.Koa 路由路由(Routing)是由一个 URI(或者叫路径)和一个特定的 HTTP ...
koa2 从入门到进阶之路（一）
首先我们先来了解一下 Koa 是什么,https://koa.bootcss.com/,这是 Koa 的官方网站,映入眼帘的第一句就是 Koa -- 基于 Node.js 平台的下一代 web 开发框 ...
koa2 从入门到进阶之路（五）
之前的文章我们介绍了一下 koa 中使用 ejs 模板及页面渲染,本篇文章我们来看一下 koa post提交数据及 koa-bodyparser中间件. 在前端页面中,不免会用到 form 表单和 p ...
koa2 从入门到进阶之路（三）
之前的文章我们介绍了一下 koa 路由,get 传值,动态路由,本节我们看一下 koa 中间件以及 koa 中间件的洋葱图执行流程. 一.什么是 Koa 的中间件通俗的讲:中间件就是匹配路由之前或 ...
koa2 从入门到进阶之路（七）
之前的文章我们介绍了一下 koa koa-static静态资源中间件,本篇文章我们来看一下 koa 中 cookie 和 session 的使用. cookie 是存储于访问者的计算机中的变量.可以让 ...
koa2 从入门到进阶之路（六）
之前的文章我们介绍了一下 koa post提交数据及 koa-bodyparser中间件,本篇文章我们来看一下 koa-static静态资源中间件. 我们在之前的目录想引入外部的 js,css,img ...
Python 爬虫从入门到进阶之路（十四）
之前的文章我们已经可以根据 re 模块,Xpath 模块和 BeautifulSoup4 模块来爬取网站上我们想要的数据并且存储在本地,但是我们并没有对存储数据的格式有要求,本章我们就来看数据的存储格 ...
Python 从入门到进阶之路（四）
之前的文章我们简单介绍了一下 Python 的几种变量类型,本篇文章我们来看一下 Python 中的函数. 函数是组织好的,可重复使用的,用来实现单一,或相关联功能的代码段. 函数能提高应用的模块性, ...
Vue 从入门到进阶之路（十四）
之前的文章我们对 vue 的基础用法已经有了很直观的认识,本章我们来看一下 vue 中的生命周期函数. 上图为 Vue官方为我们提供的完整的生命周期函数的流程图,下面的案例我们只是走了部分情况流程,但 ...

随机推荐

UML核心元素--包
包是一种容器,如同文件夹一样,将某些信息分类,形成逻辑单元.包可以容纳任何UML元素,例如用例.业务实体.类图等,也包括子包. 一.分包原则: (1)高内聚:被分入同一个包的元素相互联系紧密,伸至不可 ...
.net 缓存之数据库缓存依赖
当监听的指定数据库内容某张表变化时就更新缓存先来配置数据库,启动监听服务(SQL2008下) 执行如下语句: ALTER DATABASE OumindBlog SET NEW_BROKER WIT ...
初始String
--------------siwuxie095 使用频繁操作繁琐的数据有哪些? 对于基本数据类型:int.ch ...
unreal3控制台窗口属性调整
在windows平台上,unreal3的console窗口类是FOutputDeviceConsoleWindows 启动时,它可以从XXXGame.ini中读取诸如窗口大小之类的属性,具体的代码在 ...
JavaScript中函数作为值
function myfunc() { // .. } 这是个函数,这样理解, myfunc只是外层作用域的一个变量,指向刚刚声明的function. 也就是说,function本身就是一个值, 就像 ...
Ubuntu12.04 上使用perl snmpwalk问题
今天在Ubuntu12.04上使用perl来获取snmp数据,运行时出现下列问题.解决方法安装一下libnet-snmp-perl即可.命令行运行:sudo apt-get install libne ...
20169201 使用Metaspoit攻击MS08-067实验
MS08-067漏洞介绍 MS08-067漏洞的全称为"Windows Server服务RPC请求缓冲区溢出漏洞",如果用户在受影响的系统上收到特制的 RPC 请求,则该漏洞可能允 ...
Linux常用知识点汇总
常用命令 1.ls 列出目录下的所有文件及文件夹 2.pwd 打印出当前所在目录 3. ./ 执行 .sh 文件命令 4.ip addr 查看ip地址 5.sudo service network ...
vue 绑定属性（index）
<el-menu-item v-for="item in links" :key="item.id" v-bind:index="item.id ...

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

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

随机推荐

热门专题

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

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