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. 使用脚本启动fabric时出错

    Error: got unexpected status: BAD_REQUEST -- error authorizing update: error validating ReadSet: rea ...

  2. Windows去除开始菜单图标背景

    1.开始菜单图标右键找到目标程序的存储目录. 2.删除目录下的目标程序名+.VisualElementsManifest.xml的文件. 3.开始菜单图标右键找到图标的存储目录,取消开始屏幕固定并删除 ...

  3. Hacklab WebIDE在线调试ESP32笔记

    目录 1.什么是Hacklab WebIDE 1.1 优势 1.2 趋势 2. 使用方法 2.1 功能介绍 2.2 编译第一个程序 2.3 搭建esp32的开发环境 2.4 建立开发板与云平台的连接 ...

  4. 《python解释器源码剖析》第2章--python中的int对象

    2.0 序 在所有的python内建对象中,整数对象是最简单的对象.从对python对象机制的剖析来看,整数对象是一个非常好的切入点.那么下面就开始剖析整数对象的实现机制 2.1 初识PyLongOb ...

  5. UNetbootin安装linux

    用u盘安装linux系统,最好的方法莫过于用UNetbootin,网址:http://unetbootin.github.io/ UNetbootin allows you to create boo ...

  6. 解决myeclipse没有代码提示的问题

    今天和室友安装了一样的myeclipse版本,结果室友的自动提示功能有,我的输入“.”后却不能提示,这对我们敲代码简直来说是一个折磨,不能自动提示,本来还以为是系统问题,一个是win7,一个是win1 ...

  7. vim复制到剪切板

    作者:whinc链接:https://www.zhihu.com/question/19863631/answer/89354508来源:知乎 转载文章 Vim 中的复制.删除的内容都会被存放到默认( ...

  8. PAT Basic 1056 组合数的和 (15 分)

    给定 N 个非 0 的个位数字,用其中任意 2 个数字都可以组合成 1 个 2 位的数字.要求所有可能组合出来的 2 位数字的和.例如给定 2.5.8,则可以组合出:25.28.52.58.82.85 ...

  9. SpringBoot使用JPA来做数据查询

    Spring-Data-JPA在做数据存储方面真的很方便,它的目的就是写更少的代码,更多的事情,但是也有其力有未逮或者说处理起来比较闹心的地方. 1.先来感受一下使用JPA做数据查询时,代码的简化程度 ...

  10. Maven编译

    多模块 只有需要编译成jar的模块才设置build <build> <plugins> <plugin> <groupId>org.springfram ...