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. 学习springboot

    一般而言,写个Javaweb应用搭建环境都可能要几十分钟,下载个tomcat服务器,再加上各种xml配置等等,很烦躁,而且每个web应用的配置还差不多,都是什么web.xml,application. ...

  2. Unity实现c#热更新方案探究（二）

    转载请标明出处:http://www.cnblogs.com/zblade/ 一.IOS对DLL热更新的禁止 紧接上文,继续对C#热更新的研究.上文中,已经说了如何基于appDomain来实现对DLL ...

  3. 面试小知识：MySQL索引相关

    前言 本模板主要是一些面试相关的题目,对于每一道问题,我会提供简单的解答,答案的来源主要是基于自己看了各方资料之后的理解,如果有错的,欢迎指点出来. 1. 什么是最左前缀原则? 以下回答全部是基于My ...

  4. 版本管理工具Git（二）GitLab部署和配置

    安装 # 安装依赖包 sudo yum install -y curl policycoreutils-python openssh-server # 启用并启动SSHD sudo systemctl ...

  5. Chapter 4 Invitations——16

    While I was sitting there, looking everywhere but at the car in front of me, I heard a knock on my p ...

  6. scrapy爬虫学习系列五：图片的抓取和下载

    系列文章列表: scrapy爬虫学习系列一:scrapy爬虫环境的准备:      http://www.cnblogs.com/zhaojiedi1992/p/zhaojiedi_python_00 ...

  7. ES6躬行记（19）——生成器

    根据ES6制订的标准自定义迭代器实现起来比较复杂,因此ES6又引入了生成器的概念,生成器(Generator)是一个能直接创建并返回迭代器的特殊函数,可将其赋给可迭代对象的Symbol.iterato ...

  8. jmeter 分布式压测（windows）

    单台压测机通常会遇到客户端瓶颈,受制于客户机的性能.可能由于网络带宽,CPU,内存的限制不能给到服务器足够的压力,这个时候你就需要用到分布式方案来解决客户机的瓶颈,压测的结果也会更加接近于真实情况. ...

  9. Django学习笔记（7）——单表操作和多表操作

    单表操作 1,创建模型 创建名为book的APP,在book下的models.py中创建模型: from django.db import models # Create your models he ...

  10. AppBoxFuture(三): 分而治之

      系统数据量达到一定程度后必将采用分库分表的方式来提高系统性能,但传统的分库分表方式也必将带来更高的开发复杂程度.新一代的NewSql及NoSql数据库由于天生的分布式存储基因,既保证了能够横向扩展 ...