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. Delphi DeviceIoControl函数

  2. telnet命令测试端口连接是否正常， telnet不是内部或外部命令的方案

    telnet ip地址 端口 1.点击开始 → 运行 → 输入CMD,回车.2.在DOS界面里,输入telnet测试端口命令:   telnet IP 端口  或  telnet 域名 端口,回车. ...

  3. unix/linux静态库简介

    一.创建静态库: 1.写源程序 2.编译源程序,生成.o文件 3.使用ar打包工具生成静态库 ar -r libxxx.a xxx1.o xxx2.o.../*.o(通配符方式) 4.提供头文件,方便 ...

  4. 1.Netty 实战前言

    1.参考文档:Netty实战精髓篇 2.Netty介绍:     Netty是基于Java NIO的网络应用框架. Netty是一个NIO client-server(客户端服务器)框架,使用Nett ...

  5. Jquery实现类似百度的搜索框

    最近工作中需要做一个搜索框,类似百度的搜索框,需要达到两个功能: 1.输入关键字,展示匹配的下拉列表 2.选择匹配的项后查出相关内容 一般电商网站中也经常用到该搜索条,首先分析功能实现,输入关键字马上 ...

  6. 数据库——Oracle(1)

    1 Oracle数据库:ORACLE数据库系统是美国ORACLE(甲骨文)研发并提供的款关系型数据库管理系统,占据市场的主要的份额. 目前常用版本:Oracle9i,Oracle10g,Oracle1 ...

  7. JS 获取和返填单选按钮Value值

    1.获取Radio值 $('input[name="sex"]:checked ').val(); 2.返填Radio值 $('input[name="sex" ...

  8. target runtime com.genuitec.runtime.genuitec.jee60 is not defined

    选中项目,右键 -> Properties -> Project Facets -> 在Runtimes 里 选择用Tomcat运行,然后 Apply -> OK. 问题解决.

  9. SQLite3的安装与使用

    下载地址:https://www.sqlite.org/download.html (下载相对应自已电脑的配置的数据库)(这里 我的电脑是 windows 64位操作系统) 下载完后 解压出来 sql ...

  10. Practical, Dynamic Visibility for Games(可实现动态显示技术)

    Practical, Dynamic Visibility for Games(可实现动态显示技术) 原文地址 1引言 游戏场景越来越复杂,包含的内容越来越多,动态显示技术很需要. 本文介绍2种互补的 ...