专栏首页前端开发随笔Koa中配置使用ejs模板引擎

Koa中配置使用ejs模板引擎

安装插件

npm install koa-views --save
npm install ejs --save
var koa = require('koa');
var Router = require('koa-router');
var views = require('koa-views');
var app = new koa();
var router = new Router();

/**
 * 这样配置后缀名为html
 * app.use(views('./views', {map: {html: 'ejs'}}))
 * */
app.use(views('./views', {
    extension: 'ejs' //配置后缀名为ejs
}))

// 通过中间件为每个ejs引擎赋值
app.use(async (ctx, next) => {
    ctx.state.userName = "张三"
    await next()
})

router.get('/', async (ctx, next) => {
    let title = '你好ejs'
    let list = [1111, 2222, 3333]
    let content = '<h2>标题</h2>'
    await ctx.render('index', {
        title: title,
        list: list,
        content: content
    });
})

app.use(router.routes())
app.use(router.allowedMethods())

app.listen(3000);
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ejs模板引擎</title>
</head>

<body>
    <!-- 获取外部ejs -->
    <%- include ('../public/header.ejs') %>

    <!-- 绑定字段 -->
    <h1><%=title %> </h1>

    <!-- 循环数组 -->
    <ul>
        <% for( let i in list ) { %>
        <li><%=list[i]%> </li>
        <% } %>
    </ul>

    <!-- 绑定富文本 -->
    <%- content %>

    <!-- 条件判断 -->
    <% if(true){ %>
    <div>打印为真</div>
    <% }else{ %>
    <div>打印为假</div>
    <% } %>

    <!-- 接收公共的信息 -->
    <%=userName %>
</body>

</html>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • NodeJs使用ejs模板引擎实现后端渲染

    wePanda
  • 微信小程序引用we-cropper裁切图片

    文档地址 github下载源码直达链接 复制dist文件夹中的 .min.js 和 .wxml文件到项目中

    wePanda
  • Nuxt搭建服务端渲染SSR应用

    wePanda
  • MongoDB从入门到“精通”之简介和如何安装

    MongoDB简介 非关系型数据库(nosql ),属于文档型数据库。先解释一下文档的数据库,即可以存放xml、json、bson类型系那个的数据。这些数据具备...

    小柒2012
  • Linux 系统开机启动项清理

    https://www.linux.com/learn/cleaning-your-linux-startup-process

    用户6543014
  • 翻译 | 关键CSS和Webpack: 减少阻塞渲染的CSS的自动化解决方案

    原文地址: Critical CSS and Webpack: Automatically Minimize Render-Blocking CSS 原文作者:...

    iKcamp
  • SpringCloud 服务的平滑上下线

    以前都是手撸 RPC,最近接触 SpringCloud,深感痛心。主要有以下几点: 1)代码量巨大,找 BUG 时间长,超级复杂的设计 2)版本管理混乱,经常出...

    xjjdog
  • 深度解析移动应用安全的四大常见问题及解决方案 原

    当前移动安全中恶意攻击的现状可以归结为四个主要方向:网络安全、数据安全、代码安全、设备安全。

    个推君
  • jQuery.validator插件:密码正则验证的使用方法

    jQuery.validator 是比较常用的一个表单验证插件,有20多种验证方式,下面介绍一下 jQuery.validator 正则验证的使用方法。

    德顺
  • Fiddler基本介绍

    Fiddler(中文名称:小提琴)是一个HTTP的调试代理,以代理服务器的方式监听系统的HTTP网络数据流动,Fiddler也可以帮助你检查所有的HTTP通讯,...

    ITester软件测试小栈

扫码关注云+社区

领取腾讯云代金券