http响应练习—在服务器端渲染html（SSR）
一、什么是服务器端渲染（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）
一、什么是服务器端渲染（SSR） 简单说，就是在服务器上把网页生成好，整个的HTML页面生成出来，生成出的页面已经包含了所有必要的数据和结构信息，然后直接发给浏览器进行展现。 二、例题 要求搭建http服务&a…...
C++(8): std::deque的使用
1. std::deque std::deque 是 C 标准库中的一个双端队列容器。这个容器支持在序列的两端进行快速的插入和删除操作，其时间复杂度为常数时间 O(1)。同时，std::deque 也提供了对序列中任意元素的随机访问。 2. 特点 （1）双端操作&…...
openwrt开发包含路由器基本功能的web问题记录
1.这里的扫描怎么实现的先找一些luci代码，在openwrt21版本后，luci用js替换了lua写后台，先找一些代码路径 在openrwt15这部分代码是在这个目录下 feeds/luci/modules/luci-mod-admin-full/luasrc/view/admin_network/wifi_join.htm 里面包含…...
HarmonyOS ArkTS 骨架屏加载显示（二十五）
目录 前言1、骨架屏代码显示2、代码中引用3、效果图展示 前言 所谓骨架屏，就是在页面进行耗时加载时，先展示的等待 UI, 以告知用户程序目前正在运行，稍等即可。 等待的UI大部分是 loading 转圈的弹窗，有的是自己风格的小动画。其实…...
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需要的工具包…...
RN封装的底部向上弹出的弹出层组件
组件代码 import React from react; import { View, StyleSheet, Modal, TouchableOpacity, Text, TouchableWithoutFeedback } from react-native;const BottomPopup ({ visible, onClose, children, leftButtonTitle, rightButtonTitle, onLeftButtonPress, onRightButtonP…...
基于深度学习YOLOv8+PyQt5的水底海底垃圾生物探测器检测识别系统（源码+数据集+配置说明）
wx供重浩：创享日记 对话框发送：323海底 获取完整源码7000张数据集配置说明文件说明远程操作配置环境跑通程序 效果展示 基于深度学习YOLOv8PyQt5的水底海底垃圾生物探测器检测识别系统设计（源码数据集配置文件） 各文件说明 程序运…...
SpringBoot集成WebSocket实现简单的多人聊天室
上代码—gitee下载地址： https://gitee.com/bestwater/Spring-websocket.git下载代码，连上数据库执行SQL，就可以运行，最终效果...
如何使用固定公网地址远程访问内网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创建一条固定…...
蓝桥杯习题
https://www.lanqiao.cn/problems/1265/learning/ 第一题---排序 给定一个长度为N的数组A，请你先从小到大输出它的每个元素，再从大到小输出他的每个元素。 输入描述： 第一行包含一个整数N 第二行包含N个整数a1,a2,a3,...an，表…...
AMS概念以及面试相关整理
1、ActivityManagerService是什么？什么时候初始化的？有什么作用？ ActivityManagerService（AMS）是什么？ ActivityManagerService（简称AMS）是Android操作系统中的一个核心服务&#…...
Vmware下减小Ubuntu系统占用系统盘大小
1、虚拟机设置下占用空间 如图，给虚拟机分配了120GB，已经占用116.9GB，开机会提示空间不足。 2、实际使用空间 ubuntu系统下使用“df -h”命令查看实际使用空间大小50GB左右 造成这个原因是，虚拟机的bug：在虚拟机的ub…...
面试题-Elasticsearch集群架构和调优手段（超全面）
对于Elasticsearch（ES），我了解并有经验。在我之前的公司，我们有一个相对大型的ES集群，以下是该集群的架构和一些调优手段的概述： 1. 集群架构 集群规模：我们的ES集群由15个节点组成，…...
python基础练习题6
1、找出10000以内能被5或6整除，但不能被两者同时整除的数（函数） 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_…...
Chrome 插件各模块使用 Fetch 进行接口请求
Chrome 插件各模块使用 Fetch 进行接口请求 常规网页可以使用 fetch() 或 XMLHttpRequest API 从远程服务器发送和接收数据，但受到同源政策的限制。 内容脚本会代表已注入内容脚本的网页源发起请求，因此内容脚本也受同源政策的约束，插件的来…...
内存可见性
内存可见性 一:内存可见性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…...
Android room 在dao中不能使用挂起suspend 否则会报错
错误： 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年…...
【stable diffusion扩散模型】一篇文章讲透
目录 一、引言 二、Stable Diffusion的基本原理 1 扩散模型 2 Stable Diffusion模型架构 3 训练过程与算法细节 三、Stable Diffusion的应用领域 1 图像生成与艺术创作 2 图像补全与修复 3 其他领域 四、Stable Diffusion的优势与挑战 👉优势 …...
数据链路层之信道：数字通信的桥梁与守护者
✨✨ 欢迎大家来访Srlua的博文（づ￣3￣）づ╭❤～✨✨ 🌟🌟 欢迎各位亲爱的读者，感谢你们抽出宝贵的时间来阅读我的文章。 我是Srlua小谢，在这里我会分享我的知识和经验。&am…...
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子句，必须位于最后一条select语句之后...
Spring Boot + Vue 实现文件导入导出功能
文章目录 1、概述2、后端实现（Spring Boot）3、前端实现（Vue）4、总结 1、概述 在现代Web应用开发中，文件的导入导出是一个常见的需求。Spring Boot作为后端开发的强大框架，搭配前端框架Vue，可…...
vue watch 深度监听
vue2文档：API — Vue.js vue3文档：侦听器 | Vue.js watch 可以用来监听页面中的数据，但如果监听的源是对象或数组，则使用深度监听，强制深度遍历源，以便在深度变更时触发回调。 一，监听 <t…...
Qt源码调试步骤记录
1.源码： 两种方式，要么安装qt时选择source，要么从官网下载源码，然后在qt creator中设置路径。二选一即可。我选的第二种。 1.1.第一种，安装时选择source： 1.2.第二种，下载源码设置路径&#x…...
大数据面试英文自我介绍参考（万字长文）
发现有一个怪圈，如果码农年龄35+，除非非常匹配，不然在国内企业筛选可能就筛选不过。国外码农可以干到40+、50+。一些外企，对年龄35+的码农依然青睐。这些外企对英文是有要求，通常是要英文自我介绍，下面提供一些英文自我介绍参考。 参考1： Good morning/afternoon, I a…...
外包干了5天，技术退步明显.......
先说一下自己的情况，大专生，18年通过校招进入杭州某软件公司，干了接近4年的功能测试，今年年初，感觉自己不能够在这样下去了，长时间呆在一个舒适的环境会让一个人堕落! 而我已经在一个企业干了四年的功能测…...
Docket常见的软件部署1
1 安装MySQL # 查看MySQL镜像 docker search mysql # 拉起镜像 docker pull mysql:5.7 # 创建MySQL数据映射卷，防止数据不丢失 mkdir -p /hmoe/tem/docker/mysql/data/ # 启动镜像 docker run -d --name mysql -e MYSQL_ROOT_PASSWORD123456 -p 3306:3306 -v /home…...
Qt源程序编译及错误问题解决
Error 5 while parsing C:/qt-everywhere-src-6.6.2/qt-build/qtdeclarative/src/qmlmodels/meta_types/qt6qmlmodels_release_metatypes.json: illegal value .json 文件为空文件0字节，加 “[]”，不要引号。可以解决这类错误。 Qt编译 Qt for Windows…...
作业练习（python)
第一题： cel eval(input()) fah 9 / 5 * cel 32 print("%.1f" % fah) 第二题： radius, length eval(input()) area radius * radius * 3.14159267 volume area * length print("%.2f" % area) print("%.2f" …...
Wireshark使用相关
1.wireshark如何查看RST包 tcp.flags.reset1 RST表示复位，用来异常的关闭连接，在TCP的设计中它是不可或缺的。发送RST包关闭连接时，不必等缓冲区的包都发出去（不像上面的FIN包），直接就丢弃缓存区的包发送R…...
相机标定学习记录
相机标定是计算机视觉和机器视觉领域中的一项基本技术，它的主要目的是通过获取相机的内部参数（内参）和外部参数（外参），以及镜头畸变参数，建立起现实世界中的点与相机成像平面上对应像素点之间准…...
党建网站建设作为/seo查询网站是什么
参考了博文：http://www.cnblogs.com/lycheng/archive/2011/09/10/2173419.html 目前使用OpenGL仅用于练习，当然最终目标是游戏引擎的制作，不过刚刚起步的小工程，不偏向使用VS这种大块头，用点轻巧的，我选择c…...
网站建设百科/竞价推广账户竞价托管
ArithmeticException（除数为0的异常）, BufferOverflowException（缓冲区上溢异常）, BufferUnderflowException（缓冲区下溢异常）, IndexOutOfBoundsException（出界异常）, NullPointerE…...
酒店网站html模板/网络销售靠谱吗
1.创建文件myrule 2.编写myrule内容 package com.myrule;Configuration public class MySelfRule {Beanpublic IRule myRule(){return new RandomRule(); //随机的方法} }3.在主启动类中加入这个注解 CLOUD-PAYMENT-SERVICE为服务名称 configuration为刚才我们写的类 Ribbon…...
wordpress前台多张缩略图/谷歌商店下载
题目描述 给定一个正整数数列，和正整数p，设这个数列中的最大值是M，最小值是m，如果M < m * p，则称这个数列是完美数列。 现在给定参数p和一些正整数，请你从中选择尽可能多的数构成一个完美数列。 输入描述…...
做图素材网站哪个好/怎么样才可以在百度上打广告
0 Homebrew简介linux系统有个让人蛋疼的通病，软件包依赖，好在当前主流的两大发行版本都自带了解决方案，Red hat有yum，Ubuntu有apt-get而用mac os有一个类似的工具名为Homebrew，Homebrew简称brew，是Mac OSX上…...
wordpress xueqiu/赣州网站建设公司
题目 C语言中算术表达式中的括号只有小括号。编写算法，判断一个表达式中的括号是否正确配对，表达式已经存入字符数组exp[]中，表达式的字符个数为n。 分析 本题可以用栈来解决，下面就来说说为什么要用栈来解决。 给你一个表达式…...