art-template在node，html和express中的使用流程

最新推荐文章于 2022-03-02 14:38:01 发布

原创最新推荐文章于 2022-03-02 14:38:01 发布 · 852 阅读

0 ·

CC 4.0 BY-SA版权

前端编写专栏收录该内容

7 篇文章

订阅专栏

本文详细介绍如何在Node.js环境中使用Art-Template，包括安装、基本用法及与Express框架结合的方法。同时，展示了如何在HTML中直接应用Art-Template进行数据渲染。

node中使用：

// 1.安装 npm i art-template
// 2.在需要使用的文件模块中加载 art-template
//   只需要使用 require 方法加载就可以了：require('art-template')

var template = require('art-template')
var fs = require('fs')
var path = require('path')

fs.readFile(path.join(__dirname,'./tpl.html'),function (err,data) {
    if(err){
       return console.log(err)
    }
    var json = {
        name:'jack',
        age:18,
        hobbies:[
            '写代码',
            '唱歌',
            '打游戏'
        ]
    }
    var ret = template.render(data.toString(),json)
    console.log(ret)
})

html中使用：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

</head>

<body>
    <script src="./node_modules/art-template/lib/template-web.js"></script>
    <script type="text/template" id="tpl">
        <p>{{name}}</p>
        <p>{{age}}</p>
        {{each hobbies}}
        <p>{{$value}}</p>
        {{/each}}
    </script>
    <script>
        var json = {
            name: 'jack',
            age: 18,
            hobbies: [
                '写代码',
                '唱歌',
                '打游戏'
            ]
        }
        var ret = template('tpl', json)
        console.log(ret)
        document.body.innerHTML=ret
    </script>
</body>

</html>

结合express框架使用：

npm i express

npm i art-template

npm i express-art-template

var express = require('express')
var bodyParser = require('body-parser')

var app = express()

app.listen(3000, function () {
    console.log('running...')
})

app.use('/node_modules/', express.static('./node_modules'))
app.use('/public/', express.static('./public'))

app.engine('html', require('express-art-template'))
app.set('views','./views')


app.use(bodyParser.urlencoded({
    extended: false
}))
app.use(bodyParser.json())

var comments = []
for (var i = 0; i < 10; i++) {
    comments.push({
        name: '张三' + i,
        message: '今天天气真好' + i,
        dateTime: '2018-09-1' + i
    })
}

app
    .get('/', function (req, res) {
        res.render('index.html',{
            comments:comments
        })
    })
    .get('/post', function (req, res) {
        res.render('post.html')
    })
    .post('/post',function (req,res) { 
        var comment = req.body
        comment.dateTime = '2018-09-20'
        comments.unshift(comment)
        res.redirect('/')
        // res.statusCode = 302
        // res.setHeader('Location','/')
     })