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

http响应练习—在服务器端渲染html（SSR）

news 2026/2/1 19:19:21

一、什么是服务器端渲染（SSR）

简单说，就是在服务器上把网页生成好，整个的HTML页面生成出来，生成出的页面已经包含了所有必要的数据和结构信息，然后直接发给浏览器进行展现。

二、例题

要求搭建http服务，响应一个4行3列的表格，并且表格隔行换色，点击单元格后相应单元格会单独变色显示

（1）普通版写法：直接在html中写入css与js样式

思路：

(1)在建一个html文件，在里面写好htmlcssjs代码。

(2)通过fs去读取这个html文件，并且通过fs写入文件的方式写入到我们要运行的文件中

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><style>td{padding: 30px 30px;border-collapse: collapse;}tr:nth-child(odd){background-color: pink;}tr:nth-child(even){background-color: darksalmon;}</style>
</head>
<body><table border="1"><tr><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td></tr></table><script>var tds=document.querySelectorAll('td');tds.forEach(item =>{item.onclick=function(){this.style.backgroundColor="yellow";}});</script>
</body>
</html>
运行代码如图所示：
// 1.导入http模块
const http=require('http');
const fs=require('fs');
// 2.创建服务对象
const server=http.createServer((request,response)=>{let html=fs.readFileSync(__dirname+'/http响应练习普通版.html') //通过fs去读取这个html文件response.end(html);
})
// 3.监听端口，启动服务
server.listen(9000,()=>{console.log('服务已启动...');
})
运行结果如图所示：

（2）进阶版写法：创建css、js夹子进行文件分类​​​​​​​。利用if分支进行不同文件的读取写入

思路：

(1)分别建一个html、css、js文件，在里面写好html、css、js代码。

(2)通过不同的if分支结构去通过fs去读取不同的文件，并且通过fs写入文件的方式写入到我们要运行的文件中

文件夹创建如图所示：

故：

html对应pathname是 " / "​​​​​​​

css对应pathname是/css/http.css

​​​​​​​css对应pathname是/js/http.js

运行代码如图所示：
// 1.导入http模块
const http = require('http');
const fs = require('fs');
// 2.创建服务对象
const server = http.createServer((request, response) => {// 获取请求url路径let { pathname } = new URL(request.url, 'http://127.0.0.1');if (pathname === '/') {// 读取文件内容let html = fs.readFileSync(__dirname+'/http响应练习进阶版.html') //通过fs去读取这个html文件response.end(html);} else if (pathname === '/css/http.css') {// 读取文件内容let css = fs.readFileSync(__dirname+'/css/http.css') //通过fs去读取这个html文件response.end(css);} else if (pathname === '/js/http.js') {// 读取文件内容let js = fs.readFileSync(__dirname+'/js/http.js') //通过fs去读取这个html文件response.end(js);} else {response.statusCode = 404;response.end('<h1>404 NOT FOUND</h1>')}
})// 3.监听端口，启动服务
server.listen(9000, () => {console.log('服务已启动...');
})
运行结果如图所示： 

 

相关文章：

http响应练习—在服务器端渲染html（SSR）

一、什么是服务器端渲染&#xff08;SSR&#xff09; 简单说&#xff0c;就是在服务器上把网页生成好&#xff0c;整个的HTML页面生成出来&#xff0c;生成出的页面已经包含了所有必要的数据和结构信息&#xff0c;然后直接发给浏览器进行展现。 二、例题 要求搭建http服务&a…...

编程日记 2024/3/31 20:33:55

C++(8): std::deque的使用

1. std::deque std::deque 是 C 标准库中的一个双端队列容器。这个容器支持在序列的两端进行快速的插入和删除操作&#xff0c;其时间复杂度为常数时间 O(1)。同时&#xff0c;std::deque 也提供了对序列中任意元素的随机访问。 2. 特点 &#xff08;1&#xff09;双端操作&…...

编程日记 2024/3/31 20:32:54

openwrt开发包含路由器基本功能的web问题记录

