投稿
  1. 极客之音首页
  2. 技术随笔

node.js 学习笔记（二）模板引擎和C/S渲染

飞熊 • • 技术随笔 • 阅读 202

梦想不抛弃苦心追求的人，只要不停止追求，你们会沐浴在梦想的光辉之中。再美好的梦想与目标，再完美的计划和方案，如果不能尽快在行动中落实，最终只能是纸上谈兵，空想一番。只要瞄准了大方向，坚持不懈地做下去，才能够扫除挡在梦想前面的障碍，实现美好的人生蓝图。node.js 学习笔记（二）模板引擎和C/S渲染，希望对大家有帮助，欢迎收藏，转发！站点地址：www.bmabk.com，来源：原文

node.js 学习笔记（二）模板引擎和C/S渲染

文章目录

一、初步实现Apache功能

Apache 服务器软件默认有一个 www 目录，所有存放在 www 目录中的资源都可以通过地址来访问,如下：

127.0.0.1:80/a.txt

127.0.0.1:80/index.html

127.0.0.1:80/apple/login.html

node.js 学习笔记（二）模板引擎和C/S渲染 

let http = require('http');
let fs = require('fs');

let server = http.createServer();

let wwwDir = 'C:/Users/frontEnd/node/www';

server.on('request',function(req,res) {
  let url = req.url;
  let filePath = '/index.html';
  if (url !== '/') {
    filePath = url;
  }

  fs.readFile(wwwDir + filePath, function(err, data) {
    if (err) {
      return res.end('404 Not Found.');
    } else {
      res.end(data);
    }
  })
})

server.listen(3000,function() {
  console.log("服务器启动成功");
});

 

1.1 使用模板引擎

问题：

  1. 如何得到 wwwDir 目录列表中的文件名和目录名？

    解决方案：fs.readdir

  2. 如何将得到的文件名和目录名替换到 template.html 中？

    解决方案1：模板引擎

    解决方案2：

    1. 在 template.html 中需要替换的位置预留一个特殊的标记
    2. 根据 files 动态生成需要的 html 内容
