koa2 從入門到進階之路（四）

時間 2019-11-13

標籤 koa2 koa 入門進階之路简体版

原文原文鏈接

以前的文章咱們介紹了一下 koa 中間件以及 koa 中間件的洋蔥圖執行流程，本篇文章咱們來看一下 koa 中使用 ejs 模板及頁面渲染。css

在 Express 中，咱們常常會用 ejs 模板來渲染前端頁面，在 koa 中一樣可使用 ejs 模板引擎，關於 ejs 模板引擎的用法這裏就不作過多說明了，https://ejs.bootcss.com/，這是官網，爲咱們作了詳細的教程。html

在 koa 中使用 ejs 咱們須要安裝 koa-views 和 ejs 兩個模塊：前端

安裝 koa-views npm installkoa-views --save / cnpm install koa-views --savenpm

安裝 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 結尾。app

"views" 是咱們要指定的目錄，咱們寫成 "views"，就須要在項目目錄中建立一個 views 目錄來存放咱們的 ejs 文件。 koa

以後咱們寫了一個應用級中間件來存放一個共有的數據，這個中間件能夠去上一篇文章看一下具體做用，這裏不過多解釋。async

而後咱們在 router.get("/", ) 路由中存放了兩條數據，一條字符串，一條數組。ide

咱們再也不使用 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>