我们使用第二讲中的路由页面，再结合ejs,一起了解ejs在koa中的应用

1.安装koa-views和ejs

cnpm install --save koa

cnpm install koa-router --save

cnpm install --save koa-views

cnpm install ejs --save

在app.js中写入我们要渲染的值，并在模板引擎中引入

//app.js

var Koa =require('koa'),

    router=require('koa-router')(),

    views=require('koa-views');

/*引入是实例化路由*/

var app = new Koa()

// 配置模板引擎第三方中间件

// app.use(views('views', { map: {html: 'ejs' }}));   //这样配置也可以  注意如果这样配置的话 模板的后缀名是.html

app.use(views('views',{

    extension:'ejs'

}))

router.get('/',async (ctx)=>{

    let title = "你好 ejs"

    await ctx.render("index",{

        title:title

    })

})

// router.get('/',async(ctx)=>{

//     ctx.body = "首页"

// })

router.get('/news',async(ctx)=>{

    ctx.body = "新闻列表页面"

})

router.get('/newscontent',async (ctx)=>{

    ctx.body = "新闻详情"

})

app.use(router.routes());//启动路由

app.use(router.allowedMethods())

app.listen(3006)



<!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>

    这是一个ejs模板引擎

    <h2><%=title%></h2>

</body>

</html>

页面渲染效果为



我们也可以在ejs中渲染一个数组

代码如下【这些本质上是ejs的语法】

//app.js

var Koa =require('koa'),

    router=require('koa-router')(),

    views=require('koa-views');

/*引入是实例化路由*/

var app = new Koa()

// 配置模板引擎第三方中间件

// app.use(views('views', { map: {html: 'ejs' }}));   //这样配置也可以  注意如果这样配置的话 模板的后缀名是.html

app.use(views('views',{

    extension:'ejs'

}))

router.get('/',async (ctx)=>{

    // let title = "你好 ejs"

    let arr = [11,3,5,6,7]

    await ctx.render("news",{

        list:arr

    })

})

// router.get('/',async(ctx)=>{

//     ctx.body = "首页"

// })

router.get('/news',async(ctx)=>{

    ctx.body = "新闻列表页面"

})

router.get('/newscontent',async (ctx)=>{

    ctx.body = "新闻详情"

})

app.use(router.routes());//启动路由

app.use(router.allowedMethods())

app.listen(3006)


//views\news.ejs

<!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循环渲染数据</h2>

    <ul>

        <%for(var i=0;i<list.length;i++){%>

        <li><%=list[i]%></li>

        <%}%>

    </ul>

</body>

</html>

页面渲染效果为



在ejs中，我们同样可以引入公共的模块





运行的效果为



ejs中的if else函数





效果如下

如果我们需要在每一个路由中都渲染一个真实的数据，我们应该怎么做呢？

//app.js

var Koa =require('koa'),

    router=require('koa-router')(),

    views=require('koa-views');

    // 公共数据放在ctx.state中

/*引入是实例化路由*/

var app = new Koa()

// 配置模板引擎第三方中间件

// app.use(views('views', { map: {html: 'ejs' }}));   //这样配置也可以  注意如果这样配置的话 模板的后缀名是.html

