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官方为我们提供的完整的生命周期函数的流程图,下面的案例我们只是走了部分情况流程,但 ...
随机推荐
- Python命令模块argparse学习笔记(三)
参数组 ArgumentParser.add_argument_group(title=None, description=None) 默认情况下,当显示帮助消息时,ArgumentParser将命令 ...
- shell入门-wc
命令:wc 选项:-l 查看行数 -w 以空白字符为分隔符 查看有多少单词 -m 查看字符数,文件大小 说明:统计指定文件中的字节数.字数.行数. -l [root@wangshaojun 11 ...
- CSS如何计算优先级？如何计算权重？
(1) 优先级就近原则,同权重以最近者为准 载入样式以最后载入的样式为准: 同权重下:内联样式表(标签内部) > 嵌入样式表(当前文件) > 外部样式表(外部文件) !import > ...
- 9、IPA通路分析相关网页教程
IPA FAQ: http://ingenuity.force.com/ipa/IPATutorials# ####有各种相关教程和帮助文件. IPA 分析结果展示: http://www.lucid ...
- Entity Framework Code-First（9.8）：DataAnnotations - Column Attribute
DataAnnotations - Column Attribute: Column attribute can be applied to properties of a class. Defaul ...
- charles请求入参中有乱码
工作中,需要入参,但是发现入参中,有中文的都是乱码,仔细查阅headers,发现Content-Type是application/x-www-form-urlencoded类型,而实际上,入参是jso ...
- ES Docs-1：Installation Elasticsearch-2.3.1
installation Elasticsearch requires at least Java 7. Specifically as of this writing, it is recommen ...
- 网页设计与开发——HTML、CSS、JavaScript (王津涛) pdf扫描版
网页设计与开发——html.css.javascript从网页制作实际出发,除了详细地介绍html页面制作.css样式控制和javascript动态程序之外,还介绍了html 5.全书共分15章,各章 ...
- 【java数据类型和mysqk数据类型对照表】
java mysql 数据类型对照 类型名称 显示长度 数据库类型 JAVA类型 JDBC类型索引(int) 描述 VARCHAR L+N VARCHAR java.lan ...
- adnroid 启动是没有标题栏
<activity android:name=".MainActivity" android:theme="@android:style/Theme.Light.N ...