koa ejs 引擎

最新推荐文章于 2024-01-04 11:08:07 发布

小小程序员洋

最新推荐文章于 2024-01-04 11:08:07 发布

阅读量201

点赞数

本文链接：https://blog.csdn.net/qq_40257538/article/details/92761751

版权

1 安装 koa-views npm install --save koa-views

2 安装 ejs npm install ejs --save

3 引入koa-views配置中间件

const views = require("koa-views");

app.use(views('views',{map:{html:'ejs'}})); 这种配置则后缀名必须是html

var Koa=require("koa");
var Router =require("koa-router");

var app=new Koa();
var router =new Router();
const views=require("koa-views")


//配置第三方中间件  也就是模板引擎
app.use(views('views',{map:{html:'ejs'}}));
             //文件夹位置（这里与app.js同级了

//配置路由
router.get("/",async function(ctx){

  let  abc="你好"
 await ctx.render("index",{
 title:abc

 })
}).get("/new",async (ctx)=>{
    ctx.body="这是一个新闻页面"
})


//中间件
// app.use(async (ctx)=>{
//     ctx.body="你好 菜鸟"
// })



//引用了 路由  也配置了 路由 接下来 启动路由
app.use(router.routes())  //启动路由

app.use(router.allowedMethods())  // 建议配置 可以省略  作用是设置一个对应的响应头


app.listen(3000)

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>
    <div>
        ejs 模板引擎
    </div>
    <h2><%=title%></h2>
</body>
</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>
    <div>
        ejs 模板引擎
    </div>
    <h2><%=title%></h2>
    <% for(i=0;i<list.length;i++){%>
      <div><%=list[i]%></div>     
    <%}%>
</body>
</html>

引用外部文件

<body>
    <% include header.html %>
    <!-- <div>
        ejs 模板引擎
    </div>
    <h2><%=title%></h2>
    <% for(i=0;i<list.length;i++){%>
      <div><%=list[i]%></div>     
    <%}%> -->
</body>

绑定带有html的数据 <%- %> 比如date="<h1>这是h1</h1>" 这种方法会解析html 标签

判断语句

<body>
    <% include header.html %>
   <%if(title=="你好"){%>
             你猜
    <%}else{%>
        不猜
        <%}%>
</body>

要想每个模块都可以使用一个数据比如1000个模板里面都用一个名字

// 写一个中间件 写公共的数据
app.use(async (ctx,next)=>{
ctx.state={
  name:"张三"
},
await next()
})

小小程序员洋

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