1. 编程号首页

ejs和art-template模板引擎

编程小号 • • 未分类

ejs和art-template模板引擎此文主要介绍EJS和Art-template模板引擎如何使用，它们如何使得用户系欸按和业务数据进行分离。

EJS模板引擎

1.介绍

EJS是一个高效的 JavaScript 模板引擎。

模板引擎是为了使用户界面与业务数据（内容）分离而产生的。

简单来说，使用EJS模板引擎就能动态渲染数据。

2.EJS的使用

  1. 下载安装

    npm i ejs

  2. 配置模板引擎

    app.set(“view engine” , “ejs”);

  3. 配置模板的存放目录

    app.set(“views”,”./views”)

  4. 在views目录下创建模板文件

    xxx.ejs

  5. 使用模板，通过response来渲染模板

    response.render(‘模板名称’, 数据对象)

1.变量的拼接

//1. 安装 ejs
//2. 引入 ejs
const ejs = require("ejs");
const fs = require("fs");

/** * str 要编译的字符串 * data 数据对象 */

let html = fs.readFileSync("./views/index.html").toString();
let data = {
    msg: "为荣耀而生，为荣誉而死",
    title: "标题",
};
//3. 调用方法
const result = ejs.render(html, data);

// index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title><%= title %></title>
  </head>
  <body>
    <h1><%= msg %></h1>
  </body>
</html>

2.数据的遍历

const ejs = require("ejs");
const fs = require("fs");
let str = fs.readFileSync('./views/songs.html').toString();
let data = {
    songs: [
        '甜蜜蜜',
        '笨小孩',
        '常回家看看',
        '难忘今宵',
        '好运来'
    ]
};
let result = ejs.render(str, data);

