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 模板引擎執行的沒有問題，資料也都正常顯示在了頁面中。
&n