当前位置： 首页 > news >正文

node学习-3:服务器渲染和客户端渲染

news 2026/1/16 20:57:56

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学习-3:服务器渲染和客户端渲染

1. 概念 一.服务端渲染&#xff0c;后端嵌套模板&#xff0c;后端渲染模板&#xff0c;SSR&#xff08;后端把页面组装好&#xff09; 做好静态页面&#xff0c;动态效果 把前端代码提供给后端&#xff0c;后端则把静态html以及里面的假数据给删除掉 通过模板进行动态生成h…...

编程日记 2023/2/16 18:26:25

LeetCode刷题笔记和周赛题解总目录

之前一段时间一直在刷LeetCode&#xff0c;在上面积累了很多笔记&#xff0c;这些笔记是做题过程中的一些重要积累和心得&#xff0c;现在将它们汇总和总结至此&#xff0c;此博客将不断更新。 刷题笔记(提供md和pdf两种格式可供下载&#xff0c;不断更新) LeetCode刷题笔记 …...

编程日记 2023/2/16 18:25:15

用类比方式学习编程中函数递归（个人理解仅供参考）（内含汉诺塔问题的求解）

目录 1.前言 2.递归的数学模型 3.相关的c语法 4.将递归的数学模型写成编程语言 5.利用类比方法将实际问题的代码写成函数递归的形式 例1: 例2: 6.汉诺塔问题的求解 1.前言 本人在学习函数递归编程方法的过程中&#xff0c;发现用类比的方式学习递归法可帮助我们在各种编…...

编程日记 2023/2/16 18:24:05

【云原生之Docker实战】使用Docker部署Taskover开源个人任务管理工具

【云原生之Docker实战】使用Docker部署Taskover 开源个人任务管理工具 一、Taskover介绍1.Taskover 简介2.Taskover功能二、检查本地docker环境1.检查系统版本2.检查docker版本3.检查docker状态4.检查docker compose版本三、下载Taskover镜像四、部署Taskover应用1.创建安装目录…...

编程日记 2023/2/16 18:22:56

5、SQL编程开发与注意事项

1.1 导入数据 导入测试库： 文档地址： https://dev.mysql.com/doc/employee/en/sakila-structure.html下载地址： https://github.com/datacharmer/test_db导入测试库： mysql -uroot -p -S < employees.sql 1.2 库操作 增：create database test character set utf8;删：d…...

编程日记 2023/2/16 18:21:46

Allegro如何通过视图显示区分动态和静态铜皮操作指导

Allegro如何通过视图显示区分动态和静态铜皮操作指导 用Allegro做PCB设计的时候，通常动态和静态铜皮是无法通过视图显示区分的，只能通过show element查看得知，如下图 左边铜皮是动态铜皮，右边是静态铜皮 但Allegro可以通过一些设置让动静态铜皮以不同效果显示出来 具体操…...

编程日记 2023/2/16 18:20:36

测试开发之Django实战示例 第十一章 渲染和缓存课程内容

第十一章 渲染和缓存课程内容在上一章中&#xff0c;使用了模型继承和通用关系建立弹性的课程、章节和内容的关联数据模型&#xff0c;并且建立了一个CMS系统&#xff0c;在其中使用了CBV&#xff0c;表单集和AJAX管理课程内容。在这一章将要做的事情是&#xff1a;创建公开对外…...

编程日记 2023/2/16 18:19:26

90%企业在探索的敏捷开发怎么做？极狐GitLab总结了这些逻辑与流程

本文来自&#xff1a; 彭亮 极狐(GitLab) 高级产品经理 毛超 极狐(GitLab) 研发工程师 极狐(GitLab) 市场部内容团队 “敏捷” 是指能够驾驭变化&#xff0c;保持组织竞争优势的一种能力。自 2001 年《敏捷宣言》以来&#xff0c;敏捷及敏捷开发理念逐渐席卷全球。中国信通院《…...

编程日记 2023/2/16 18:18:18

LeetCode-257. 二叉树的所有路径

目录题目分析递归法题目来源 257. 二叉树的所有路径 题目分析 前序遍历以及回溯的过程如图&#xff1a; 递归法 1.递归函数参数以及返回值 要传入根节点&#xff0c;记录每一条路径的path&#xff0c;和存放结果集的result&#xff0c;这里递归不需要返回值&#xff0c;代…...

编程日记 2023/2/16 18:17:09

测试用例该怎么设计？—— 日常加更篇（下）

&#x1f60f;作者简介&#xff1a;博主是一位测试管理者&#xff0c;同时也是一名对外企业兼职讲师。 &#x1f4e1;主页地址&#xff1a;【Austin_zhai】 &#x1f646;目的与景愿&#xff1a;旨在于能帮助更多的测试行业人员提升软硬技能&#xff0c;分享行业相关最新信息。…...

