koa中使用 ejs

安装 koa-views 和 ejs

　　npm install --save koa-views

　　npm install ejs --save

　　https://www.npmjs.com/package/koa-views

引入 koa-views ，配置 ejs 模板引擎

配置方式1：

const Koa = require('koa')
const app = new Koa()
const router = require('koa-router')()
const views = require('koa-views')
const ejs = require('ejs')

//配置模板引擎中间件 koa-views(第三方中间件)
//方式1
app.use(views( 'views', {
    map: {
        html: 'ejs' //应用ejs 模板引擎
    }
}))

router.get('/',async (ctx)=>{
    console.log("首页")
    let title = "首页"
    await ctx.render('index',{
        title:title
    })
})

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

app.listen(3000);

官方示例：

方式1渲染的页面是 index.html 页面

配置方式2：

const Koa = require('koa')
const app = new Koa()
const router = require('koa-router')()
const views = require('koa-views')
const ejs = require('ejs')

//配置模板引擎中间件 koa-views(第三方中间件)
//方式2
app.use(views('views', { 
    extension: 'ejs' //应用 ejs 模板引擎 
}))

router.get('/',async (ctx)=>{
    console.log("首页")
    let title = "首页"
    await ctx.render('index',{
        title:title
    })
})

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

app.listen(3000);

方式2 渲染的是 index.ejs 页面

在 koa 中使用 ejs：

① 引入其他模板

　　如渲染首页时，首页加载 header 页面头部，只需要在 index.ejs 中引入 header.ejs

　　渲染成功：

② 绑定数据

　　传入一个 msg 到 index.ejs 中

　　index.js 中渲染 msg：<%=%> 语法

　　一些数据，很多页面都需要用到的，可以写一个 koa 中间件将这个公共信息传入到每个页面中：

　　直接在需要用到这个数据的页面中渲染

　　index.ejs 和 login.ejs 中都可以直接渲染出 userName：

③ 绑定 html 数据

　以 <%-%> 语法渲染：

④ 条件判断语法

⑤ 列表循环语法

app.js

const Koa = require('koa')
const app = new Koa()
const router = require('koa-router')()
const views = require('koa-views')
const ejs = require('ejs')

//配置模板引擎中间件 koa-views(第三方中间件)
app.use(views('views', { 
    extension: 'ejs' //应用 ejs 模板引擎 
}))

//一个中间件配置公共的信息
app.use(async (ctx,next)=>{
    ctx.state.userName="jack"
    await next() //继续向下匹配路由
})

router.get('/',async (ctx)=>{
    console.log("首页")
    let msg = "hello world"
    let htmlMsg = '<h6>htmlMsg</h6>'
    let num = 10
    let list = ['aaa','bbb','ccc','ddd']
    await ctx.render('index',{
        msg:msg,
        htmlMsg:htmlMsg,
        num:num,
        list:list
    })
})

router.get('/login', async (ctx) => {
    console.log("登录页")
    await ctx.render('login')
})

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

app.listen(3000);

index.ejs

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h3>index.ejs页面</h3>
    <h5>加载公共模板</h5>
    <%- include('./layout/header.ejs'); %>
    <h5>绑定数据</h5>
    <%=msg%><br>
    公共信息:<%=userName%>
    <h5>绑定html数据</h5>
    <%-htmlMsg%>
    <h5>条件判断</h5>
    <%if(num=10){%>
        num = 10 
    <%}else{%>
        num!=10
    <%}%>
    <h5>列表循环</h5>
    <%for(let i=0;i<list.length;i++){%>
        <li><%=list[i]%></li>
    <%}%>
</body>
</html>

posted @ 2021-01-30 19:12 shanlu 阅读(488) 评论(0) 收藏举报

刷新页面返回顶部

shanlu

koa中使用 ejs

公告