其他章节请看：

前端学习 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. 鸟哥的linux私房菜——第九章学习（vim编辑器）

    第九章vim编辑器 1.0).vi与vim Linux下文本界面的文书编辑器通常会有常常听到的就有: emacs, pico, nano, joe, 与 vim 等等. vi的优势: 所有的 Unix ...

  2. WebGL Programming Guide All In One

    WebGL Programming Guide All In One WebGL WebGL Programming Guide All In One Publication date: July 2 ...

  3. toString()[0]

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

  4. ES Next & Arrow function & Promise & Iterator & Generator yield & Async Await

    ES Next & Arrow function & Promise & Iterator & Generator yield & Async Await co ...

  5. css & input type & search icon

    css & input type & search icon bug type="search" <input @input="autoSearch ...

  6. true && number !== boolean

    true && number !== boolean bug let result = ``; // section, name ? create text, compute cent ...

  7. Java审计之CMS中的那些反序列化漏洞

    Java审计之CMS中的那些反序列化漏洞 0x00 前言 过年这段时间比较无聊,找了一套源码审计了一下,发现几个有意思的点拿出来给分享一下. 0x01 XStream 反序列化漏洞 下载源码下来发现并 ...

  8. Vue 组件的通信方式都有哪些？

    说一下 Vue 组件的通信方式都有哪些?(父子组件,兄弟组件,多级嵌套组件等等) 一.父组件向子组件传值 二.子组件向父组件传值 三.兄弟组件传值 四.跨组件 一.父组件向子组件传值 1.1props ...

  9. ASP.NET Core WebApi版本控制

    前言: 在日常项目开发中,随着项目需求不断的累加.不断的迭代:项目服务接口需要向下兼容历史版本:前些时候就因为Api接口为做版本管理导致接口对低版本兼容处理不友好. 最近就像了解下如何实现WebApi ...

  10. spring-ioc心得

    1.创建spring容器,严格的来说就是创建ClassPathXmlApplicationContext对象, 该对象属于ApplicationContext类型(是一个接口)该接口下有很多实现类, ...