Node.js学习（四）服务端渲染

最新推荐文章于 2024-09-12 09:30:00 发布

June.1

最新推荐文章于 2024-09-12 09:30:00 发布

阅读量626

点赞数 1

分类专栏： Node.js 文章标签：服务端渲染

本文链接：https://blog.csdn.net/qq_39043923/article/details/89224688

版权

Node.js 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

art-template 不仅可以在浏览器使用，也可以在 node 中使用

安装

该命令在哪执行就会把包下载到哪里。默认会下载到 node_modules 目录中
node_modules 不要改，也不支持改。

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

安装 npm install art-template
在需要使用的文件模块中加载 art-template

只需要使用 require 方法加载就可以了：require('art-template')
参数中的 art-template 就是你下载的包的名字
也就是说你 install 的名字是什么，则你 require 中的就是什么
查文档，使用模板引擎的 API

服务端应用

template.render(source, data,options)
source: 资源数据包也就是页面含变量,
data :需要替换的变量值
options：可选项

<!-- tpl.html -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>{{title}}</title>
</head>
<body>
  <p>大家好，我叫：{{ name }}</p>
  <p>我今年 {{ age }} 岁了</p>
  <h1>我来自 {{ province }}</h1>
  <!-- each 遍历数组 $value为数据-->
  <p>我喜欢：{{each hobbies}} {{ $value }} {{/each}}</p>
</body>
</html>
<script>
	//模版引擎不关心语法,只关心标记位置
	var title ='{{title}}'
</script>

// 这里不是浏览器
// template('script 标签 id', {对象})

// var tplStr = `
// <!DOCTYPE html>
// <html lang="en">
// <head>
//   <meta charset="UTF-8">
//   <title>Document</title>
// </head>
// <body>
//   <p>大家好，我叫：{{ name }}</p>
//   <p>我今年 {{ age }} 岁了</p>
//   <h1>我来自 {{ province }}</h1>
//   <p>我喜欢：{{each hobbies}} {{ $value }} {{/each}}</p>
// </body>
// </html>
// `

fs.readFile('./tpl.html', function (err, data) {
  if (err) {
    return console.log('读取文件失败,需要显示的页面')
  }
  // 默认读取到的 data 是二进制数据, 而模板引擎的 render 方法需要接收的是字符串
  // 所以我们在这里需要把 data 二进制数据转为 字符串 才可以给模板引擎使用
  var ret = template.render(data.toString(), {
    name: 'Jack',
    age: 18,
    province: '北京市',
    hobbies: [
      '写代码',
      '唱歌',
      '打游戏'
    ],
    title: '个人信息'
  })

  console.log(ret)
})

服务端渲染和客户端渲染区别：

比如京东的商品列表是服务端渲染,网页有页面数据的源代码。评论系统则看不到源代码就是客户端渲染。那么为什么这么做有什么优缺点?

其实,服务端渲染相当于拉取所有页面数据到浏览器的时候具有完整的数据信息,爬虫可以爬取到页面数据信息。优势在于可以在SEO搜索优化方面更好,缺点就是页面拉取数据量繁多导致页面加载比较慢,用户体验相对差。
相反,客户端渲染优势在于异步操作数据无需更多刷新就展示到客户端,用户体验非常好。那么搜索引擎就比较差了。