ejs的基本使用

安装 koa-views 和 ejs

npm install --save koa-views/cnpm install --save koa-views
npm install ejs --save / cnpm install ejs --save

引入 koa-views 配置中间件

const views=require('koa-views');

app.use(views('views',{map:{html:'ejs'}})); // 模板后缀名是ejs

Koa中使用ejs

router.get('/add',async(ctx)=>{ 
　　lettitle='hello koa2' 
　　await ctx.render(index',{ 
　　　　title 
　　}) 
})

Ejs 引入外部的ejs模板

<%-includeheader.ejs%>

ejs的基本使用实例

app.js

let Koa=require('koa')

let router = require('koa-router')()

let views = require('koa-views')

var app = new Koa()

//配置模板引擎中间件  --第三方中间件

//这样配置也可以  注意如果这样配置的话 模板的后缀名是.html

//app.use(views('views', { map: {html: 'ejs' }}));

app.use(views('views',{

    extension:'ejs' // 应用ejs模板引擎

}))

//写一个中间件配置公共的信息

//注意：我们需要在每一个路由的render里面都要渲染一个公共的数据。公共的数据放在这个里面，这样的话在模板的任何地方都可以使用

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)=>{

    let list=['11111','22222','33333'];

    let content="<h2>这是一个h2</h2>";

    let num=12;

    await ctx.render('news',{

        list: list,

        content: content,

        num: num

    })

})

app.use(router.routes());   /*启动路由*/

app.use(router.allowedMethods());

app.listen(3000);

public/header.ejs

<h1 class="title">这是一个头部的模块</h1>

index.ejs

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

</head>

<body>

    <% include public/header.ejs%>

    这是一个ejs的模板引擎

    <h2><%=title%>-----<%=userinfo%></h2>

</body>

</html>

news.ejs

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

</head>

<body>

    <% include public/header.ejs%>

    <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%>

    <h2>条件判断</h2>

    <%if(num>24){%>

        大于24

    <%}else{%>

        小于24

    <%}%>

</body>

</html>

Koa 中 ejs 模板的使用的更多相关文章

  1. express中ejs模板引擎

    1.在 app.js 中通过以下两个语句设置了 引擎类型 和页面模板的位置: app.set('views', __dirname + '/views'); app.set('view engine' ...

  2. koa 基础（十一）koa 中 koa-bodyparser 中间件获取表单提交的数据

    1.app.js /** * koa 中 koa-bodyparser 中间件获取表单提交的数据 * 1.npm install --save koa-bodyparser * 2.引入 const ...

  3. koa 基础（十）原生node.js 在 koa 中获取表单提交的数据

    1.app.js // 引入模块 const Koa = require('koa'); const router = require('koa-router')(); /*引入是实例化路由 推荐*/ ...

  4. ejs模板中的四种表达式输出形式

    在ejs模板中,通常会用下面四种方式在HTML中输出服务端的变量或表达式的值: 1. 直接在<%%>中写表达式或变量.这种情况通常只是用来进行表达式计算或给变量赋值,不会有任何输出,被称作 ...

  5. 如何在 ejs 模板中使用 helper function 外部函数进行特殊处理？

    一般我们想要在 ejs 模板中使用外部函数用于特殊的处理,比如:<%= ellipsis(title, 30) %> 通常的做法是: 使用 app.locals 来定义: app.loca ...

  6. 在express站点中使用ejs模板引擎

    在express站点中使用ejs模板引擎 文/玄魂 目录 在express站点中使用ejs模板引擎 前言 1.1         安装 1.2修改app.js 1.3创建测试页面 前言 使用 vs创建 ...

  7. Koa与Node.js开发实战（3）——Nunjucks模板在Koa中的应用（视频演示）

    技术架构: ​ 在Koa中应用Nunjucks,需要先把Nunjucks集成为符合Koa规格的中间件(Middleware),从本质上来讲,集成后的中间件的作用是给上下文对象绑定一个render(vi ...

  8. HtmlWebpackPlugin用的html的ejs模板文件中如何使用条件判断

    折腾: [已解决]给react-hot-boilerplate中的index.html换成用HtmlWebpackPlugin自动生成html 期间,已经有了思路了,但是不知道如何在ejs的html中 ...

  9. Express框架中如何引用ejs模板引擎

    1.如何在项目中安装ejs模板引擎 在NodeJS指南中利用利用以下命令建立网站的基本结构: express -t ejs microblog 运行这个命令后继续运行 cd microblog &am ...

随机推荐

  1. C#版 - 小红书后台开发面试题: 二维数组中的查找

    二维数组中的查找 热度指数:24274 时间限制:1秒 空间限制:32768K 本题知识点: 查找 ​ 在线提交网址: http://www.nowcoder.com/practice/abc3fe2 ...

  2. VS背景设置

    设置如上图的IDE背景图片 点击工具-〉扩展与更新,在联机中搜索IDE Text Background,下载IDE Text Background 然后搜索文件Maxzhang可以找到,然后打开文件, ...

  3. 从零打卡leetcode之day 1--两数之和

    前言 就是要把leetcode的题刷完,每天一道题,每天进步一点点 从零打卡leetcode之day 1 题目描述: 给定一个整数数组和一个目标值,找出数组中和为目标值的两个数. 你可以假设每个输入只 ...

  4. nodejs搭建web项目

    如果要使用cnpm可安装淘宝cnpm镜像(事实证明不建议使用,因为cnpm和npm有一些包不同步)npm install -g cnpm --registry=https://registry.npm ...

  5. 【Java基础】【15Colletion集合】

    15.01_集合框架(对象数组的概述和使用) A:案例演示 需求:我有5个学生,请把这个5个学生的信息存储到数组中,并遍历数组,获取得到每一个学生信息. Student[] arr = new Stu ...

  6. SmartSql 更新日志

    SmartSql 更新历史记录 3.7.0 support cross SqlMap reference for #30 modifying Statement.Ref for delay depen ...

  7. React Fiber 数据结构揭秘

    此章节会通过两个 demo 来展示 Stack Reconciler 以及 Fiber Reconciler 的数据结构. 个人博客 首先用代码表示上图节点间的关系.比如 a1 节点下有 b1.b2. ...

  8. 日志模块logging用法

    一.常用日志记录场景及最佳解决方案: 日志记录方式 最佳记录日志方案 普通情况下,在控制台显示输出 print() 报告正常程序操作过程中发生的事件 logging.info()(或者更详细的logg ...

  9. 第19章 定义资源 - Identity Server 4 中文文档(v1.0.0)

    您通常在系统中定义的第一件事是您要保护的资源.这可能是您的用户的身份信息,如个人资料数据或电子邮件地址,或访问API. 注意 您可以使用C#对象模型定义资源 - 或从数据存储加载它们.IResourc ...

  10. 浅谈_依赖注入 asp.net core

    1.1什么是依赖 我们先看下图 可以简单理解,一个HomeController类使用到了DBContext类,而这种关系是有偶然性,临时性,弱关系的,但是DBContext的变化会影响到HomeCon ...