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. SB！SB！SB！

    Topic Link http://ctf5.shiyanbar.com/stega/ste.png SB!SB!SB! 其实很简单,可别真的变成 SB! 1)根据链接提示,直接用stegsolve ...

  2. centos7忘记root密码

    开机时狂点方向键下(Windows还原习惯了),或者狂点别的键.目的为了不让它进入系统. 方向键移动光标定位在第一行,按e编辑它. 在新界面找到linux16开头的行.→光标到  ro    改成rw ...

  3. 菜鸟系列docker——docker基本概念(1)

    docker基本概念 1.准备 这里先介绍容器技术,后续再介绍docker.docker是容器的一种,除docker以外,还存在coreos.不过在当前趋势下容器和docker基本上可以划为等号了. ...

  4. 图像处理基础(2)：自适应中值滤波器(基于OpenCV实现)

    本文主要介绍了自适应的中值滤波器,并基于OpenCV实现了该滤波器,并且将自适应的中值滤波器和常规的中值滤波器对不同概率的椒盐噪声的过滤效果进行了对比.最后,对中值滤波器的优缺点了进行了总结. 空间滤 ...

  5. JDBC设计理念浅析 JDBC简介（一）

    概念 JDBC是J2EE的标准规范之一,J2EE就是为了规范JAVA解决企业级应用开发制定的一系列规范,JDBC也不例外. JDBC是用于Java编程语言和数据库之间的数据库无关连接的标准Java A ...

  6. AppBoxFuture(六): 前端组件化开发

      前面几篇都是在介绍结构化与非结构化的数据存储,本篇换换口味介绍一下框架是如何实现前端组件化开发的.首先得感谢Vue.ElementUI等优秀的前端开源项目,这些项目帮助作者快速实现了框架的两个前端 ...

  7. Spring基础系列--AOP织入逻辑跟踪

    原创作品,可以转载,但是请标注出处地址:https://www.cnblogs.com/V1haoge/p/9619910.html 其实在之前的源码解读里面,关于织入的部分并没有说清楚,那些前置.后 ...

  8. Linux常用命令详解（week1_day1_1）--技术流ken

    本节内容 基础命令:lsmanpwdcdmkdirechotouchcpmvrmrmdircatmorelessheadtailclearpoweroffreboot进阶命令(下一章节):aliasu ...

  9. tf.nn.conv2d。卷积函数

    tf.nn.conv2d是TensorFlow里面实现卷积的函数,参考文档对它的介绍并不是很详细,实际上这是搭建卷积神经网络比较核心的一个方法,非常重要 tf.nn.conv2d(input, fil ...

  10. 解决Azure 消息队列ServiceBus提示证书不信任无权限的问题

    笔者在C# 消息队列-Microsoft Azure service bus 服务总线中使用Azure消息队列,最近偶尔会遇到请求数据不入队列的问题,查找日志,问题如下: 异常:X. certific ...