express 模板引擎

最新推荐文章于 2025-02-02 18:57:58 发布

小芒果cuty

最新推荐文章于 2025-02-02 18:57:58 发布

阅读量387

点赞数

分类专栏： node 文章标签： templates

csdn@小芒果cuty

本文链接：https://blog.youkuaiyun.com/caipital/article/details/108359381

版权

node 专栏收录该内容

4 篇文章

订阅专栏

安装第三方插件：
cnpm i art-template express-art-template --save-dev
或者使用：
npm i art-template express-art-template --save-dev
node.js模板引擎原始用法：

<!-- 04.html文件 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script src="./node_modules/art-template/lib/template-web.js"></script>
    <script type="text/html" id="temp">
        <p>{{ name }}</p>
        <p>{{ age }}</p>
        <p>{{ sex }}</p>
        {{each hobbies}}
        <p>{{$value}}</p>
        {{/each}}
    </script>
</body>
</html>

//04.js文件
const fs = require('fs');
const artTemplate = require('art-template');
fs.readFile('./04.html',(err,data)=>{
    if(err) throw err;
    //  模板第一个必须是字符串格式，而data读出来的是一个buffer对象，是二进制
    //  render(A,B)把B的数据添加到A中
    let ret = artTemplate.render(data.toString(),{
        name:'zy',
        age:18,
        sex:'女',
        hobbies:['sing','dance','rap']
    })
    console.log(ret);
})

express框架用法：

const express = require('express');
const path = require('path');
let app = express();

// 告诉express框架，使用什么模板引擎渲染HTML模板
app.engine('html',require('express-art-template'));
// 设置render渲染模板的后缀为html
app.set('view engine','html');
// render渲染模板,模板默认路径
app.set('views',path.join(__dirname,'/views'))//views 目录需要自己创建
app.get('/',(req,res)=>{
	//文件路径	views/index.html
	//想index.html发送了一个对象{name:'zy'}
    res.render('index',{//省略了后缀名，原来应为index.html
        name:'zy'
    })
})

app.listen(3000,()=>{
    console.log('3000开始监听... ')
})

调用后端模板的对象，传到前端：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    {{name}}
</body>
</html>