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. sql server 2012使用新特性offset和fetch next完成分页操作

    1 select * from HumanResources.Department order by DepartmentID offset rows fetch next rows only; of ...

  2. OpenStreetMap全球库

    https://www.loveyu.org/5344.html https://www.jianshu.com/p/957aa4a933d7 https://blog.csdn.net/mrib/a ...

  3. Delphi WaitCommEvent函数

  4. 注解【Annotation】、反射

    注解:Annotation是从JDK5.0开始引入的新技术.Annotation的作用:如果没有注解信息处理流程,则注解毫无意义)- 不是程序本身,可以对程序作出解释.(这一点,跟注释没什么区别)- ...

  5. HTML 做圆形头像

    Click me <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  6. PXC集群的概述及搭建

    目录 PXC集群的概述及搭建 PXC集群的简介 PXC集群主要由两部分组成: PXC的特性和优点: PXC的局限和劣势: PXC原理描述 在Centos部署基于Mysql高可用方案操作过程 新增节点加 ...

  7. CTAP: Complementary Temporal Action Proposal Generation论文笔记

    主要观点:基于sliding window(SW)类的方法,如TURN,可以达到很高的AR,但定位不准:基于Group的方法,如TAG,AR有明显的上界,但定位准.所以结合两者的特长,加入Comple ...

  8. Linux CentOS 7 防火墙与端口设置操作

    CentOS升级到7之后用firewall代替了iptables来设置Linux端口, 下面是具体的设置方法: []:选填 <>:必填 [<zone>]:作用域(block.d ...

  9. Tomcat控制台日志输出到本地文件

    记事本打开startup.bat文件,修改如下内容 “call “%EXECUTABLE%” start %CMD_LINE_ARGS%” 改为 call "%EXECUTABLE%&quo ...

  10. 【转载】Attention Mechanism in Deep Learning

    本篇随笔为转载,原文地址:知乎,深度学习中Attention Mechanism详细介绍:原理.分类及应用.参考链接:深度学习中的注意力机制. Attention是一种用于提升基于RNN(LSTM或G ...