app.use(views('views',{

    extension:'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('/',async(ctx)=>{

//     ctx.body = "首页"

// })

router.get('/news',async(ctx)=>{

    ctx.body = "新闻列表页面"

    let arr = [11,3,5,6,7]

    let content = "<h2>这是一个h2</h2>"

    let num = 12

    await ctx.render("news",{

        list:arr,

        content:content,

        num:num

    })

})

router.get('/newscontent',async (ctx)=>{

    ctx.body = "新闻详情"

})

app.use(router.routes());//启动路由

app.use(router.allowedMethods())

app.listen(3006)


//news.js

<!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.ejs%>

    <h2>ejs循环渲染数据<%=userinfo%></h2>

    <ul>

        <%for(var i=0;i<list.length;i++){%>

        <li><%=list[i]%></li>

        <%}%>

    </ul>

    <h2>绑定html数据</h2>

    <%=content%>

    <br>

    <%-content%>

    <h2>条件判断</h2>

    <br>

    <%if(num>24){%>

    大于24

    <%}else{%>

        小于24

    <%}%>

</body>

</html>


//index.js

<!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.ejs%>

    这是一个ejs模板引擎

    <h2><%=title%><%=userinfo%></h2>

</body>

</html>

页面效果为

跟我一起了解koa（四）的更多相关文章

  1. koa 项目实战（四）注册接口和调试工具（postman）

    1.安装模块 npm install koa-bodyparser --save npm install bcryptjs --save 2.引入模块 根目录/app.js const bodyPar ...

  2. koa 基础（十四）cookie 的基本使用

    1.app.js /** * cookie的简介: * 1.cookie保存在浏览器客户端 * 2.可以让我们用同一个浏览器访问同一个域名的时候共享数据 * * cookie的作用: * 1.保存用户 ...

  3. koa 基础（四）get 传值 以及获取 get 传值

    1.get 传值 以及获取 get 传值 app.js /** * get 传值 以及获取 get 传值 */ // 引入模块 const Koa = require('koa'); const ro ...

  4. KOA 学习（四）

    响应(Response) Koa Response 对象是对 node 的 response 进一步抽象和封装,提供了日常 HTTP 服务器开发中一些有用的功能. response.header Re ...

  5. koa 基础（二十四）封装 DB 库 --- 新增数据、更新数据、删除数据

    1.根目录/module/db.js /** * DB库 */ var MongoClient = require('mongodb').MongoClient; var Config = requi ...

  6. 跟我一起学koa之在koa中使用mongoose（四）

    第一步安装mongoose,创建数据库文件夹 第二步引入mongoose,连接数据库 第三步运行项目 这个报错 只需要将es6写法变成es5写法即可 我们连接数据库,并且以post请求的方式插入数据 ...

  7. Node.js实现RESTful api,express or koa?

    文章导读: 一.what's RESTful API 二.Express RESTful API 三.KOA RESTful API 四.express还是koa? 五.参考资料 一.what's R ...

  8. Node.js 蚕食计划（五）—— Koa 基础项目搭建

    Koa 是由 Express 原班人马打造的超轻量服务端框架 与 Express 相比,除了自由度更高,可以自行引入中间件之外,更重要的是使用了 ES6 + async,从而避免了回调地狱 不过也是因 ...

  9. sau交流学习社区--songEagle开发系列：Vue.js + Koa.js项目中使用JWT认证

    一.前言 JWT(JSON Web Token),是为了在网络环境间传递声明而执行的一种基于JSON的开放标准(RFC 7519). JWT不是一个新鲜的东西,网上相关的介绍已经非常多了.不是很了解的 ...

随机推荐

  1. SQL Serve 临时表

    SQL Server 支持临时表.临时表就是那些名称以井号 (#) 开头的表.如果当用户断开连接时没有除去临时表,SQL Server 将自动除去临时表.临时表不存储在当前数据库内,而是存储在系统数据 ...

  2. scrpy--分布式爬虫

    原来的scrapy中的Scheduler维护的是当前机器中的任务队列(存放着Request对象以及回调函数等信息) + 当前的去重队列(存放访问过的url地址) 实现分布式的关键就是需要找一台专门的主 ...

  3. Python调用DLL动态链接库——ctypes使用

    最近要使用python调用C++编译生成的DLL动态链接库,因此学习了一下ctypes库的基本使用. ctypes是一个用于Python的外部函数库,它提供C兼容的数据类型,并允许在DLL或共享库中调 ...

  4. LuoguP3338 [ZJOI2014]力

    题目描述 给出n个数qi,给出Fj的定义如下: \[F_j = \sum_{i<j}\frac{q_i q_j}{(i-j)^2 }-\sum_{i>j}\frac{q_i q_j}{(i ...

  5. Python全栈开发：初识Python

    Pythton简介 python的创始人为吉多·范罗苏姆(Guido van Rossum).1989年的圣诞节期间,吉多·范罗苏姆为了在阿姆斯特丹打发时间,决心开发一个新的脚本解释程序,作为ABC语 ...

  6. bzoj4144 Petrol

    题意:给你一张n个点m条边的带权无向图.其中由s个点是加油站.询问从x加油站到y加油站,油箱容量<=b,能否走到? n,m,q,s<=20W,b<=2e9. 标程: #include ...

  7. CentOS7配置Docker镜像加速器

    1. 将默认的配置文件复制出来 cp -n /lib/systemd/system/docker.service /etc/systemd/system/docker.service 2. 将加速器地 ...

  8. LUOGU P1453 城市环路(基环树+dp)

    传送门 解题思路 一道基环树上$dp$的题,这种题比较套路吧,首先第一遍$dfs$把环找出来,然后对于环上的每一个点都向它子树内做一次树形$dp$,$f[i][0/1]$表示到了$i$这个点选或不选的 ...

  9. LUOGU P3382 【模板】三分法 (三分)

    传送门 解题思路 三分,填坑.每次取l与r的中间值mid,然后向左移一点点,向右移一点点进行判断,判断时用秦九韶算法即可. #include<iostream> #include<c ...

  10. OpenCASCADE点向圆柱面投影

    OpenCASCADE点向圆柱面投影 eryar@163.com OpenCASCADE的类Extrema_ExtPElS提供了点到基本曲面的投影计算功能,距离可能是最大值或是最小值.如下图所示的点到 ...