正文

node学习-3:服务器渲染和客户端渲染(代码片段)

坚持不懈的大白  坚持不懈的大白  2023-03-06  498

关键词：

1. 概念

一.服务端渲染，后端嵌套模板，后端渲染模板，SSR（后端把页面组装好）

1. 做好静态页面，动态效果
1. 把前端代码提供给后端，后端则把静态html以及里面的假数据给删除掉

通过模板进行动态生成html的内容

二.前后端分离(应该是客户端渲染)，BSR（前端组装页面）

1. 做好静态页面，动态效果
1. json模拟，ajax动态创建页面
1. 真实接口数据，前后联调
1. 把前端提供给后端静态资源文件夹

2. 客户端渲染(前后端分离)

意思就是后端把写好的接口给前端，前端发起ajax请求获取接口的数据，从而渲染界面。
这种做的界面通常查看它的源代码基本上查看不到相关数据字段信息，只能看到一些js代码或者导入js文件的script标签(做爬虫的直接爬取当前界面当然获取不到想要的信息啦！要想获取到信息，找到相应的接口很关键)。

比如：酷狗音乐平台的播放音乐界面，如果读者查看它的界面的源代码，可以发现当前播放的音乐下载链接及歌词信息在源代码中找不到，因为这个界面涉及到前后端分离(部分，还是全部就不知道了)。如果想找到上述提到的哪些数据信息，只能找到相应的接口。

接口在这：

其实，从某些方面讲，这个界面用服务端渲染简单多了，而且也没有必要做接口哪些操作啊！可能是酷狗为了防止一些音乐资源被爬虫下载吧！(猜测而已)

用node实现：
就是在一个界面发起ajax请求访问一个接口，然后把数据显示在界面。
前端代码：

<!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>测试</title>
</head>
<body>
    <ul class="list">

    </ul>
</body>
    <script type="text/javascript">
        fetch('/ceshi/list').then((res)=>
            return res.json();
        )
        .then((res)=>
            console.log(res);
            render(res);
        )

        function render(arr)
            let list_ele = document.querySelector('.list');
            let list = arr.map(ele=>`<li>$ele</li>`);
            list_ele.innerHTML = list.join("");
        
    </script>
</html>

效果：

3. 服务端渲染

服务端渲染的界面通常有一个这样的效果，就是查看界面的源代码，发现能找到我们在界面上能看到的数据信息。(做爬虫的话直接访问当前界面，然后利用解析模块解析相应数据即可)
比如：去哪儿网景点界面(至于有没有一部分前后端分离就不清楚了)

界面源代码：

nodejs代码：
这是其中一个路由中间件代码：

const express = require('express');
const router = express.Router();

// 响应前端的get请求
router.get('/get',(req,res)=>
    console.log(req.query);
    // 获取请求参数
    res.send('登录get请求');
)

// 响应前端的post请求
router.post('/post', (req, res) => 
    console.log(req.body);
    // 必须注册中间件
    res.send('登录post请求');
)

// 测试   ejs学习
router.get('/list',(req,res)=>
    res.send([1,2,3,4,5,6,76]);
)

router.get('/login',function(req,res)
    res.render('login',
        error:"",
        isShow:false
    );
);

router.get('/home',(req,res)=>
    let arr = ['abc','123','edbef'];
    res.render('home',
        list:arr
    );
);

router.post('/postLogin',function(req,res)
    const body_2 = req.body;
    console.log(body_2);
    if(body_2['username'] == 'liuze' && body_2['password'] == 'sxx123')
        console.log('登录成功！');
        res.redirect('/ceshi/home');
    else
        console.log('登录失败！');
        res.render('login',
            error:'账号、密码输入错误！',
            isShow:true
        );
    
)


module.exports = router;

这是一个ejs界面文件代码：

<!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>home页面</title>
</head>
<body>
    home页面
    <ul>
        <%
        for(var i=0;i<list.length;i++)
        %>
        <li><%=list[i]%></li>
        <%%>
    </ul>
</body>
</html>

访问的链接是:http://localhost:3000/ceshi/home
运行结果如下：

node.js学习目录

...范7.实现apache功能8.在node中使用模板引擎9.服务端渲染和客户端渲染10.处理网站中的静态资源11.留言本案例12.Node中的console、each和forEach13.Node中的模块系统14.package.json和npm15.Expres 查看详情

前端面试题之渲染原理(代码片段)

...中输入url后，浏览器经历了什么样的过程？客户端根据DNS服务器得到域名对应的ip地址；客户端向该ip地址发送http请求；服务器端收到、处理并返回http请求；客户端收到响应并返回内容。客户端渲染浏览器收到的其实就是HTML文... 查看详情

node.js 将客户端渲染代码发送到服务器端，例如发布请求

】node.js将客户端渲染代码发送到服务器端，例如发布请求【英文标题】：node.jssendingclientsiderenderedcodetoserversideliketopostrequest【发布时间】：2020-07-1217:52:46【问题描述】：js和javascript...我在如何将数组值从客户端.js文件发送到服务... 查看详情

node--处理一个增加上传操作和渲染页数条(代码片段)

