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. Mac电脑C语言开发的入门帖

    本文是写给Mac电脑开发新手的入门帖,诸神请退散. C语言 C语言可说是电脑环境中的"镇国神器",从发明至今,虽然C语言的使用者缓慢的减少,但从当前市场应用情况看,尚无一台电脑能够 ...

  2. Go基础系列：map类型

    Go里的map用于存放key/value对,在其它地方常称为hash.dictionary.关联数组,这几种称呼都是对同一种数据结构的不同称呼,它们都用于将key经过hash函数处理,然后映射到val ...

  3. log4j2 使用纪要

    简介 Apache Log4j 2 是Log4j 的升级版,在该版本实现中,日志的处理流程及效率有了显著提升. 此外新版本也合入了一些logback日志框架体系的一些改进点. 关键特性 API分离,接 ...

  4. linux磁盘管理系列一：磁盘配额管理

    磁盘管理系列 linux磁盘管理系列一:磁盘配额管理   http://www.cnblogs.com/zhaojiedi1992/p/zhaojiedi_linux_040_quota.html l ...

  5. 痞子衡嵌入式：第一本Git命令教程（7.1）- 清理之缓存(stash)

    今天是Git系列课程第七课,上一课我们学会了查看Git本地历史提交,今天痞子衡要讲的是Git仓库的清理操作,一共4个命令,都是日常开发中非常实用的命令,掌握这4个命令,会让你有一种玩弄Git仓库于股掌 ...

  6. DSAPI多功能组件编程应用-文件类

    [DSAPI.DLL下载地址]     本节内容,是属于"无需过多说明"就能使用的功能.由于实在是太简单,我就简单地示例一下. DSAPI.文件类.获取可读性强的字节大小信息(&q ...

  7. IT公司PM沟通那儿些事(一)

    本质:传递信息 沟通是不同的行为主体,通过各种载体实现信息的双向流动,形成行为主体的感知,以达到特定目标的行为过程. 信息的准确性弥足珍贵,在工作中,沟通传递的是应该是信息本身,而非情绪. 目标:解决 ...

  8. 设计模式之一工厂方法模式（Factory Method）

    工厂方法模式分为三种: 一.普通工厂模式,就是建立一个工厂类,对实现了同一接口的一些类进行实例的创建.首先看下关系图: 举例如下:(我们举一个发送邮件和短信的例子) 首先,创建二者的共同接口: pub ...

  9. js 高级程序设计（笔记）

    第二章 1.为了避免浏览器在呈现页面时出现明显的延迟,现代Web 应用程序一般都把全部JavaScript 引用放在<body>元素中页面内容的后面. 第三章 1.ECMAScript 中 ...

  10. 通过Web API调用Action时各种类型输入参数传递值的方法

    本人微信公众号:微软动态CRM专家罗勇 ,回复280或者20180906可方便获取本文,同时可以在第一间得到我发布的最新博文信息,follow me!我的网站是 www.luoyong.me . Dy ...