生于理想

导航

< 2025年3月 >
日 一 二 三 四 五 六
23 24 25 26 27 28 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31 1 2 3 4 5

统计

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

服务器端

复制代码
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   生于理想  阅读(40)  评论(0)  编辑  收藏  举报

相关博文：
·  express框架中配置模板引擎
·  模板配置-模板根目录及后缀配置
·  express学习11-express-art-template模板引擎
·  art-template模板引擎
·  art-template 模板引擎
阅读排行：
· 25岁的心里话
· 闲置电脑爆改个人服务器（超详细） #公网映射 #Vmware虚拟网络编辑器
· 基于 Docker 搭建 FRP 内网穿透开源项目（很简单哒）
· 零经验选手，Compose 一天开发一款小游戏！
· 一起来玩mcp_server_sqlite，让AI帮你做增删改查！！
点击右上角即可分享
微信分享提示