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. easyui-datagrid 编辑模式详解——combobox

    用于列表显示号了,需要改动某一列的值,而且根据每一行的数据去加载data数据,放在这个列中供别人选择 //-------------------- 代码可变区//---------- 数据定义区var ...

  2. 【Java】 BIO与NIO以及AIO分析

    一.BIO与NIO以及AIO的概念 BIO是同步阻塞式的IO NIO是同步非阻塞的IO (NIO1.0,JDK1.4) AIO是非同步非阻塞的IO(NIO2.0,JDK1.7) 二.BIO简单分析 1 ...

  3. Java注解【五、注解实战】

    需求: 1.表:用户ID,用户名,年龄,邮箱. 2.实现方法,传入实体,打印sql. 实现: 1.表: package Annotation; @Table("user") pub ...

  4. 如何在cmd命令行中运行Java程序

    cmd运行java 有萌新问我怎么用cmd运行Java,他运行报错了,怎么办?如图是他的执行过程: 他说就这一个类,里面包含了main方法怎么会没有加载主类呢. 其实很简单,因为你执行的时候并不能直接 ...

  5. 分享一个百万数量级的测试学习用的mysql数据集

    TEST_DB 带有集成测试套件的示例数据库,用于测试应用程序和数据库服务器 此存储库已从Launchpad迁移. 请参阅MySQL文档中的用法 它来自哪里 原始数据由西门子企业研究中心的Fushen ...

  6. zencart设置默认货币三种方法

    zencart设置默认货币为USD 方法一:mysql UPDATE configuration SET configuration_value = 'USD' WHERE configuration ...

  7. veeValidate实战

    说在前面 vee-validate 版本2.0.4的学习github地址我的项目地址第一次认真的在git上写一个demo教程,喜欢的可以star一下~^o^~ (^-^) (^o^) 后续会有一个完整 ...

  8. c++关于字符串的读入和截取

    #include<iostream>#include<string>#include<vector>using namespace std;vector<st ...

  9. Linux的SSH免密登录（一）

    1.从cp/scp命令出发 scp(secure copy)是linux系统下基于ssh登录进行安全的远程文件拷贝的命令. 1. 传递文件到远程 scp local_file remote_usern ...

  10. mysql router使用配置

    mysql router使用配置 参考资料: https://www.jianshu.com/p/7fc8d77bea59 一.架构图 介绍: MySQL Router是处于应用client和dbse ...