1.这里的扫描怎么实现的先找一些luci代码&#xff0c;在openwrt21版本后&#xff0c;luci用js替换了lua写后台&#xff0c;先找一些代码路径 在openrwt15这部分代码是在这个目录下 feeds/luci/modules/luci-mod-admin-full/luasrc/view/admin_network/wifi_join.htm 里面包含…...

编程日记 2024/3/31 20:31:52

HarmonyOS ArkTS 骨架屏加载显示（二十五）

目录 前言1、骨架屏代码显示2、代码中引用3、效果图展示 前言 所谓骨架屏&#xff0c;就是在页面进行耗时加载时&#xff0c;先展示的等待 UI, 以告知用户程序目前正在运行&#xff0c;稍等即可。 等待的UI大部分是 loading 转圈的弹窗&#xff0c;有的是自己风格的小动画。其实…...

编程日记 2024/3/31 20:30:51

Ruoyi-Cloud-Plus_使用Docker部署分布式微服务系统_环境准备_001---SpringCloud工作笔记200

1.首先安装docker: 如果以前安装过首先执行: yum remove docker docker-client docker-client-latest docker-common docker-latest docker-latest-logrotate docker-logrotate docker-selinux docker-engine-selinux docker-engine 去卸载docker 2.安装dokcer需要的工具包…...

编程日记 2024/3/31 20:29:49

RN封装的底部向上弹出的弹出层组件