<!-- template.html -->
<html dir="ltr" lang="zh">
<head>
  <meta charset="utf-8">
  <meta name="google" value="notranslate">
  <style>
    h1 {
      border-bottom: 1px solid #c0c0c0;
      margin-bottom: 10px;
      padding-bottom: 10px;
      white-space: nowrap;
    }

    table {
      border-collapse: collapse;
    }

    th {
      cursor: pointer;
    }

    td.detailsColumn {
      padding-inline-start: 2em;
      text-align: end;
      white-space: nowrap;
    }

    a.icon {
      padding-inline-start: 1.5em;
      text-decoration: none;
      user-select: auto;
    }

    a.icon:hover {
      text-decoration: underline;
    }

    a.file {
      background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAACQkWg2AAAABnRSTlMAAAAAAABupgeRAAABHUlEQVR42o2RMW7DIBiF3498iHRJD5JKHurL+CRVBp+i2T16tTynF2gO0KSb5ZrBBl4HHDBuK/WXACH4eO9/CAAAbdvijzLGNE1TVZXfZuHg6XCAQESAZXbOKaXO57eiKG6ft9PrKQIkCQqFoIiQFBGlFIB5nvM8t9aOX2Nd18oDzjnPgCDpn/BH4zh2XZdlWVmWiUK4IgCBoFMUz9eP6zRN75cLgEQhcmTQIbl72O0f9865qLAAsURAAgKBJKEtgLXWvyjLuFsThCSstb8rBCaAQhDYWgIZ7myM+TUBjDHrHlZcbMYYk34cN0YSLcgS+wL0fe9TXDMbY33fR2AYBvyQ8L0Gk8MwREBrTfKe4TpTzwhArXWi8HI84h/1DfwI5mhxJamFAAAAAElFTkSuQmCC ") left top no-repeat;
    }

    a.dir {
      background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAd5JREFUeNqMU79rFUEQ/vbuodFEEkzAImBpkUabFP4ldpaJhZXYm/RiZWsv/hkWFglBUyTIgyAIIfgIRjHv3r39MePM7N3LcbxAFvZ2b2bn22/mm3XMjF+HL3YW7q28YSIw8mBKoBihhhgCsoORot9d3/ywg3YowMXwNde/PzGnk2vn6PitrT+/PGeNaecg4+qNY3D43vy16A5wDDd4Aqg/ngmrjl/GoN0U5V1QquHQG3q+TPDVhVwyBffcmQGJmSVfyZk7R3SngI4JKfwDJ2+05zIg8gbiereTZRHhJ5KCMOwDFLjhoBTn2g0ghagfKeIYJDPFyibJVBtTREwq60SpYvh5++PpwatHsxSm9QRLSQpEVSd7/TYJUb49TX7gztpjjEffnoVw66+Ytovs14Yp7HaKmUXeX9rKUoMoLNW3srqI5fWn8JejrVkK0QcrkFLOgS39yoKUQe292WJ1guUHG8K2o8K00oO1BTvXoW4yasclUTgZYJY9aFNfAThX5CZRmczAV52oAPoupHhWRIUUAOoyUIlYVaAa/VbLbyiZUiyFbjQFNwiZQSGl4IDy9sO5Wrty0QLKhdZPxmgGcDo8ejn+c/6eiK9poz15Kw7Dr/vN/z6W7q++091/AQYA5mZ8GYJ9K0AAAAAASUVORK5CYII= ") left top no-repeat;
    }

    a.up {
      background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAmlJREFUeNpsU0toU0EUPfPysx/tTxuDH9SCWhUDooIbd7oRUUTMouqi2iIoCO6lceHWhegy4EJFinWjrlQUpVm0IIoFpVDEIthm0dpikpf3ZuZ6Z94nrXhhMjM3c8895977BBHB2PznK8WPtDgyWH5q77cPH8PpdXuhpQT4ifR9u5sfJb1bmw6VivahATDrxcRZ2njfoaMv+2j7mLDn93MPiNRMvGbL18L9IpF8h9/TN+EYkMffSiOXJ5+hkD+PdqcLpICWHOHc2CC+LEyA/K+cKQMnlQHJX8wqYG3MAJy88Wa4OLDvEqAEOpJd0LxHIMdHBziowSwVlF8D6QaicK01krw/JynwcKoEwZczewroTvZirlKJs5CqQ5CG8pb57FnJUA0LYCXMX5fibd+p8LWDDemcPZbzQyjvH+Ki1TlIciElA7ghwLKV4kRZstt2sANWRjYTAGzuP2hXZFpJ/GsxgGJ0ox1aoFWsDXyyxqCs26+ydmagFN/rRjymJ1898bzGzmQE0HCZpmk5A0RFIv8Pn0WYPsiu6t/Rsj6PauVTwffTSzGAGZhUG2F06hEc9ibS7OPMNp6ErYFlKavo7MkhmTqCxZ/jwzGA9Hx82H2BZSw1NTN9Gx8ycHkajU/7M+jInsDC7DiaEmo1bNl1AMr9ASFgqVu9MCTIzoGUimXVAnnaN0PdBBDCCYbEtMk6wkpQwIG0sn0PQIUF4GsTwLSIFKNqF6DVrQq+IWVrQDxAYQC/1SsYOI4pOxKZrfifiUSbDUisif7XlpGIPufXd/uvdvZm760M0no1FZcnrzUdjw7au3vu/BVgAFLXeuTxhTXVAAAAAElFTkSuQmCC ") left top no-repeat;
    }

    html[dir=rtl] a {
      background-position-x: right;
    }

    #parentDirLinkBox {
      margin-bottom: 10px;
      padding-bottom: 10px;
    }

    #listingParsingErrorBox {
      border: 1px solid black;
      background: #fae691;
      padding: 10px;
      display: none;
    }
  </style>
  <title id="title">C:\Users\frontEnd\node\www\ 的索引</title>

</head>
<body>
  <div id="listingParsingErrorBox">糟糕！Google Chrome无法解读服务器所发送的数据。请<a
      href="http://code.google.com/p/chromium/issues/entry">报告错误</a>，并附上<a href="LOCATION">原始列表</a>。</div>
  <h1 id="header">C:\Users\frontEnd\node\www\ 的索引</h1>
  <div id="parentDirLinkBox" style="display: block;">
    <a id="parentDirLink" class="icon up" href="/C:/Users/%E5%B0%8F%E8%90%8C/Desktop/Ability/frontEnd/node/www/..">
      <span id="parentDirText">[上级目录]</span>
    </a>
  </div>

  <table>
    <thead>
      <tr class="header" id="theader">
        <th id="nameColumnHeader" tabindex="0" role="button">名称</th>
        <th id="sizeColumnHeader" class="detailsColumn" tabindex="0" role="button">
          大小
        </th>
        <th id="dateColumnHeader" class="detailsColumn" tabindex="0" role="button">
          修改日期
        </th>
      </tr>
    </thead>
    <tbody id="tbody">
      ^_^
    </tbody>
  </table>
</body>
</html>

let http = require('http');
let fs = require('fs');

let server = http.createServer();

let wwwDir = 'C:/Users/frontEnd/node/www';

