服务端渲染

时间 2019-12-06

标签服务渲染繁體版

原文原文链接

Pug

起步下载pughtml

npm i pug复制代码

渲染模板文件：npm

index.pug数组

doctype
html
    heade
        meta(charset="utf-8")
        meta(name="site",content="test) title= title script. window.onload=function(){ let oDiv=document.getElementById('div1'); oDiv.onclick=function(){ } } body h1 一级标题 ul each user in users li(class='user-item clearfix') span(class='f1 name')=user.name span(class='f1')=user.password复制代码

相关解释：缓存

pug利用缩进来表示嵌套关系

元素中的属性用括号表示

元素中的内容（一个普通内容能够在元素加一个缩进表示，变量数据内容能够在元素后面衔接等号而后加上变量，多个内容能够在元素后面加 . 而后缩进表示）
each是pug中的内置循环函数

上面的index.pug将被渲染成bash

<! doctype />
<html>
    <heade>
        <meta charset="utf-8" />
        <meta name="site" content="test/> <title>标题</title> <script> window.onload=function(){ let oDiv=document.getElementById('div1'); oDiv.onclick=function(){ } } </script> </heade> <body> <h1>一级标题</h1> <ul> <li class='user-item clearfix'> <span class='f1 name'>blue</span> <span class='f1'>123</span> </li> <li class='user-tem clearfix'> <span class='f1 name'>red</span> <span class='f1'>234</span> </li> <li class='user-item clearfix'> <span class='f1 name'>green</span> <span class='f1>345</span> </li> </ul> </body> </html>复制代码

模板引擎服务器

pug.jskoa

const pug = require('pug');

// 设置模板引擎，第一个参数为渲染文件位置，第二个是放置参数或者数据，第三个是回调函数
pug.renderFile('./index.pug',{
    //此处放数据或者参数
    pretty: true, //服务端渲染代码缩进
    title: '标题',    //变量
    // users数组
    users: [
        {name:'blue',password:'123'},
        {name:'red',password:'234'},
        {name:'green',password:'345'}
    ]
},(err,data)=>{
    if(err){
        console.log(err)
    }esle{
        console.log('success')
    }
})复制代码

ejs

起步jsp

npm i ejs复制代码

渲染模板文件async

header.ejs函数

<header>
  <nav>
    xxxx
  </nav>
</header>复制代码

index.ejs

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <% include header.ejs -%>
    <%
    let a=12;
    let b=6;
    -%>
    <%=a+b -%>
    <%arr.forEach(item=>{%>
      <div class="">
        <%=item%>
      </div>
    <%})%>
  </body>
</html>复制代码

相关解释：

ejs相似Java的jsp用法，在<% %>内填写函数、声明变量，而且支持Es6的语法
include header.ejs是在该文件中引入header.ejs文件
只要在<% %>外面声明的变量，若是没有在<% %>声明的话，只能表示是字符串，而不是变量

上面模板渲染为下面格式

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <header>
      <nav>
        xxxx
      </nav>
    </header>
    18
      <div class="">
           123
      </div>
      <div class="">
          54
      </div>
      <div class="">
          64
      </div>
  </body>
</html>复制代码

服务器渲染

const ejs=require('ejs');

ejs.renderFile('./template/2.ejs', {
  name: 'blue',
  arr: [123, 54, 64]
}, (err, data)=>{
  if(err){
    console.log('错了', err);
  }else{
    console.log(data);
  }
});复制代码

koa-ejs使用

const Koa=require('koa');
const ejs=require('koa-ejs');
const path=require('path');

let server=new Koa();
server.listen(8080);

// 模板引擎设置
ejs(server, {
  // 模板文件
  root: path.resolve(__dirname, 'template'),
  layout: false,    
  viewExt: 'ejs',    // 扩展名
  cache: false,    // 服务器缓存
  debug: false 
});

//
server.use(async ctx=>{
  await ctx.render('2', {
    arr: [12, 5, 8, 99, 37]
  })
});
复制代码