其他章节请看:

前端学习 node 快速入门 系列

服务端渲染

简易版 Apache一文中,我们用 node 做了一个简单的服务器,能提供静态资源访问的能力。

对于真正的网站,页面中的数据应该来自服务器(服务器查询数据库),我们来模拟一下。请看示例:

- demo
- node_modules // 安装 art-template 后自动生成
- public
- lib
- art-template // 将 node_modules/art-template 拷贝过来即可
- view
- client-render.html // 页面内容采用客户端渲染
- server-render.html // 页面内容采用服务端渲染
- index.js // 入口文件
- package.json // 只依赖于 art-template

:如果不明白 node_modules、package.json,可以看我的另外一篇文章(npm

client-render.html:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src='/public/lib/art-template/lib/template-web.js'></script>
</head>
<body>
<h2>客户端渲染</h2>
<div id="content"></div>
<script id="test" type="text/html">
<p>{{title}}</p>
<ul>
{{each list as value i}}
<li>索引 {{i + 1}} :{{value}}</li>
{{/each}}
</ul>
</script>
<script>
var data = {
title: '标签',
list: ['文艺', '博客', '摄影']
};
// 前端使用模板引擎
var html = template('test', data);
document.getElementById('content').innerHTML = html;
</script>
</body>
</html>

server-render.html:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h2>服务端渲染</h2> <p>{{title}}</p>
<ul>
{{each list as value i}}
<li>索引 {{i + 1}} :{{value}}</li>
{{/each}}
</ul>
</body>
</html>

index.js:

const http = require('http')
const fs = require('fs')
const template = require('art-template')
const server = http.createServer() const requestListener = (req, res) => {
let url = req.url
// 客户端渲染
if(url.endsWith('client-render.html')){
fs.readFile('./public/view/' + url, (err, data) => {
if (err) throw err;
res.end(data)
});
return
}
// 服务端渲染
if(url.endsWith('server-render.html')){
fs.readFile('./public/view/' + url, (err, data) => {
if (err) throw err;
// 服务端使用模板引擎
const ret = template.render(data.toString(), {
title: '标签',
list: ['文艺', '博客', '摄影']
});
res.end(ret)
});
return
}
fs.readFile('.' + url, (err, data) => {
if (err) {
res.writeHead(404, {'Content-type':'text/html;charset=utf8'})
res.end('没有找到对应的资源')
}
res.end(data)
})
} server.on('request', requestListener)
server.listen('3000', () => {
console.log('服务器已启动')
})

启动服务器:

$ node index

访问:

1. 浏览器输入 http://localhost:3000/server-render.html

页面显示:<是有样式的>
服务端渲染
标签 索引 1 :文艺
索引 2 :博客
索引 3 :摄影 2. 浏览器输入 http://localhost:3000/client-render.html
页面显示:<与 server-render.html 相同>

虽然两个页面看起来相同,但一个是客户端渲染,一个是服务端渲染

Tip:模板引擎是为了使用户界面和业务数据分离而产生的,它可以生成特定格式的文档。模板引擎最初出现在服务端。

这里使用的模板引擎是 art-template。模板引擎应用在客户端就是客户端渲染;模板引擎应用在服务端就是服务端渲染。更直观的区分,如果源码(浏览器快捷键:ctrl+u)中可以找到前端页面的文字,则说明是服务端渲染,否则是客户端渲染。

:网站通常既有客户端渲染,也有服务端渲染。例如当当网、京东这类电商网站,商品通常使用服务端渲染,因为商品需要被搜索引擎看见;而评论、试读则会使用客户端渲染。

其他章节请看:

前端学习 node 快速入门 系列

前端学习 node 快速入门 系列 —— 服务端渲染的更多相关文章

  1. 前端学习 node 快速入门 系列 —— 初步认识 node

    其他章节请看: 前端学习 node 快速入门 系列 初步认识 node node 是什么 node(或者称node.js)是 javaScript(以下简称js) 运行时的一个环境.不是一门语言. 以 ...

  2. 前端学习 node 快速入门 系列 —— 简易版 Apache

    其他章节请看: 前端学习 node 快速入门 系列 简易版 Apache 我们用 node 来实现一个简易版的 Apache:提供静态资源访问的能力. 实现 直接上代码. - demo - stati ...

  3. 前端学习 node 快速入门 系列 —— 报名系统 - [express]

    其他章节请看: 前端学习 node 快速入门 系列 报名系统 - [express] 最简单的报名系统: 只有两个页面 人员信息列表页:展示已报名的人员信息列表.里面有一个报名按钮,点击按钮则会跳转到 ...

  4. 前端学习 node 快速入门 系列 —— npm

    其他章节请看: 前端学习 node 快速入门 系列 npm npm 是什么 npm 是 node 的包管理器,绝大多数 javascript 相关的包都放在 npm 上. 所谓包,就是别人提供出来供他 ...

  5. 前端学习 node 快速入门 系列 —— 模块(module)

    其他章节请看: 前端学习 node 快速入门 系列 模块(module) 模块的导入 核心模块 在 初步认识 node 这篇文章中,我们在读文件的例子中用到了 require('fs'),在写最简单的 ...

  6. 前端用node+mysql实现简单服务端

    node express + mysql实现简单服务端前端新人想写服务端不想学PHP等后端语言怎么办,那就用js写后台吧!这也是我这个前端新人的学习成果分享,如有那些地方不对,请给我指出. 1.准备工 ...

  7. Vue.js与 ASP.NET Core 服务端渲染功能整合

    http://mgyongyosi.com/2016/Vuejs-server-side-rendering-with-aspnet-core/ 原作者:Mihály Gyöngyösi 译者:oop ...

  8. NET Core 与 Vue.js 服务端渲染

    NET Core 与 Vue.js 服务端渲染 http://mgyongyosi.com/2016/Vuejs-server-side-rendering-with-aspnet-core/原作者: ...

  9. vue服务端渲染之nuxtjs

    前言 本篇主要针对nuxtjs中的一些重要概念整理和代码实现! 在学习vue服务端渲染之前,先搞清楚几个概念: 什么是客户端渲染(CSR) 什么是服务端渲染(SSR) CSR和SSR有什么异同 客户端 ...

随机推荐

  1. UESTC - 1222 Sudoku(深搜)

    Yi Sima was one of the best counselors of Cao Cao. He likes to play a funny game himself. It looks l ...

  2. Inkscape tricks

    Draw straight lines: click pencil button -> click once on your canvas(starting point) -> click ...

  3. H5 广告落地页

    H5 广告落地页 Landing Page 用于承接通过付费搜索渠道点击进入的用户,所以叫落地页 什么是登陆页面? 在数字营销中,登录页面是专门为营销或广告活动创建的独立网页. 访问者单击电子邮件中的 ...

  4. Elastic Search 原理剖析

    Elastic Search 原理剖析 Elasticsearch 是一个开源的分布式 RESTful 搜索和分析引擎,能够解决越来越多不同的应用场景. 搜索引擎 refs https://www.e ...

  5. PEP 8 & Style Guide

    PEP 8 & Style Guide Style Guide for Python Code https://www.python.org/dev/peps/pep-0008/ PEP Py ...

  6. 如何使用 iMovie 去除视频里面的声音

    如何使用 iMovie 去除视频里面的声音 视频去除背景音 iMovie https://www.apple.com/imovie/ https://books.apple.com/book/id14 ...

  7. Learning JavaScript with MDN & 使用 MDN 学习 JavaScript

    Learning JavaScript with MDN & 使用 MDN 学习 JavaScript Learn JavaScript with MDN 和 MDN 一起学习 JavaScr ...

  8. toString()[0]

    toString()[0] https://prepack.io/ x = `A` //"A" x.toString()[0] //"A" x.toString ...

  9. nasm astricmp函数 x86

    xxx.asm: %define p1 ebp+8 %define p2 ebp+12 %define p3 ebp+16 section .text global dllmain export as ...

  10. Masterboxan INC:OPEC+达成产量协议 产油联盟内部分歧逐步加大

    本周,"OPEC+"在维也纳召开了今年首次部长级会议,并就未来两个月的石油生产计划达成协议.据了解,此次会议的协商过程可谓一波三折,虽然最后沙特意外宣布减产维持了OPEC+大体产量 ...