组件代码 import React from react; import { View, StyleSheet, Modal, TouchableOpacity, Text, TouchableWithoutFeedback } from react-native;const BottomPopup ({ visible, onClose, children, leftButtonTitle, rightButtonTitle, onLeftButtonPress, onRightButtonP…...

编程日记 2024/3/31 20:23:45

基于深度学习YOLOv8+PyQt5的水底海底垃圾生物探测器检测识别系统（源码+数据集+配置说明）

wx供重浩&#xff1a;创享日记 对话框发送&#xff1a;323海底 获取完整源码7000张数据集配置说明文件说明远程操作配置环境跑通程序 效果展示 基于深度学习YOLOv8PyQt5的水底海底垃圾生物探测器检测识别系统设计&#xff08;源码数据集配置文件&#xff09; 各文件说明 程序运…...

编程日记 2024/3/31 20:19:41

SpringBoot集成WebSocket实现简单的多人聊天室

上代码—gitee下载地址&#xff1a; https://gitee.com/bestwater/Spring-websocket.git下载代码&#xff0c;连上数据库执行SQL&#xff0c;就可以运行&#xff0c;最终效果...

编程日记 2024/3/31 20:17:40

如何使用固定公网地址远程访问内网Axure RP生成的网站原型web页面

文章目录 前言1.在AxureRP中生成HTML文件2.配置IIS服务3.添加防火墙安全策略4.使用cpolar内网穿透实现公网访问4.1 登录cpolar web ui管理界面4.2 启动website隧道4.3 获取公网URL地址4.4. 公网远程访问内网web站点4.5 配置固定二级子域名公网访问内网web站点4.5.1创建一条固定…...

编程日记 2024/3/31 20:16:39

蓝桥杯习题

https://www.lanqiao.cn/problems/1265/learning/ 第一题---排序 给定一个长度为N的数组A&#xff0c;请你先从小到大输出它的每个元素&#xff0c;再从大到小输出他的每个元素。 输入描述&#xff1a; 第一行包含一个整数N 第二行包含N个整数a1,a2,a3,...an&#xff0c;表…...

编程日记 2024/3/31 20:15:38

AMS概念以及面试相关整理

1、ActivityManagerService是什么&#xff1f;什么时候初始化的&#xff1f;有什么作用&#xff1f; ActivityManagerService&#xff08;AMS&#xff09;是什么&#xff1f; ActivityManagerService&#xff08;简称AMS&#xff09;是Android操作系统中的一个核心服务&#…...

编程日记 2024/3/31 20:14:36

Vmware下减小Ubuntu系统占用系统盘大小

1、虚拟机设置下占用空间 如图&#xff0c;给虚拟机分配了120GB&#xff0c;已经占用116.9GB&#xff0c;开机会提示空间不足。 2、实际使用空间 ubuntu系统下使用“df -h”命令查看实际使用空间大小50GB左右 造成这个原因是&#xff0c;虚拟机的bug&#xff1a;在虚拟机的ub…...

编程日记 2024/3/31 20:11:33

面试题-Elasticsearch集群架构和调优手段（超全面）

对于Elasticsearch&#xff08;ES&#xff09;&#xff0c;我了解并有经验。在我之前的公司&#xff0c;我们有一个相对大型的ES集群&#xff0c;以下是该集群的架构和一些调优手段的概述&#xff1a; 1. 集群架构 集群规模&#xff1a;我们的ES集群由15个节点组成&#xff0c…...

编程日记 2024/3/31 20:09:31

python基础练习题6

1、找出10000以内能被5或6整除&#xff0c;但不能被两者同时整除的数&#xff08;函数&#xff09; def find_numbers(m,n):result []for num in range(m,n):if (num % 5 0 or num % 6 0) and not (num % 5 0 and num % 6 0):result.append(num)return resultprint(find_…...

编程日记 2024/3/31 20:07:29

Chrome 插件各模块使用 Fetch 进行接口请求

Chrome 插件各模块使用 Fetch 进行接口请求 常规网页可以使用 fetch() 或 XMLHttpRequest API 从远程服务器发送和接收数据&#xff0c;但受到同源政策的限制。 内容脚本会代表已注入内容脚本的网页源发起请求&#xff0c;因此内容脚本也受同源政策的约束&#xff0c;插件的来…...

编程日记 2024/3/31 20:06:27

内存可见性

内存可见性 一:内存可见性1.2: 二:解决内存可见性问题2.1 volatile关键字2.2:synchronized关键字解决内存可见性问题 一:内存可见性 public class Demo1 {public static int count 0;public static void main(String[] args) throws InterruptedException {Thread t1new Thre…...

编程日记 2024/3/31 20:05:26

Android room 在dao中不能使用挂起suspend 否则会报错

错误&#xff1a; Type of the parameter must be a class annotated with Entity or a collection/array of it. kotlin.coroutines.Continuation<? super kotlin.Unit> $completion); 首先大家检查一下几个点 一、kotlin-kapt 二、 是否引入了 room-ktx 我是2024年…...

编程日记 2024/3/31 20:04:25

【stable diffusion扩散模型】一篇文章讲透

目录 一、引言 二、Stable Diffusion的基本原理 1 扩散模型 2 Stable Diffusion模型架构 3 训练过程与算法细节 三、Stable Diffusion的应用领域 1 图像生成与艺术创作 2 图像补全与修复 3 其他领域 四、Stable Diffusion的优势与挑战 &#x1f449;优势 &#x1f…...

编程日记 2024/3/31 20:00:21

数据链路层之信道：数字通信的桥梁与守护者

✨✨ 欢迎大家来访Srlua的博文&#xff08;づ&#xffe3;3&#xffe3;&#xff09;づ╭❤&#xff5e;✨✨ &#x1f31f;&#x1f31f; 欢迎各位亲爱的读者&#xff0c;感谢你们抽出宝贵的时间来阅读我的文章。 我是Srlua小谢&#xff0c;在这里我会分享我的知识和经验。&am…...

编程日记 2024/3/31 19:57:18

SQL109 纠错4（组合查询，order by..）

SELECT cust_name, cust_contact, cust_email FROM Customers WHERE cust_state MI UNION SELECT cust_name, cust_contact, cust_email FROM Customers WHERE cust_state IL ORDER BY cust_name;order by子句&#xff0c;必须位于最后一条select语句之后...

编程日记 2024/3/31 19:56:18

iPhone密码忘记了办？iPhoneUnlocker，iPhone解锁工具Aiseesoft iPhone Unlocker 高级注册版​分享

平时用 iPhone 的时候&#xff0c;难免会碰到解锁的麻烦事。比如密码忘了、人脸识别 / 指纹识别突然不灵&#xff0c;或者买了二手 iPhone 却被原来的 iCloud 账号锁住&#xff0c;这时候就需要靠谱的解锁工具来帮忙了。Aiseesoft iPhone Unlocker 就是专门解决这些问题的软件&…...

编程新知 2026/1/29 10:22:28

项目部署到Linux上时遇到的错误（Redis，MySQL，无法正确连接，地址占用问题）

Redis无法正确连接 在运行jar包时出现了这样的错误 查询得知问题核心在于Redis连接失败&#xff0c;具体原因是客户端发送了密码认证请求&#xff0c;但Redis服务器未设置密码 1.为Redis设置密码&#xff08;匹配客户端配置&#xff09; 步骤&#xff1a; 1&#xff09;.修…...

编程新知 2026/1/29 4:05:26

《C++ 模板》

目录 函数模板 类模板 非类型模板参数 模板特化 函数模板特化 类模板的特化 模板&#xff0c;就像一个模具&#xff0c;里面可以将不同类型的材料做成一个形状&#xff0c;其分为函数模板和类模板。 函数模板 函数模板可以简化函数重载的代码。格式&#xff1a;templa…...

编程新知 2025/6/11 3:20:47

Java求职者面试指南：计算机基础与源码原理深度解析

Java求职者面试指南&#xff1a;计算机基础与源码原理深度解析 第一轮提问&#xff1a;基础概念问题 1. 请解释什么是进程和线程的区别&#xff1f; 面试官&#xff1a;进程是程序的一次执行过程&#xff0c;是系统进行资源分配和调度的基本单位&#xff1b;而线程是进程中的…...

编程新知 2025/12/9 14:22:07

Git常用命令完全指南：从入门到精通

Git常用命令完全指南&#xff1a;从入门到精通 一、基础配置命令 1. 用户信息配置 # 设置全局用户名 git config --global user.name "你的名字"# 设置全局邮箱 git config --global user.email "你的邮箱example.com"# 查看所有配置 git config --list…...

编程新知 2025/10/3 0:40:01

论文阅读笔记——Muffin: Testing Deep Learning Libraries via Neural Architecture Fuzzing

Muffin 论文 现有方法 CRADLE 和 LEMON&#xff0c;依赖模型推理阶段输出进行差分测试&#xff0c;但在训练阶段是不可行的&#xff0c;因为训练阶段直到最后才有固定输出&#xff0c;中间过程是不断变化的。API 库覆盖低&#xff0c;因为各个 API 都是在各种具体场景下使用。…...

编程新知 2026/2/1 1:28:58

车载诊断架构 --- ZEVonUDS（J1979-3）简介第一篇

我是穿拖鞋的汉子，魔都中坚持长期主义的汽车电子工程师。 老规矩，分享一段喜欢的文字，避免自己成为高知识低文化的工程师： 做到欲望极简，了解自己的真实欲望，不受外在潮流的影响，不盲从，不跟风。把自己的精力全部用在自己。一是去掉多余，凡事找规律，基础是诚信；二是…...

编程新知 2026/1/26 21:09:29

STM32标准库-ADC数模转换器

文章目录 一、ADC1.1简介1. 2逐次逼近型ADC1.3ADC框图1.4ADC基本结构1.4.1 信号 “上车点”&#xff1a;输入模块&#xff08;GPIO、温度、V_REFINT&#xff09;1.4.2 信号 “调度站”&#xff1a;多路开关1.4.3 信号 “加工厂”&#xff1a;ADC 转换器&#xff08;规则组 注入…...

编程新知 2026/1/22 11:33:36

C++11 constexpr和字面类型：从入门到精通

文章目录 引言一、constexpr的基本概念与使用1.1 constexpr的定义与作用1.2 constexpr变量1.3 constexpr函数1.4 constexpr在类构造函数中的应用1.5 constexpr的优势 二、字面类型的基本概念与使用2.1 字面类型的定义与作用2.2 字面类型的应用场景2.2.1 常量定义2.2.2 模板参数…...

编程新知 2026/1/26 22:17:09

ffmpeg（三）：处理原始数据命令

FFmpeg 可以直接处理原始音频和视频数据&#xff08;Raw PCM、YUV 等&#xff09;&#xff0c;常见场景包括&#xff1a; 将原始 YUV 图像编码为 H.264 视频将 PCM 音频编码为 AAC 或 MP3对原始音视频数据进行封装&#xff08;如封装为 MP4、TS&#xff09; 处理原始 YUV 视频…...

编程新知 2025/10/5 16:18:49