Node + art-template服务端渲染

245 阅读1分钟

Node 创建简易服务

// HTTP 模块
var http = require('http')
// 文件处理模块
var fs = require('fs')

// 创建服务实例
var server = http.createServer()

// 文件路径
var pathDir = 'D:/HBuiderProjects/NodeJsLearn/resoure/'
// 监听客户端请求
server.on('request',function (req,res) {
    // 请求数据
    let url = req.url
     
    let  pathFile = '/index.html'
    if (url !== '/') {
        pathFile = url
    } 
    console.log(pathDir + pathFile)
    fs.readFile(pathDir + pathFile, function (err,data) {
        if (err) {
            return res.end('404')
        }
        // 响应数据
        res.end(data)
    })

})

// 开启端口
server.listen('3000', function() {
    console.log('服务已开启:127.0.0.1:3000')
})

art-template 使用

art-template

  1. 创建模板
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{ title }}</title>
</head>
<body>
    <h1> 姓名: {{ info.name }} </h1>
    <h1> 性别: {{ info.gender }}</h1>
    <h2> 爱好:
        <ul>
            {{each info.hobbys}} 
            <li>
                {{$index}} {{$value}}
            </li>
            {{/each}}  
        </ul>
      
    </h2>
</body>
</html>
  1. 赋值
var http = require('http')
var fs = require('fs')
// 使用  art-template
var template = require('art-template')
var server = http.createServer()

var pathDir = 'D:/HBuiderProjects/NodeJsLearn/resoure/'
server.on('request',function (req,res) {
    let url = req.url
     
    let  pathFile = '/template.html'
    // 读取 模板 数据
    fs.readFile(pathDir + pathFile, function (err,data) {
        if (err) {
            return res.end('404')
        }

          // 赋值替换数据
        let htmlStr =  template.render(data.toString(),{
            title: '个人信息',
            info: {
                name: '张三',
                gender: '男',
                hobbys: ['羽毛球','打游戏']
            }
        })
        res.end(htmlStr)
    })

})

server.listen('3000', function() {
    console.log('服务已开启:127.0.0.1:3000')
})