编程日记 2023/2/16 18:15:59

Java基础:接口

1.接口的概念 当不是所有子类, 而是多个子类都包含一个方法时, 为了代码书写规范性, 可以用自定义的接口来统一该方法的书写规范. 所以接口可以看作是一种书写规则. 接口是对行为的抽象 抽象类一般是书写在父类当中, 接口是单独书写的, 不是一种类 2.接口的定义和使用 3.接口…...

编程日记 2023/2/16 18:14:49

vuex基础入门:uniapp实现用户登录授权实战

1.背景 vuex是数据共享方案之一,本文以微信小程序登录授权为例介绍一下vuex常用属性state、getters、mutations、actions. 2.基于uniapp实现微信小程序登录授权流程 1.凡是需要用户登录授权信息的页面创建时created方法中需要判断用户是否登录,需要使用本地缓存的token调用服务…...

编程日记 2023/2/16 18:12:37

Windows系统从权限维持角度进行应急响应

一、基本介绍 红队攻击者在对目标进行渗透利用后通常都会进行权限维持&#xff0c;以达到持续利用的目的。而作为防守方进行应急响应时&#xff0c;应该如何与技术高超&#xff08;jiaohuajianzha&#xff09;的攻击者斗智斗勇呢&#xff1f;或许可以通过本文可以找到答案。以…...

编程日记 2023/2/16 18:11:27

什么是DNS解析？如何提升DNS解析安全？

DNS解析是保障网站正常运行的一项重要服务&#xff0c;DNS解析出现故障&#xff0c;就会导致网站无法被访问或者被劫持到其他的站点&#xff0c;对业务正常开展造成很大影响&#xff0c;因此网站管理人员要高度关注DNS解析的安全&#xff0c;才能确保网站的正常运转&#xff0c…...

编程日记 2023/2/16 18:10:18

电路学习笔记

电源部分 2s锂电池 6.4v-8.4v INA180A2IDBVR 电流检测放大器 OUT ADC1_CH0 to ESP32 可能功能&#xff1a;电源电流监测 稳压/电压监测 OUT ADC1_CH1 to ESP32 降压至2.046v-2.686v并通过电容保持稳定 可能功能&#xff1a;降压模块,电压监测 LDO ASM1117-3.3 低压差线性…...

编程日记 2023/2/16 18:09:07

C# 数据结构

目录 一、介绍 二、数组 三、List&#xff08;列表&#xff09; 四、Dictionary&#xff08;字典&#xff09; 五、Queue&#xff08;队列&#xff09; 六、Stack&#xff08;栈&#xff09; 七、Hashtable&#xff08;哈希表&#xff09; 结束 一、介绍 数据结构是计…...

编程日记 2023/2/16 18:07:56

powerjob的worker启动，研究完了这块代码之后我发现了，代码就是现实中我们码农的真实写照

这是一篇让你受益匪浅的文章&#xff0c;代码即使人生。 worker启动比server启动要复杂一些&#xff0c;毕竟worker是要实际干活的&#xff0c;工欲善其事必先利其器&#xff0c;所以需要准备的工具还是不能少的&#xff0c;server对于powerjob来说&#xff0c;只是一个调度用的…...

编程日记 2023/2/16 18:06:47

配置Qt Creator

前言 为了使Qt Creator更像您最喜欢的代码编辑器或IDE&#xff0c;您可以更改键盘快捷键、配色方案、通用高亮显示、代码片段和版本控制系统的设置。 检查生成和运行设置 Qt Creator是一个集成开发环境(IDE)&#xff0c;可以用来开发Qt应用程序。虽然您可以使用Qt Installer…...

编程日记 2023/2/16 18:05:36

C++-类和对象（下）

C-类和对象&#xff08;下&#xff09;一&#xff0c;const成员函数二&#xff0c;再谈构造函数1&#xff0c;初始化列表2&#xff0c;explicit关键字三&#xff0c;static成员四&#xff0c;友元&#xff08;friend&#xff09;1&#xff0c;全局函数做友元2&#xff0c;类做友…...

编程日记 2023/2/16 18:04:25

什么是仓库管理?

仓库管理包括仓库日常运营所触及的准绳和流程。从较高的层次上讲&#xff0c;这包括接纳和组织仓库空间、布置劳动力、管理库存和完成订单。放大来看&#xff0c;你会发现有效的仓库管理触及到优化和集成这些过程中的每一个&#xff0c;以确保仓库操作的一切方面协同工作&#…...

编程日记 2023/2/16 18:03:16

AI-调查研究-01-正念冥想有用吗？对健康的影响及科学指南

