koa【06】 Koa2.x ejs模板引擎使用 以及ejs配置全局数据

目录概览：

 

views/public/header.ejs 

<h1>这是public里面的头部</h1>

 

views/news.ejs

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>news页面</title>
</head>

<body>
    <%- include('public/header'); -%>
    <h2>ejs 循环渲染数据 </h2>
    <ul>
        <% for( let i = 0; i < list.length; i++ ) { %>
        <li><%= list[i] %> </li>
        <% } %>
    </ul>
    <hr>
    <%= content %>
    <%- content %>

    <hr>
    <div style="color:red">
        <% if (num>5) { %>
        number 是 <%= num %> ,大于 5 ；
        <% } else if(num<5){ %>
        number 是 <%= num %> ,小于 5;
        <% } else{%>
        number <%= num %> ,等于 5 ;
        <% } %>
    </div>
    <hr>
    <pre>

        // 公共的数据放在里面，这样的话在模板的任何地方都可以使用

        app.use(async (ctx,next) => {
            ctx.state = {
                userInfo: {
                    name: "张三",
                    age: 20,
                },
                shcool: "魔法学院",
            };
            await next();
        });
        </pre>
    <h4>shcool : <%= shcool %></h4>
    <h4>userInfo.name : <%= userInfo.name%></h4>
    <hr>
</body>

</html>

 

 

app.js

//  引入 koa 模块
/*
ejs 模板引擎的使用：
    1、 npm i koa-views --save
    2、 npm i ejs --save
    3、 app.use(views(_dirname,{extension:".ejs"})
    4、 await ctx.render("index")

注意：新需求要在每一个路由里面都渲染一个公共的数据；

        公共的数据放在里面，这样的话在模板的任何地方都可以使用
            ctx.state = { //放在中间件里边
            session: this.session,
            title: "app",
            };

 */

 
var Koa = require("koa"),
  views = require("koa-views"),
  router = require("koa-router")();

var app = new Koa();
//配置ejs模板引擎中间件 --第三方中间件
// app.use(views("路径", { extension: "后缀名不带点" }));
app.use(views("views", { extension: "ejs" }));

//这样配置  ejs 模板引擎中间件也可以，但是模板的后缀名必须是 .html
// app.use(
//   views("views", {
//     map: { html: "ejs" },
//   })
// );

// 写一个中间件来配置公共的信息
app.use(async (ctx, next) => {
    ctx.state = {
      userInfo: {
        name: "张三",
        age: 20,
      },
      shcool: "魔法学院",
    };
  await next();
});
// app.use(async (ctx, next) => {
//   ctx.state = {
//     userinfo: "张三",
//   };
//   await next();
// });

router.get("/", async (ctx) => {
  //   await ctx.render("views模板路径下的文件名，不带点和后缀");
  let title = "hi 你好啊";
  await ctx.render("index", {
    title: title,
  });
});
router.get("/news", async (ctx) => {
  let list = ["标题1", "标题2", "标题3", "标题4"];
  let content = "<h2>这是一个h2</h2>【<%= content %>是输出带标签的，<%- content %> 是把标签解析成HTML的】";
  let num = Math.random() * 10;
  num = num.toFixed(2);
  await ctx.render("news", {
    list: list,
    content,
    num,
  });
});

// app.use(render);
// app.use(async function (ctx) {
//   ctx.state = {
//     session: this.session,
//     title: "app",
//   };
//   await ctx.render("user", {
//     user: "John",
//   });
// });
//
app.use(router.routes()).use(router.allowedMethods());
app.listen(3003);
console.log("http://localhost:3003");

 

posted @ 2021-01-26 11:20  半遮  阅读(208)  评论(0)    收藏  举报