// songs.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>歌曲列表</title>
    <style> body{ background:#ace; } </style>
</head>
<body>
    <h2>歌曲列表</h2>
    <ul>
        <% for(let i=0;i<songs.length;i++){ %>
        <li><%= songs[i] %></li>
        <% } %>
    </ul>
</body>
</html>

结合Express使用

const express = require("express");
const app = express();
const ejs = require("ejs");
const fs = require("fs");
//静态资源服务
app.use(express.static("./public"));
//显示歌曲列表
app.get("/songs", (request, response) => {
  //字符串参数
  let str = fs.readFileSync("./views/歌曲列表.html").toString();
  //数据对象
  let data = {
    songs: ["甜蜜蜜", "笨小孩", "常回家看看", "难忘今宵", "好运来"],
  };
  //编译内容
  let result = ejs.render(str, data);
  //响应
  response.send(result);
});

app.listen(80);

3.判断

//三. 判断
let str = ` <h2>布布TV</h2> <% if(!vip){ %> <p><%= ad %></p> <% } %> `;
const result = ejs.render(str, {
    vip: 0,
    ad: "不是每一滴牛奶, 都叫特仑苏",
});

console.log(result);

ejs在express使用

//选手数据
const player = [
  { id: 1, name: "xiaoming" },
  { id: 2, name: "xiaoning" },
  { id: 3, name: "xiaotian" },
  { id: 4, name: "knight" },
];

//引入 express 包
const express = require("express");
//创建应用对象
const app = express();
//1. 设置 express 使用的模板引擎 ejs
app.set("view engine", "ejs"); // pug
//设置 ejs 使用的模板的存放位置 模板指的就是 HTML 代码存放的文件
app.set("views", "./template");

//路由的设置
app.get("/player", (request, response) => {
  //2. 到指定的文件夹下创建模板文件
  //3. 设置模板响应 使用 ejs 编译 ./template/player.ejs 文件中的内容
  response.render("player", { player: player });
});
//监听端口 启动服务
app.listen(80, () => {
  console.log("服务已经启动.. 端口 80 监听中....");
});

// template/player.ejs
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>选手列表</title>
        <style>
            table{
                border-collapse: collapse;
            }
            td{
                padding:10px 20px;
            }
        </style>
    </head>
    <body>
        <h2>职业选手</h2>
        <table border="1">
            <tr><td>ID</td><td>名字</td></tr>
            <% for(let i=0;i<player.length;i++){ %>
            <tr><td><%= player[i].id %></td><td><%= player[i].name %></td></tr>
            <% } %>
        </table>
    </body>
</html>

art-template

1.介绍

art-template 是一个简约、超快的模板引擎。

它采用作用域预声明的技术来优化模板渲染速度，从而获得接近 JavaScript 极限的运行性能，并且同时支持 NodeJS 和浏览器。

官方文档 aui.github.io/art-templat…

2.使用

如果没有模板引擎需要手动拼接

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>模板引擎--art-template</title>
  </head>
  <body>
    <p>学生信息表</p>
    <ul id="list"></ul>

    <script> // 学生数据 const students = [ { name: "Alex", age: 18, sex: "male", }, { name: "张三", age: 28, sex: "male", }, { name: "李四", age: 20, sex: "female", }, ]; // 1.使用模板字符串 const list = document.getElementById('list'); let html = ''; for (const student of students) { html += `<li>${student.name} ${student.sex} ${student.age}</li>`; } list.innerHTML = html; </script>
  </body>
</html>

使用模板引擎

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>模板引擎--art-template</title>
  </head>
  <body>
    <p>学生信息表</p>
    <ul id="list"></ul>

    <script src="https://unpkg.com/art-template@4.13.2/lib/template-web.js"></script>

    <script id="tpl-students" type="text/html"> {{each students}} <li>{{$value.name}} {{$value.age}} {{$value.sex}}</li> {{/each}} </script>

    <script> // 学生数据 const students = [ { name: "Alex", age: 18, sex: "male", }, { name: "张三", age: 28, sex: "male", }, { name: "李四", age: 20, sex: "female", }, ]; // list.innerHTML = html; // 1.使用模板引擎--art-template // 1.1.引入 art-template // 1.2.准备好模板 // 1.3.获取模板 // console.log( // template('tpl-students', { // students // }) // ); const list = document.getElementById("list"); // 模板引擎输出的是字符串，是填充了数据的字符串 list.innerHTML = template("tpl-students", { students, }); </script>
  </body>
</html>

1.输出

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>art-template 的语法</title>
  </head>
  <body>
    <div id="content"></div>

    <script src="https://unpkg.com/art-template@4.13.2/lib/template-web.js"></script>

    <!-- 1.输出 -->
    <script id="tpl-1" type="text/html"> {{value}}<br /> {{data}}<br /> {{data.key}}<br /> {{data['key']}}<br /> 运算 {{a+b}}<br /> $data为传递的整个对象 {{$data}}<br /> {{$data.value}}<br /> {{$data.data}}<br /> @ text解析HTML标签 {{text}} {{@ text}} </script>

   

      <script> // 1.输出 // 优先使用标准语法，标准语法不能解决的，再使用原始语法 const content = document.getElementById("content"); // 参数要放在对象中，即使没有参数，也要传空对象 content.innerHTML = template("tpl-1", { value: 1, data: { key: 2, }, a: 3, b: 4, // 原文输出语句不会对 HTML 内容进行转义处理 text: "<strong>重点内容</strong>", }); </script>
  </body>
</html>

2.条件

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>art-template 的语法</title>
  </head>
  <body>
    <div id="content"></div>

    <script src="https://unpkg.com/art-template@4.13.2/lib/template-web.js"></script>

 <!-- 2.条件 -->
    <script id="tpl-2" type="text/html"> {{if sex === 'male'}} 男 {{else if sex === 'female'}} 女 {{else}} 其他 {{/if}} </script>


      <script> // 2.条件 const content = document.getElementById('content'); content.innerHTML = template('tpl-2', { // sex: 'male' // sex: 'female' sex: 'other' }); </script>
  </body>
</html>

3.循环

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>art-template 的语法</title>
  </head>
  <body>
      <ul id="list"></ul>
    <script src="https://unpkg.com/art-template@4.13.2/lib/template-web.js"></script>

 <!-- 3.循环 -->
      <script id="tpl-2" type="text/html"> {{each students}} $value为每一项的值,$index为索引,$data为传递的整个数据 <li>{{$value.name}} {{$value.age}} {{$value.sex}} {{$index}} {{$data}}</li> {{/each}} </script>


      <script> // 3.循环 const students = [ { name: 'Alex', age: 18, sex: 'male' }, { name: '张三', age: 28, sex: 'male' }, { name: '李四', age: 20, sex: 'female' } ]; const list = document.getElementById('list'); list.innerHTML = template('tpl-3', { // students: students students }); </script>
  </body>
</html>

4.子模板语法

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <title>art-template 的语法</title>
    </head>
    <body>
        <div id="content"></div>
        <br />
        <div id="otherContent"></div>

     

        <script src="https://unpkg.com/art-template@4.13.2/lib/template-web.js"></script>

        <!-- 4.子模板 -->
    <script id="tpl-4" type="text/html"> {{include 'tpl-4-header'}} <p>首页</p> {{include 'tpl-4-footer'}} </script>

    <script id="tpl-4-header" type="text/html"> <header>我是公共头部</header> </script>
    <script id="tpl-4-footer" type="text/html"> <footer>我是公共底部</footer> </script>
	
     <!-- 向子模板传参 -->
    <script id="tpl-4-2-header" type="text/html"> <header>我是{{page}}公共头部</header> </script>
    <script id="tpl-4-2-footer" type="text/html"> <footer>我是{{page}}公共底部</footer> </script>

    <script id="tpl-4-2-index" type="text/html"> <% include('tpl-4-2-header', {page:'首页'}) %> <p>首页</p> <% include('tpl-4-2-footer', {page:'首页'}) %> </script>

    <script id="tpl-4-2-list" type="text/html"> <% include('tpl-4-2-header', {page:'列表页'}) %> <p>列表页</p> <% include('tpl-4-2-footer', {page:'列表页'}) %> </script>

      <script> // 4.子模板 const content = document.getElementById("content"); // 即使没有参数，也要传空对象 content.innerHTML = template("tpl-4", {}); // 向子模板传参 // 如果需要向子模板传参，请使用原始语法 const content = document.getElementById("content"); content.innerHTML = template("tpl-4-2-index", {}); const otherContent = document.getElementById("otherContent"); otherContent.innerHTML = template("tpl-4-2-list", {}); </script>
  </body>
</html>

今天的文章ejs和art-template模板引擎分享到此就结束了，感谢您的阅读。

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
如需转载请保留出处：https://bianchenghao.cn/20440.html

赞 (0)
编程小号编程小号
0

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注