server.on('request',function(req,res) {
  let url = req.url;
  fs.readFile('./template.html', function(err, data) {
    if (err) return res.end('404 Not Found.');
    fs.readdir(wwwDir, function(err, files) {
      if(err) 
        return res.end('Can not find wwwDir.');
      
      var content = '';
      files.forEach(function (item) {
        // 在 ES6 中的 ``（反引号）字符串中可以使用 ${} 来引用变量
        content += `
          <tr>
            <td data-value="apple/"><a class="icon dir"
                href="/C:/Users/%E5%B0%8F%E8%90%8C/Desktop/Ability/frontEnd/node/www/apple/">${item}/</a></td>
            <td class="detailsColumn" data-value="0"></td>
            <td class="detailsColumn" data-value="1635659913">2021/10/31 下午1:58:33</td>
          </tr>
        ` 
      })
      data = data.toString(); // 转换为字符串
      data = data.replace('^_^', content);
      res.end(data); //发送解析替换完的内容
    })
    
  })
})

server.listen(3000,function() {
  console.log("服务器启动成功");
});

可以用模板引擎优化，将 html 放入另一个文件template-apache.html

<!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 id='title'>{{ title }}</title>
</head>
<body>
  <table>
    <thead>
      <tr class="header" id="theader">
        <th id="nameColumnHeader" tabindex="0" role="button">名称</th>
        <th id="sizeColumnHeader" class="detailsColumn" tabindex="0" role="button">
          大小
        </th>
        <th id="dateColumnHeader" class="detailsColumn" tabindex="0" role="button">
          修改日期
        </th>
      </tr>
    </thead>
    <tbody id="tbody">
      {{each filesName}}
      <tr>
        <td data-value="apple/"><a class="icon dir"
          href="/C:/Users/%E5%B0%8F%E8%90%8C/Desktop/Ability/frontEnd/node/www/apple/">{{$value}}/</a></td>
          <td class="detailsColumn" data-value="0"></td>
        <td class="detailsColumn" data-value="1635659913">2021/10/31 下午1:58:33</td>
      </tr>
      {{/each}}
    </tbody>
  </table>
</body>
</html>

let http = require('http');
let fs = require('fs');
let template = require('art-template');

let server = http.createServer();

let wwwDir = 'C:/UsersfrontEnd/node/www';

server.on('request',function(req,res) {
    let url = req.url;
    fs.readFile('./template-apache.html', function(err, data) {
        if (err) return res.end('404 Not Found.');
        fs.readdir(wwwDir, function(err, files) {
            if(err) 
                return res.end('Can not find wwwDir.');

            let htmlStr = template.render(data.toString(), {
                title: 'hhhhh',
                filesName: files
            })
            res.end(htmlStr); //发送解析替换完的内容
        })
    })
})

server.listen(3000,function() {
    console.log("服务器启动成功");
});

 

1.2 在 node 中使用模板引擎

       使用 art-template 模板引擎，模板引擎不关心模板内容，只关心能够识别的模板标记语法，如 {{ }}（在浏览器中）

使用步骤：

  1. 安装 npm install art-template –save

  2. 在需要使用的文件模块中使用 require 加载 art-template，参数 art-template 就是下载包的名字

  3. 查文档，使用模板引擎API

    template.render('模板字符串','替换对象')
//例子如下：
template.render('hello {{ name }}', {
  name: 'Jack'
})

<!-- tpl.html -->
<!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>我今年 {{ age }} 岁了</p>
  <p>我来自 {{ province }}</p>
  <p>我喜欢： {{each hobbies}} {{ $value }} {{/each}}</p>
</body>
</html>

let template = require('art-template');
let fs = require('fs');

fs.readFile('./tpl.html',function(err, data) {
  if(err) return console.log('读取文件失败');
  // data 默认是二进制数据，而模板引擎需要接收字符串
  var res = template.render(data.toString(), {
    name: 'Jack',
    age: 18,
    province: '重庆市',
    hobbies: ['写代码','听音乐','街舞']
  })

  console.log(res); // 结果如下图
})

node.js 学习笔记（二）模板引擎和C/S渲染

       

二、客户端渲染和服务器渲染

2.1 客户端渲染

node.js 学习笔记（二）模板引擎和C/S渲染

1. 客户端（浏览器）渲染过程

  1. 浏览器向服务器请求页面
  2. 接收服务器响应的页面字符串
  3. 浏览器从上往下依次解析，在解析过程中，若发现 ajax 请求，则再次发起请求
  4. 浏览器向服务器请求数据
  5. 接收 ajax 响应结果
  6. 模板引擎渲染

       

