koa 基礎（九） ejs 模板引擎的使用

時間 2019-11-08

標籤 koa 基礎 ejs 模板引擎使用简体版

原文原文鏈接

1.app.jsjavascript

/**
 * ejs 模板引擎的使用：
 * 1.npm install koa-views --save
 * 2.npm install ejs --save
 * 3.var views = require('koa-views');
 * app.use(views(__dirname, { extension: 'ejs' }))
 * 4.await ctx.render('index')
 * 
 * 注意：咱們須要在每個路由的render裏面都要渲染一個公共的數據
 * 公共的數據放在這個裏面,這樣的話在模板的任何地方均可以使用
 * 
 * ctx.state = { // 放在中間件
 *   session: this.session,
 *   title: 'app'
 * }
 */
// 引入模塊
const Koa = require('koa');
const router = require('koa-router')(); /*引入是實例化路由 推薦*/
const views = require('koa-views');

// 實例化
let app = new Koa();

// 配置模板引擎中間件 -- 第三方中間件
// app.use(views('views', {
//   extension: 'ejs' /*應用ejs模板引擎 模板的後綴名是 .ejs*/
// }))
// 這樣配置也能夠 注意若是這樣配置的話 模板的後綴名是 .html
app.use(views('views', { map: { html: 'ejs' } }));

// 寫一箇中間件配置公共的信息
app.use(async (ctx, next) => {
  ctx.state.userInfo = '張三';

  await next(); /*繼續向下匹配路由*/
})

router.get('/', async (ctx) => {
  let title = '你好 ejs';
  await ctx.render('index', {
    title: title
  })
})

router.get('/news', async (ctx) => {
  // ctx.body = '這是一個新聞';
  let list = ['111', '222', '333'];

  let content = "<h2>這是一個h2</h2>";

  let num = 123;

  await ctx.render('news', {
    list: list,
    content: content,
    num: num
  })
})

app.use(router.routes());
app.use(router.allowedMethods());
/**
 * router.allowedMethods() 做用：這是官方文檔的推薦用法,咱們能夠
 * 看到 router.allowedMethods() 用在了路由匹配 router.routes()以後,
 * 因此在當全部路由中間件最後調用,此時根據 ctx.status 設置 response 響應頭
 */

app.listen(3000);

2.viewshtml

index.htmljava

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>

<body>
  <% include public/header.html%>
    這是一個ejs的模板引擎
    <h2>
      <%=title%>------
        <%=userInfo%>
    </h2>
</body>

</html>

news.htmlnpm

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>

<body>
  <h2>ejs循環渲染數據 ------
    <%=userInfo%>
  </h2>
  <ul>
    <%for(var i=0;i<list.length; i++){%>
      <li>
        <%=list[i]%>
      </li>
      <%}%>
  </ul>

  <h2>綁定html數據</h2>
  <br />
  <%=content%>
    <br />
    <%-content%>
      <br />
      <h2>條件判斷</h2>
      <%if(num > 24){%>
        大於24
        <%} else {%>
          小於24
          <%}%>
</body>

</html>

header.htmlsession

<h2 class="title">這是一個頭部的模塊</h2>

.app

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。