我们使用第二讲中的路由页面,再结合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. springboot+vue的前后端分离与合并方案

    pringboot和vue结合的方案网络上的主要有以下两种: 1. [不推荐]在html中直接使用script标签引入vue和一些常用的组件,这种方式和以前传统的开发是一样的,只是可以很爽的使用vue ...

  2. 在双重for循环内部使用async异步请求axios中遇到的问题

    在methods中的方法 async getPro () { let _this = this let newArr = [] await axios.get(`api/v1/dailyProTbms ...

  3. A*算法——第K短路

    例题 JZOJ senior 1163第K短路 题目描述 Bessie 来到一个小农场,有时她想回老家看看她的一位好友.她不想太早地回到老家,因为她喜欢途中的美丽风景.她决定选择K短路径,而不是最短路 ...

  4. 廖雪峰Java11多线程编程-2线程同步-4wait和notify

    wait和notify synchronized解决了多线程竞争的问题 我们可以在synchronized块中安全的对一个变量进行修改,但是它没有解决多线程协调的问题. 例如设计一个TaskQueue ...

  5. 0907NOIP模拟测试赛后总结

    120分rank26.我又被打回原型了…… 下午考的.中午由于种种原因并没有睡好.于是状态很差. 第一眼看题感觉T1是一道XX题.部分分竟然给这么肥 然后看T2.T3好像都还不是特别恶心的题目,挺常规 ...

  6. Python-面向对象之高级进阶

    目录 classmethod与staticmethod 面向对象高级 isinstance.issubclass 反射 魔法方法(类内置方法) 单例模式 classmethod与staticmetho ...

  7. DuiLib学习笔记2.写一个简单的程序

    我们要独立出来自己创建一个项目,在我们自己的项目上加皮肤这才是初衷.我的新建项目名为:duilibTest 在duilib根目录下面有个 Duilib入门文档.doc 我们就按这个教程开始入门 首先新 ...

  8. 深入浅出Mybatis系列(八)---mapper映射文件配置之select、resultMap[转]

    上篇<深入浅出Mybatis系列(七)---mapper映射文件配置之insert.update.delete>介绍了insert.update.delete的用法,本篇将介绍select ...

  9. java中自己对页面跳转问题的一些经验

    在eclipse中,如果你要在jsp页面跳转到servlet页面中,可以用action=“/根文件名/servlet文件名” 的方式跳转. 例如我创建了一个web application名字是test ...

  10. idea配置tomcat中war和war exploded的区别

    是选择war还是war exploded 这里首先看一下他们两个的区别: war模式:将WEB工程以包的形式上传到服务器 :war exploded模式:将WEB工程以当前文件夹的位置关系上传到服务器 ...