2. 要点

  • 浏览器至少向服务器发送两次请求：
    ① 第一次请求页面
    ② 第二次请求动态数据
  • 在浏览器查看源代码中看不到数据，数据时客户端渲染动态追加的
  • 执行类似分页的功能时不会重新渲染页面
  • 客户端异步渲染是很难被爬虫抓取到的，就很难定位信息，如：在购买商品时就搜索不到商品信息

       

3. 优缺点

优点：

  • 能够尽早地看见页面

缺点：

  • 数据量大时，加载渲染缓慢，会看见页面中部分空白

  • 客户端渲染不利于 SEO 搜索引擎优化

       

2.2 服务器渲染

node.js 学习笔记（二）模板引擎和C/S渲染

1. 要点

  • 客户端接收的是已经渲染了数据的页面

  • 服务器渲染只需要浏览器请求一次

  • 能够在浏览器查看源代码时能够看到数据

  • 执行类似分页的功能时会重新渲染页面

  • 服务器渲染可以被爬虫抓取

       

2. 优缺点

优点：

  • 返回地就是最后结果，客户端不需要再做任何处理，所以也不会看见空白页面
  • 渲染加载页面速度更快
  • 利于 SEO 搜索引擎优化

缺点：

  • 服务器压力增大

       

2.3 实际开发情况

       实际的网站中既不是纯异步的客户端渲染也不是纯服务器渲染的，而是两者结合，例如：京东的网站中商品列表采用服务端渲染，目的为了 SEO 搜索引擎优化，而商品评论列表为了用户体验（加载速度更快），而又不需要 SEO ，所以采用客户端渲染

       

三、处理网站的静态资源

背景：浏览器收到 HTML 响应内容后，从上往下开始解析，在解析过程中，如果发现 link、script、img、iframe、video、audio 等带有 src 或者 href（link）属性标签（具有外链资源）时，浏览器会自动对这些资源发起新的请求，导致网页加载渲染很缓慢。为了方便的统一处理静态资源，约定所有的静态资源都存放在 public 目录中。如果请求路径是以 /public/ 开头的，则认为要获取 public 中的某个资源，就直接可以把请求路径当作文件路径来读取

整个 public 目录中的资源都允许访问
node.js 学习笔记（二）模板引擎和C/S渲染

let http = require('http');
let fs = require('fs');

http
  .createServer(function (req, res) {
    let url = req.url;
    if (url === '/') {
      fs.readFile('./views/index.html', function (err, data) {
        if (err) {
          return res.end('404 Not Found');
        }
        res.end(data);
      })
    } else if (url === '/post') {
      fs.readFile('./views/post.html', function (err, data) {
        if (err) {
          return res.end('404 Not Found.');
        }
        res.end(data);
      })
    } else if (url.indexOf('/public/') === 0) {
      fs.readFile('.' + url, function (err, data) {
        if (err) {
          return res.end('404 Not Found.');
        }
        res.end(data);
      });
    } else {
      fs.readFile('./views/404.html', function (err, data) {
        if (err) {
          return res.end('404 Not Found.');
        }
        res.end(data);
      })
    }
  })
  .listen(3000, function () {
    console.log('服务器已经启动');
  })

       

四、重定向

如何通过服务器让客户端重定向？

解决方法：

  1. 状态码设置为302（临时重定向）：statusCode
  2. 在响应头中通过 Location 告诉客户端往哪儿重定向：setHeader
  3. 若客户端发现收到的服务器的状态码时 302 ，就会自动去响应头中找 Location，然后对该地址发起新的请求，就能看到客户端跳转了

       

4.1 临时重定向和永久重定向

  • 永久重定向（301）

    • 新网址完全继承旧网址，旧网址的排名等完全清零。

    • 301重定向是网页更改地址后对搜索引擎友好的最好方法，只要不是暂时搬移的情况，都建议使用301来做转址。

  • 临时重定向（302）

    • 对旧网址没有影响，但新网址不会有排名

    • 抓取新的内容的时候，保留旧的地址，因为当前的重定向只是暂时的，很快就会恢复旧地址的访问。

举例：

例如：我们之前网站的域名是 a.com，现在替换成了 b.com。但是用户并不知道域名改了，所以还是在浏览器里输入 a.com，Web服务器（apache 或者 ngnix）在收到请求后，在响应中包含：

  • 状态码 301 及 b.com。用户的浏览器在收到响应后，**自动将输入栏网址改变为 b.com。**不会请求 a.com
  • 或者状态码 302 及 b.com。用户的浏览器在收到响应后，输入栏仍是显示旧网址，但是显示的是 b.com的内容。会请求 a.com

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。

文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/150420.html

赞 (0)
飞熊的头像飞熊bm
0 0

相关推荐

发表回复

登录后才能评论
极客之音——专业性很强的中文编程技术网站，欢迎收藏到浏览器，订阅我们！