生于理想

导航

服务器端模板引擎与客户端模板引擎

服务器端

const template = require('art-template');
const path = require('path');
// 要拼接的路径
const views = path.join(__dirname, 'views', '01.art');
//设置模板根目录
//template.defaults.root = path.join(__dirname, 'views');
// 设置模板根目录
//template.defaults.extname = '.html'
// 向模板中导入变量，以便在模板中使用
//template.defaults.imports.sd = sd;

const html = template(views, {
    name: '张三',
    age: 18,
    content: '<h1>我是标题</h1>'
});
//const html = template('02.art', {
//    time: new Date()
//});
//console.log(template('07', {}));
console.log(html);

01.art模板中内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p>{{name}}</p>
    <p>{{ 1+1 }}</p>
    <p>{{ 1 + 1 == 2 ? '相等' : '不相等' }}</p>
    <p>{{content}}</p>
    <p>{{@content}}</p> 
    <p>-------------------------------</p>
    <p> <%= name %></p>
    <p><%= 1+2 %></p>
    <p><%= 1 + 1 == 3 ? '相等' : '不相等' %></p>
    <p><%= content %> </p>
    <p><%- content %></p>
</body>
</html>

 服务器端模板引擎express下面

const express = require('express');
const path = require('path');
const app = express();
//告诉express框架使用什么模板引擎渲染什么后缀的文件
app.engine('art', require('express-art-template'));
//告诉express框架模板存放位置
app.set('views', path.join(__dirname, 'views'))
    //告诉express框架模板的默认后缀
app.set('view engine', 'art');

app.get('/index', (req, res) => {
    res.render('index', {
        msg: 'message'
    })
});
app.get('/list', (req, res) => {
    res.render('list', {
        msg: 'listPage'
    })
})

app.listen(3000);

index.art list.art

//index.art
{{msg}}
//list.art
{{msg}}

客户端模板引擎

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <!-- 1. 将模板引擎的库文件引入到当前页面 -->
    <script src="/js/template-web.js"></script>
</head>
<body>
    <div id="container"></div>
    <!-- 2.准备art-template模板 -->
    <script type="text/html" id="tpl">
        <h1>{{username}} {{age}}</h1>
    </script>
    <script type="text/javascript">
        // 3.告诉模板引擎将那个数据和哪个模板进行拼接
        // 1) 模板id 2)数据 对象类型
        // 方法的返回值就是拼接好的html字符串
        var html = template('tpl', {username: 'zhangsan', age: 30});
        document.getElementById('container').innerHTML = html;
    </script>
</body>
</html>

 

posted on 2022-09-28 09:09  生于理想  阅读(44)  评论(0)    收藏  举报