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. Android：剖析源码，随心所欲控制Toast显示

    前言 Toast相信大家都不会陌生吧,如果对于Toast不甚了解,可以参考我的上一篇博客<Android:谈一谈安卓应用中的Toast情节>,里面有关于Toast基础比较详细的介绍.但是如 ...

  2. .net core 使用ConcurrentTest组件对方法进行压力测试

    工欲善其事,必先利其器!在编写服务中首先要有一个好的测试工具,在dontecore下性能测试有BenchmarkDotNet,只需要简单的配置一下就可以对方法的性能进行详细的测试.但有时候需要对不同并 ...

  3. leetcode — pascals-triangle

    import java.util.ArrayList; import java.util.Arrays; import java.util.List; /** * Source : https://o ...

  4. Docker 网络之进阶篇

    笔者在<Docker 基础 : 网络配置>一文中简单介绍了容器网络的基本用法,当时网络的基本使用方式还处于 --link 阶段.时过境迁,随着 docker 的快速发展,其网络架构也在不断 ...

  5. Django 系列博客（九）

    Django 系列博客(九) 前言 本篇博客介绍 Django 模板的导入与继承以及导入导入静态文件的几种方式. 模板导入 模板导入 语法:``{% include '模板名称' %} 如下: < ...

  6. 关于setState的一些记录

    在看React的官方文档的时候, 发现了这么一句话,State Updates May Be Asynchronous,于是查询了一波相关的资料, 最后归纳成以下3个问题 setState为什么要异步 ...

  7. C# 如何隐藏或显示工作表中的网格线

    我们知道Excel中有许多虚线形式的网格线,它们用于区分Excel工作表中的单元格.有了网格线,读者可以轻松地查看和核对工作表中的数据.Excel工作表中,网格线是默认存在的,但我们可以根据自身的需求 ...

  8. nginx系列1：认识nginx

    nginx介绍 nginx是什么呢?可以看下官方网站的定义: nginx [engine x] is an HTTP and reverse proxy server, a mail proxy se ...

  9. 如何清理Docker占用的磁盘空间?

    摘要:用了 Docker,好处挺多的,但是有一个不大不小的问题,它会一不小心占用太多磁盘,这就意味着我们必须及时清理. 作为一个有信仰的技术公司,我们Fundebug的后台采用了酷炫的全 Docker ...

  10. Dynamics Customer Engagement V9版本配置面向Internet的部署时候下一步按钮不可点击的解决办法

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