之前的文章我们介绍了一下 koa 中间件 以及 koa 中间件的洋葱图执行流程&＃xff0c;本篇文章我们来看一下 koa 中使用 ejs 模板及页面渲染。
在 Express 中&＃xff0c;我们经常会用 ejs 模板来渲染前端页面&＃xff0c;在 koa 中同样可以使用 ejs 模板引擎&＃xff0c;关于 ejs 模板引擎的用法这里就不做过多说明了&＃xff0c;https://ejs.bootcss.com/&＃xff0c;这是官网&＃xff0c;为我们做了详细的教程。
在 koa 中使用 ejs 我们需要安装 koa-views 和 ejs 两个模块&＃xff1a;
安装 koa-views npm installkoa-views --save / cnpm install koa-views --save
安装 ejs npm install ejs --save / cnpm install ejs --save
然后就可以在我们的项目中配置和使用了&＃xff0c;我们在之前的项目中将 app.js 改为如下&＃xff1a;
1 //引入 koa模块
2 const Koa &＃61; require(&＃39;koa&＃39;);
3 const Router &＃61; require(&＃39;koa-router&＃39;);
4 const views &＃61; require(&＃39;koa-views&＃39;);
5
6 //实例化
7 const app &＃61; new Koa();
8 const router &＃61; new Router();
9
10 //配置模板引擎中间件
11
12 // 模板的后缀名是.html
13 // app.use(views(&＃39;views&＃39;, {
14 // map: {html: &＃39;ejs&＃39;}
15 // }));
16 // 模板的后缀名是.html
17 app.use(views(&＃39;views&＃39;, {
18 extension: &＃39;ejs&＃39;
19 }));
20
21 //写一个中间件配置公共的信息
22 app.use(async (ctx, next) &＃61;> {
23 ctx.state.commonData &＃61; "这是一个公有数据&＃xff0c;每个页面都能引用";
24 // 继续向下匹配路由
25 await next();
26 });
27
28 router.get(&＃39;/&＃39;, async (ctx) &＃61;> {
29 let title &＃61; "hello world";
30 let list &＃61; ["aaa", "bbb", "ccc"];
31
32 await ctx.render(&＃39;index&＃39;, {
33 title,
34 list,
35 });
36 });
37
38 router.get(&＃39;/news&＃39;, async (ctx) &＃61;> {
39 await ctx.render(&＃39;news&＃39;, {});
40 });
41
42 //启动路由
43 app.use(router.routes());
44 app.use(router.allowedMethods());
45
46 app.listen(3000);
首先在模块中引入 koa-views&＃xff1b;然后我们用中间件 app.use("views",{ }) 的形式引入 ejs 模板引擎&＃xff0c;其中注释掉的为第一种&＃xff0c;是以 .html 结尾&＃xff0c;第二种是以 .ejs 结尾。
"views" 是我们要指定的目录&＃xff0c;我们写成 "views"&＃xff0c;就需要在项目目录中创建一个 views 目录来存放我们的 ejs 文件。
之后我们写了一个应用级中间件来存放一个共有的数据&＃xff0c;这个中间件可以去上一篇文章看一下具体作用&＃xff0c;这里不过多解释。
然后我们在 router.get("/", ) 路由中存放了两条数据&＃xff0c;一条字符串&＃xff0c;一条数组。
我们不再使用 stx.body&＃61;"" 的方式向前端输出内容&＃xff0c;而是使用 ctx.render("index",{ }) 形式向前端输出内容&＃xff0c;其中 "idenx" 为我们在 "views" 目录中定义的 index.ejs 的文件名称&＃xff0c;{ } 内为我们要传入的数据。
剩下的内容就和我们之前项目的一样即可&＃xff0c;我们再来看一下现在的项目目录&＃xff1a;
如果我们在 views 目录中定义的以 .html 结尾&＃xff0c;将上面代码的 html 注释解开&＃xff0c;将 ejs 注释掉即可。
然后我们来看一下 index.ejs 中的代码&＃xff1a;
1 DOCTYPE html>
2 <html lang&＃61;"en">
3 <head>
4 <meta charset&＃61;"UTF-8">
5 <title>title>
6 head>
7 <body>
8 <% include blocks/header.ejs %>
9 <p><%&＃61; commenData %>p>
10 <p><%&＃61; title %>p>
11 <ul>
12 <% for(var i &＃61; 0;i < list.length;i&＃43;&＃43;){ %>
13 <li><%&＃61; list[i] %>li>
14 <% } %>
15 ul>
16 body>
17 html>
news.ejs
1 DOCTYPE html>
2 <html lang&＃61;"en">
3 <head>
4 <meta charset&＃61;"UTF-8">
5 <title>title>
6 head>
7 <body>
8 <% include blocks/header.ejs %>
9 <h2><%&＃61; commonData %>h2>
10 body>
11 html>
blocks/header.ejs
<h1>这是一个头部的模块h1>
关于 ejs 文件内的运算符号 <%%> 在这里就不做过多解释了&＃xff0c;大家可以去 ejs 官网学习&＃xff0c;不是很难。
最终结果如下&＃xff1a;
可以看出我们的 ejs 模板引擎运行的没有问题&＃xff0c;数据也都正常显示在了页面中。
京公网安备 11010802041100号