1.app.js

/**

 * ejs 模板引擎的使用：

 * 1.npm install koa-views --save

 * 2.npm install ejs --save

 * 3.var views = require('koa-views');

 * app.use(views(__dirname, { extension: 'ejs' }))

 * 4.await ctx.render('index')

 *

 * 注意：我们需要在每一个路由的render里面都要渲染一个公共的数据

 * 公共的数据放在这个里面,这样的话在模板的任何地方都可以使用

 *

 * ctx.state = { // 放在中间件

 *   session: this.session,

 *   title: 'app'

 * }

 */

// 引入模块

const Koa = require('koa');

const router = require('koa-router')(); /*引入是实例化路由 推荐*/

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

// 实例化

let app = new Koa();

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

// app.use(views('views', {

//   extension: 'ejs' /*应用ejs模板引擎 模板的后缀名是 .ejs*/

// }))

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

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

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

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

  // ctx.body = '这是一个新闻';

  let list = ['111', '222', '333'];

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

  let num = 123;

  await ctx.render('news', {

    list: list,

    content: content,

    num: num

  })

})

app.use(router.routes());

app.use(router.allowedMethods());

/**

 * router.allowedMethods() 作用：这是官方文档的推荐用法,我们可以

 * 看到 router.allowedMethods() 用在了路由匹配 router.routes()之后,

 * 所以在当所有路由中间件最后调用,此时根据 ctx.status 设置 response 响应头

 */

app.listen(3000);

2.views

index.html

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <title>Document</title>

</head>

<body>

  <% include public/header.html%>

    这是一个ejs的模板引擎

    <h2>

      <%=title%>------

        <%=userInfo%>

    </h2>

</body>

</html>

news.html

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <title>Document</title>

</head>

<body>

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

      <br />

      <h2>条件判断</h2>

      <%if(num > 24){%>

        大于24

        <%} else {%>

          小于24

          <%}%>

</body>

</html>

header.html

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

.

koa 基础（九） ejs 模板引擎的使用的更多相关文章

  1. node+ejs模板引擎的应用

    前言: 最近在开发一个关于后台管理系统的基础开发平台,解释一下就是不管什么管理系统都有一些相同的功能,但是又有一些细节不一样,这个基础平台就是实现对于基础功能可以进行快速开发,主要有自定义的生成功能代 ...

  2. express搭建web服务器、路由、get、post请求、multer上传文件、EJS模板引擎的使用

    express官网 postman工具下载地址  multer的npm文档地址 express模板引擎怎么使用  地址:http://www.expressjs.com.cn/guide/using- ...

  3. koa2--04.ejs模板引擎

    首先在项目文件下使用cmd,输入:npm install --save koa-views ejs,将koa-views中间件和ejs模板引擎安装到文件中,并自动写入依赖 接在在index.js文件中 ...

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

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

  5. nodejs-5.1 ejs模板引擎

    ejs官方文档:https://ejs.bootcss.com/ 1.什么是 EJS? "E" 代表 "effective",即[高效]. EJS 是一套简单的 ...

  6. 前端笔记之NodeJS（三）Express&ejs模板引擎&请求识别

    一.Express框架 1.1基本使用 创建http服务器特别麻烦,express框架解决了这个的问题. Express在node界的地位,就相当于jQuery在DOM界的地位.jQuery的核心就是 ...

  7. 使用ejs模板引擎

    let express = require('express'); let fs = require('fs'); let ejs = require('ejs'); let app = expres ...

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

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

  9. Swiper+ ejs模板引擎+ iScroll插件知识总结

    一. Swiper swiper是一个应用于移动端的动画插件,原理类似于轮播图 官网 http://www.swiper.com.cn/# html结构 <div class="swi ...

随机推荐

  1. [yii\queue\Queue] [10] unknown job (attempt: 1, PID: 31167) is finished with error: yii\base\ErrorException: unserialize(): Error at offset 1922 of 65535 bytes

    网上的解决方案: 1. 报错场景:序列化字段中有中文,反序列化时有可能会出现报错. 错误原因:写入和取出数据库的时候,编码不同,中文符号长度不同,序列化中的长度就无法匹配. 解决办法:适合 php 5 ...

  2. odoo xml中添加数据的数字代表含义

    参考原文:https://alanhou.org/odoo12-import-export-data/ <?xml version="1.0"?> <odoo n ...

  3. VM虚拟机下centos安装。

    centOS 7安装步骤: 1.选择新建虚拟机,稍后安装,linux选centos7 64位 2.位置改到存放虚拟机的文件夹 3.把硬盘空间改到40g,内存分到4g,1处理器2个核心 4 更改cd/d ...

  4. ribbon负载均衡循环策略源码

    (原) 在用ribbon负载均衡取eureka注册中心中的地址时,默认采用循环策略,例如商品服务有3个,分别为URL1,URL2,URL3,那么在客户端第一次取时,会取到URL1,第二次取时取到URL ...

  5. windows安装PostgreSQL

    犹豫了一小下,初学不在linux下安装sql,虽然说书上有,还是想记录一下,以后好找 入门的书籍是SQL基础教程第二版,图书馆搜刮来的,毕竟要还 下载页面 http://www.enterprised ...

  6. Java 使用jsp和servlet实现验证码功能

    验证码主要是为了防止我们的网站被有些人和黑客恶意攻击,比如我们网站的注册页面,如果我们在用户注册的时候不加上一个验证码框的话,别人就可以写一个脚本对你的网站进行恶意的注册,比如每分钟对你的网站进行n次 ...

  7. PLS做soft particle

    这个pixel local storage frame fetch 可以一个pass做出soft particle/deferred lighting/soft edge water programb ...

  8. POI导出Excel不弹出保存提示_通过ajax异步请求(post)到后台通过POI导出Excel

    实现导出excel的思路是:前端通过ajax的post请求,到后台处理数据,然后把流文件响应到客户端,供客户端下载 文件下载方法如下: public static boolean downloadLo ...

  9. MySQL(MariaDB)默认密码和修改方法

    由于笔者只测试过Ubuntu 16.04.4.Ubuntu 19.04和Debian 9,此方法不确定在其他版本下适用. 本文章介绍的方法同样适用于这样的错误信息. ➜ ~ mysql -u root ...

  10. WCF概述

    Tips:概念性的东西仅助理解,可以略过 概述 1.SOA概述 1).从三个问题开始 SOA是什么——面向服务架构.一种编程模式.一种架构模式.它将应用程序分成不同功能(服务)单元,再通过服务之间的接 ...