一段学习的结束我也不知道我这是在写些什么，只是觉得学完了一些东西，就是想把它记录一下，这样我就可以知道我是学过这一块的，要多激励自己，^^O(∩∩)O哈哈~以下内容并不完全与标题匹配，不过以下内容综合了前面几... 查看详情

我的opengl学习进阶之旅egl简介(代码片段)

目录一、EGL简介1.1OpenGLES命令需要渲染上下文和绘制表面1.2EGL是什么？1.3OpenGLES应用程序渲染之前使用EGL执行的任务1.4EGL版本1.5使用OpenGLES3.0编程1.6库和包含文件1.7EGL命令语法二、EGL提供的机制三、EGL相关API介绍3.1与窗口系统... 查看详情

angular10预渲染实践笔记(代码片段)

...之服务端渲染Angular预渲染实践【Angular项目实战】Angular5服务器渲染（SSR）ssr(angular)相关小笔记目的：基于Angular的服务端渲染和预渲染功能来生成多页静态页面。理解Angular服务端渲染和预渲染AngularUniversal会在服务端... 查看详情

unityrenderstreaming云渲染企业项目解决方案(代码片段)

...章目录UnityRenderStreaming前言效果展示打开场景版本选择Web服务器1.Server下载，Node.js安装2.Server启动Unity项目设置1.安装RenderStreaming2.安装WebRTC3.RenderStreaming设置4.音频传输（根据自己需求添加）5.Unity启动测试交互1.基础交... 查看详情

nuxtjs实现服务端渲染和静态化站点(代码片段)

...(SSR)。它本质上是一个Vue框架，增加一层node服务，通过对客户端/服务端的抽象封装，使用Nuxt各种资源配置，处理服务端渲染。除了服务端渲染以外，Nuxtjs还提供生成静态化站点的能力。使用Nuxtjs当我们需要进行SSR服务端渲染处... 查看详情

在 node.js 中使用 fabric.js 渲染和操作服务器端画布

】在node.js中使用fabric.js渲染和操作服务器端画布【英文标题】：Usingfabric.jstorenderandmanipulateserver-sidecanvasinnode.js【发布时间】：2012-12-0107:34:52【问题描述】：我正在尝试将fabric.js（v0.9.21，在ubuntu12.04上通过npm安装）与node.js一起在... 查看详情

浏览器渲染原理(代码片段)

...是浏览器渲染过程。输入url，会有一个dms解析，然后发到服务器，服务器再响应，响应过来，到了客户端，浏览器这边就开始渲染过程。3、重排Reflow4、重绘Repaint5、布局Layout这个和css布局不同，这个是浏览器的布局方式。这五... 查看详情

服务端渲染和客户端渲染

...展到了前端客户端渲染过程1.浏览器发出请求，收到服务器响应的html页面字符串(含模板引擎)2.浏览器从上到下依次解析该页面3.在解析过程中发现ajax异步请求，则再次发起新的请求，请求获得数据4.用服务器的响应结... 查看详情

我的渲染技术进阶之旅什么是aabb？(代码片段)

文章目录一、为什么要学习AABB？二、搜索到的AABB相关资料三、正式介绍AABB3.1什么是AABB？3.2AABB的作用3.3点与AABB3.4AABB与AABB3.5球体碰撞3.5.1点与球3.5.2球体与球体3.5.2球体与AABB3.6AABB和其他的包围体一、为什么要学习AABB？在上一篇... 查看详情

我的渲染技术进阶之旅什么是aabb？(代码片段)

游览器渲染浅析(代码片段)

...：FireFox解析前的工作DNS域名解析建立TCP连接发送HTTP请求服务器处理请求返回响应结果关闭TCP连接浏览器解析关键渲染路径浏览器从最初接收请求来的HTML、CSS、javascript等资源，然后解析、构建树、渲染布局、绘制，最后呈现给... 查看详情

浏览器的渲染(代码片段)

...渲染一个页面发生的五件事DNS查询TCP链接HTTP请求即响应服务器响应客户端渲染今天呢，主要讲一下第5部分，客户端的渲染，即浏览器对内容的渲染，浏览器是如何将内容渲染出来的呢？关键渲染路径首先，先来了解一下关键渲... 查看详情

androidopengles学习–渲染yuv视频以及视频抖音特效(代码片段)

OpenGL学习教程AndroidOpenGLES学习(一)–基本概念AndroidOpenGLES学习(二)–图形渲染管线和GLSLAndroidOpenGLES学习(三)–绘制平面图形AndroidOpenGLES学习(四)–正交投影AndroidOpenGLES学习(五)–渐变色AndroidOpenGLES学习(六)–使用VBO、VAO和EBO/IBO优化... 查看详情

第三十四篇vue(代码片段)

总览什么是SSRSSR-服务端渲染Vue.js是一个用于构建客户端应用的框架。默认情况下，Vue组件的职责是在浏览器中生成和操作DOMVue也支持将组件在服务端直接渲染成HTML字符串，作为服务端响应返回给浏览器，最后在浏览器端将静态... 查看详情