点一下关注吧&#xff01;&#xff01;&#xff01;非常感谢&#xff01;&#xff01;持续更新&#xff01;&#xff01;&#xff01; &#x1f680; AI篇持续更新中&#xff01;&#xff08;长期更新&#xff09; 目前2025年06月05日更新到&#xff1a; AI炼丹日志-28 - Aud…...

编程新知 2026/1/16 3:47:03

国防科技大学计算机基础课程笔记02信息编码

1.机内码和国标码 国标码就是我们非常熟悉的这个GB2312,但是因为都是16进制&#xff0c;因此这个了16进制的数据既可以翻译成为这个机器码&#xff0c;也可以翻译成为这个国标码&#xff0c;所以这个时候很容易会出现这个歧义的情况&#xff1b; 因此&#xff0c;我们的这个国…...

编程新知 2026/1/15 0:15:02

工业安全零事故的智能守护者：一体化AI智能安防平台

前言&#xff1a; 通过AI视觉技术&#xff0c;为船厂提供全面的安全监控解决方案&#xff0c;涵盖交通违规检测、起重机轨道安全、非法入侵检测、盗窃防范、安全规范执行监控等多个方面&#xff0c;能够实现对应负责人反馈机制&#xff0c;并最终实现数据的统计报表。提升船厂…...

编程新知 2026/1/15 5:22:21

23-Oracle 23 ai 区块链表（Blockchain Table）

小伙伴有没有在金融强合规的领域中遇见&#xff0c;必须要保持数据不可变&#xff0c;管理员都无法修改和留痕的要求。比如医疗的电子病历中&#xff0c;影像检查检验结果不可篡改行的&#xff0c;药品追溯过程中数据只可插入无法删除的特性需求&#xff1b;登录日志、修改日志…...

编程新知 2026/1/15 4:24:33

《用户共鸣指数（E）驱动品牌大模型种草：如何抢占大模型搜索结果情感高地》

在注意力分散、内容高度同质化的时代&#xff0c;情感连接已成为品牌破圈的关键通道。我们在服务大量品牌客户的过程中发现&#xff0c;消费者对内容的“有感”程度&#xff0c;正日益成为影响品牌传播效率与转化率的核心变量。在生成式AI驱动的内容生成与推荐环境中&#xff0…...

编程新知 2026/1/15 4:25:38

相机Camera日志分析之三十一：高通Camx HAL十种流程基础分析关键字汇总（后续持续更新中）

【关注我，后续持续新增专题博文，谢谢！！！】 上一篇我们讲了：有对最普通的场景进行各个日志注释讲解，但相机场景太多，日志差异也巨大。后面将展示各种场景下的日志。 通过notepad++打开场景下的日志，通过下列分类关键字搜索，即可清晰的分析不同场景的相机运行流程差异…...

编程新知 2025/11/20 7:13:43

2023赣州旅游投资集团

单选题 1.“不登高山&#xff0c;不知天之高也&#xff1b;不临深溪&#xff0c;不知地之厚也。”这句话说明_____。 A、人的意识具有创造性 B、人的认识是独立于实践之外的 C、实践在认识过程中具有决定作用 D、人的一切知识都是从直接经验中获得的 参考答案: C 本题解…...

编程新知 2025/11/8 16:42:13

【Go语言基础【13】】函数、闭包、方法

文章目录 零、概述一、函数基础1、函数基础概念2、参数传递机制3、返回值特性3.1. 多返回值3.2. 命名返回值3.3. 错误处理 二、函数类型与高阶函数1. 函数类型定义2. 高阶函数&#xff08;函数作为参数、返回值&#xff09; 三、匿名函数与闭包1. 匿名函数&#xff08;Lambda函…...

编程新知 2025/12/8 19:02:25

人机融合智能 | “人智交互”跨学科新领域

本文系统地提出基于“以人为中心AI(HCAI)”理念的人-人工智能交互(人智交互)这一跨学科新领域及框架,定义人智交互领域的理念、基本理论和关键问题、方法、开发流程和参与团队等,阐述提出人智交互新领域的意义。然后,提出人智交互研究的三种新范式取向以及它们的意义。最后,总结…...

编程新知 2026/1/15 10:34:02

C++ 设计模式 《小明的奶茶加料风波》

&#x1f468;‍&#x1f393; 模式名称&#xff1a;装饰器模式&#xff08;Decorator Pattern&#xff09; &#x1f466; 小明最近上线了校园奶茶配送功能&#xff0c;业务火爆&#xff0c;大家都在加料&#xff1a; 有的同学要加波霸 &#x1f7e4;&#xff0c;有的要加椰果…...

编程新知 2026/1/15 5:02:39