用Node实现简单的服务端渲染

文章目录

    • 一、模板引擎
      • 1、什么是模板引擎
      • 2、模板引擎安装
    • 二、Node中使用模板引擎
      • 1、基本介绍
      • 2、基本使用步骤
      • 3、服务端渲染

一、模板引擎

1、什么是模板引擎

官方解释:art-template 是一个简约、超快的模板引擎。它采用作用域预声明的技术来优化模板渲染速度,从而获得接近 JavaScript 极限的运行性能,并且同时支持 NodeJS 和浏览器。

art-template 不仅可以在浏览器使用,也可以在node中使用
模板引擎 art-template 官网

2、模板引擎安装

安装步骤:npm install art-template(该命令在哪执行就把包下载到哪里,默认会下载到node_modules目录中,不要改路径也不支持改)

下载的文件夹中node_modules\lib\template-web.js 是给浏览器使用的,在浏览器中引用

强调:模板引擎不关心字符串内容,只关心自己能认识的模板标记语法,例如{{}}

实例一:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>模板引擎不关心内容</title>
  <script src="../node_modules/art-template/lib/template-web.js"></script>  
</head>
<body>
  <script type="text/template" id="tql">
    hello,{{msg}}
  </script>
  <script>
    var app = template("tql",{
      msg:"node"
    })
    console.log(app);  
  </script>
</body>
</html>

用Node实现简单的服务端渲染_第1张图片
实例二: 不会渲染出页面,全部解析为字符串输出

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>模板引擎不关心内容</title>
  <script src="../node_modules/art-template/lib/template-web.js"></script>  
</head>
<body>
  <script type="text/template" id="tql">
    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>模板引擎不关心内容</title>
    </head>
    <body>
      <h1>{{msg}}</h1>
    </body>
    </html>    
  </script>

  <script>
    var app = template("tql",{
      msg:"我是Node"
    })
    console.log(app);  
  </script>
</body>
</html>

用Node实现简单的服务端渲染_第2张图片

二、Node中使用模板引擎

1、基本介绍

在node中使用art-template模板引擎,模板引擎最早就是诞生于 服务端领域 ,后来才发展到了前端

2、基本使用步骤

1、安装:npm install art-template
2、加载:使用 require() 在需要使用的文件模块中加载 art-template
3、使用:查文档使用模板引擎的 API

//使用require方法加载,参数中的art-template就是下载的包的名字(install 的名字)
var template = require('art-template');

// template.render('模板字符串',替换对象)
var result = template.render('hello {{name}}',{
    name:'node'
})

console.log(result);

在这里插入图片描述

3、服务端渲染

(1)对于服务端渲染来说,客户端只请求了一次;对于客户端渲染来说,客户端请求了两次(整个页面需要刷新是服务端渲染)
(2)服务端渲染响应给给客户端的就是最后的结果,客户端不需要再做任何处理
(3)客户端渲染不利于 SEO 搜索引擎优化,服务端渲染目的是为了SEO 搜索引擎优化;服务端渲染是可以被爬虫抓取的,而客户端异步渲染是很难被爬虫抓取的;客户端异步渲染更快,可以局部刷新,用户体验更好

新手入门Node推荐先学习: 一篇文章让你轻松上手Node

00.html:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>模板引擎不关心内容</title>
  <script src="../node_modules/art-template/lib/template-web.js"></script>  
</head>
<body>
  <p>我是服务端渲染</p>
  <h4>hello {{msg}}</h4>
</body>
</html>

01.js:

//加载模块
var fs = require('fs');
var http = require('http');
var template = require('art-template');

//使用http.createServer() 方法创建一个Web服务器
var server = http.createServer();

//注册request请求事件设置回调处理函数
server.on('request',function(req,res) {

  //读取文件
  fs.readFile('./00.html',function(error,data) {
    var data = data.toString();
    if(error) {
      //设置编码
      res.setHeader('Content-Type','text/plain;charset=utf-8');
      res.end('读取文件失败,请稍后重试');
    }else { 
      //模板引擎
      var result = template.render(data,{
        msg:'node'
      });
      //渲染到页面
      res.end(result);
    }
  });
});

//绑定端口号,启动服务器
server.listen('8080',function() {
  console.log("服务器启动成功,请访问http://127.0.0.1:8080");  
});

在这里插入图片描述
用Node实现简单的服务端渲染_第3张图片

你可能感兴趣的:(Node)