Koa服务端渲染

切图仔

发布于 2022-09-14 15:04:00

1.1K0

发布于 2022-09-14 15:04:00

文章被收录于专栏：生如夏花绚烂

1.基本使用新键文件 template/1.pug 这个文件存放html模板示例代码

doctype
html
  head
    meta(charset="utf-8")
    title 测试标题
  body
html

新键pug1.js

const pug = require('pug');
pug.renderFile('./template/1.pug',{
    //参数数据
    pretty:true,//美化
},(err,data)=>{
    if(err){
        console.log('渲染失败');
    }else{
        console.log(data)
    }
})//渲染的文件

运行pug1.js返回如下

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>测试标题</title>
  </head>
  <body></body>
</html>

多行处理加**.**，如js

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>测试标题</title>
    <script>
      window.onload=function(){
          let oDiv = document.getElementById('test');
          oDiv.onclick = function(){
              alert('test');
          }
      }
    </script>
  </head>
</html>

数据渲染 pug1.js

const pug = require('pug');
pug.renderFile('./template/1.pug',{
    //参数数据
    pretty:true,//美化
    //传递视图的数据
    title:'测试我的标题',
    users:[
        {name:"blue",passoword:'123'},
        {name:'blue2',passoword:'3'}
    ]
},(err,data)=>{
    if(err){
        console.log('渲染失败');
    }else{
        console.log(data)
    }
})//渲染的文件

1.pug文件

doctype
html
  head
    meta(charset="utf-8")
    title=title
    script.
      window.onload=function(){
          let oDiv = document.getElementById('test');
          oDiv.onclick = function(){
              alert('test');
          }
      }
    body
      ul
        each user in users
          li(class='user-item clearfix')
            span(class='f1')=user.name
            span(class='f1')=user.password

执行如下

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>测试我的标题</title>
    <script>
      window.onload=function(){
          let oDiv = document.getElementById('test');
          oDiv.onclick = function(){
              alert('test');
          }
      }
    </script>
    <body>
      <ul>
        <li class="user-item clearfix"><span class="f1">blue</span><span class="f1"></span></li>
        <li class="user-item clearfix"><span class="f1">blue2</span><span class="f1"></span></li>
      </ul>
    </body>
  </head>
</html>

ejs渲染

新键模板文件 1.ejs键入如下

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


</body>
</html>

渲染

const ejs = require('ejs')
ejs.renderFile('./template/1.ejs',{
    title:"测试ejs"
},(err,data)=>{
    if(err){
        console.log('错误',err);
    }else{
        console.log(data);
    }
})

值得一提的是ejs的语法与原生js一样，如下for循环示例

<body>
    <%for(let i=0;i<user.length;i++){%>
        <div>
            <%=user[i]%>
        </div>
    <%}%>
</body>

用<%%>包含ejs代码

或者

<body>
    <%user.forEach(item=>{%>
        <div>
            <%=item%>
        </div>
    <%})%>
</body>

子模板

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><%=title%></title>
</head>
<body>
    <%- include('header.ejs'); %>//引入子模板
    <%user.forEach(item=>{%>
        <div>
            <%=item%>
        </div>
    <%})%>
</body>
</html>

Koa使用ejs示例

cnpm i koa-ejs
const Koa = require('koa');
const ejs = require('koa-ejs');
const path = require('path');
let server = new Koa();
server.listen(3000);
ejs(server,{
    root:path.resolve(__dirname,'template'),//模板文件目录
    layout:false,
    viewExt:'ejs',//视图文件扩展名
    cache:false,
    debug:true
});

//server
server.use(async ctx=>{
    //渲染
    // render('渲染的模板','发送的数据')
   await ctx.render('1',{
        user:[2,4,6,9],
        title:'Node.js渲染'
    });
})

页面显示