zl程序教程

您现在的位置是:首页 >  其它

当前栏目

17 —— 服务端渲染 —— art-template

渲染 17 服务端 Template art
2023-09-14 08:57:23 时间

一,前端渲染数据 的弊端

仿 apache 服务器与客户端的几次交互:

1,加载静态页面

2,加载静态资源

3,发送 ajax 请求 ,接收请求并处理返回 。

4,前端浏览器接收数据循环遍历。

 

存在的问题:   交互太多

 

/*

*  使用 ajax 作请求的方式叫做 =>  前端渲染数据,也叫客户端页面渲染

*/

 

解决的方法:   在服务器端遍历数据

 

—————————————————

 

二,服务端页面渲染

1,进入npm官网,搜索 art-templet 第三方模块 https://www.npmjs.com/package/art-template

 

 

2,打开文档  https://aui.github.io/art-template/zh-cn/docs/ 

 

3,根据文档安装    

npm install art-template --save

 

4,API

template(filename, content)

根据模板名渲染模板。

  • 参数
    • {string} filename
    • {Object,string} content
  • 返回值
    • 如果 content 为 Object,则渲染模板并返回 string
    • 如果 content 为 string,则编译模板并返回 function
var html = template('/welcome.art', {
value: 'aui'
});

————————————————————————————————————

三,实践
1,出现了错误


2,错误原因 :   没有设置根路径,此刻路径默认根目录C盘

查看 art-template 模块文档的选项, https://aui.github.io/art-template/zh-cn/docs/options.html

var template = require('art-template');
template.defaults.root = './';
var str = template('./art.html',{
  v:'卡卡'
});

——————————————————————————————————————————————————————————————————————

四,具体代码

1,server.js 后台文件
const http = require('http');
const fs = require('fs');
const moment = require('moment');
const server = http.createServer();
const template = require('art-template')
/**
* 修改根目录路径
*/
template.defaults.root = './';
server.on('request', function (req, res) {

  var urls = req.url;
  console.log(urls);

  if(urls=='/'){
    res.writeHead(200, {'Content-Type': 'text/html;charset=utf-8'});

    fs.readdir('./','utf8',(err,data)=>{

      var data_arr = [];
      var count = 0;

      for(var i=0;i<data.length;i++){
 
        data_arr[i] = {};

        ((i)=>{
          fs.stat(data[i],(err,files)=>{
 
            if(files.isFile()==true){
              data_arr[i].type = 'f';
            }else{
              data_arr[i].type = 'd';
            }

          count++;
 
          data_arr[i].name = data[i];
          data_arr[i].size = files.size;
          data_arr[i].mtime = moment(files.mtime).format('YYYY/MM/DD hh:mm:ss');

          if(count == data.length){
            /**
            * 使用模板引擎读取数据
            */
            var htmls = template('./index.html',{
            data:data_arr
          });

          res.end(htmls)
        }
      })
    })(i)
 
   }
 
  })
 

 
  }else{
 
  fs.readFile('.'+urls, function (err, data) {
    res.end(data)
  });
 }
 
});

server.listen(1234, () => {
console.log('this server is runing on 1234')
});


2, index.html 前台展示文件 。
此处用到了 art-template 模块的语法 ,详细介绍 : https://aui.github.io/art-template/zh-cn/docs/syntax.html

 

<h1>获取文件及文件夹在前台遍历</h1>
<div id="div">
  {{each data}}
    <!-- 注意不要写成data.type -->
    {{if $value.type == 'f'}}
      <i class = 'glyphicon glyphicon-duplicate'></i> 文件名 :
    {{else}}
      <i class = 'glyphicon glyphicon-folder-close'></i> 目录名 :
    {{/if}}
  
    {{$value.name}} ,文件大小 : {{$value.size}} ,文件创建时间 : {{$value.mtime}} <br>

  {{/each}}
</div>