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://www.mzph.cn/news/782862.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

slowhttp攻击漏洞原理解析和防御,以及LiqunKit 综合漏洞利用工具详细使用

slowhttp攻击漏洞原理解析和防御,以及LiqunKit 综合漏洞利用工具详细使用。 Slowhttp攻击是一种拒绝服务(DoS)攻击,它利用了HTTP协议的一些特性来耗尽服务器资源,导致服务器对正常请求的响应变慢或无法响应。这种攻击的特点是长时间占用服务器的连接,而不是发送大量流量…

JSQLParserException异常

前言 SQL中加入了租户字段&#xff0c;报这个错&#xff0c;可以查出数据&#xff0c;但是不多&#xff1b;SQL检查无问题 解决 原因一 引入新的SQL解析器检查解析SQL&#xff0c;与mybatis多租户无关 参考 <!--jsqlparser版本太低也无法解析&#xff0c;如2.0--> &…

2024 年高效开发的 React 生态系统

要使用 React 制作应用程序&#xff0c;需要熟悉正确的库来添加您需要的功能。例如&#xff0c;要添加某个功能&#xff08;例如身份验证或样式&#xff09;&#xff0c;您需要找到一个好的第三方库来处理它。 在这份综合指南中&#xff0c;我将向您展示我建议您在 2024 年使用…

Xilinx浮点处理IP使用说明和测试

Xilinx浮点处理IP使用说明和测试 1 浮点数标准2 IP接口信号3 Python计算4 Vivado仿真本文主要介绍Xilinx浮点数处理IP Floating-point的使用和测试方法。 1 浮点数标准 浮点数的定义遵循IEEE-754标准,32位浮点数定义如下。 1位符号位(S):0表示正数,1表示负数8位指数位(E):…

C语言预处理详解

预处理是什么 在我们写完C语言程序的时候当我们开始运行程序时&#xff0c;程序会经过预处理&#xff0c;编译&#xff0c;汇编&#xff0c;链接这些过程之后才会生成可执行程序&#xff0c;这里我们讲的是预处理&#xff0c;预处理是编译的第一个阶段&#xff0c;在这个阶段&a…

传参的指针,你的值到底变了没?!(有关函数形参修改的另类案例)

我们都知道&#xff0c;想要在函数中修改某个变量的值&#xff0c;传变量本身是没有用的。原因在于不同的函数在不同的空间上&#xff0c;函数的生命周期随着函数的调用而结束&#xff0c;因此在函数内部进行的值操作是不会对函数外的变量产生影响的。所以在函数里面想要修改变…

网关未配置导致不同网段ping不通的小问题

问题背景&#xff1a; 搞来两台服务器&#xff0c;想用这两台装vmware来分配多个虚拟机来做开发测试 每台有两个网口&#xff0c;现在只需要一个网口就可以&#xff0c;之后想配置&#xff0c;再从vmware页面上配置&#xff0c;机房环境不是很好&#xff0c;在地下室&#xf…

C语言使用STM32开发板手搓高端家居洗衣机

目录 概要 成品效果 背景概述 1.开发环境 2.主要传感器。 技术细节 1. 用户如何知道选择了何种功能 2.启动后如何进行洗衣 3.如何将洗衣机状态上传至服务器并通过APP查看 4.洗衣过程、可燃气检测、OLED屏显示、服务器通信如何并发进行 小结 概要 本文章主要是讲解如…

C语言-写一个宏,可以将一个整数的二进制位的奇数位和偶数位交换。

0xaaaaaaaa...等是什么&#xff1f;-CSDN博客https://blog.csdn.net/Jason_from_China/article/details/137179252 #define _CRT_SECURE_NO_WARNINGS 1 #include<stdio.h> #define SWAP(num) (((num & 0xAAAAAAAA) >> 1) | ((num & 0x55555555) << …

【C++】C到C++的入门知识

目录 1、C关键字 2、命名空间 2.1 命名空间的定义 2.2 命名空间的使用 2.2.1 加命名空间名称及作用域限定符 2.2.2 使用using将命名空间中某个成员引入 2.2.3 使用using namespace 命名空间名称引入 3、C输入&输出 4、缺省参数 4.1 缺省参数的概念 4.2 缺省参数的…

深入理解zookeeper

如果是zookeeper的初学者&#xff0c;可以看&#xff1a; zookeeper快速入门&#xff08;合集&#xff09;-CSDN博客 如果想要深入理解zookeeper&#xff0c;并在面试中取得更好的表现&#xff0c;可以看下面的文章&#xff0c;都是偏面试向的角度写的。 三分钟明白zookeeper…

名字真的会影响我们的职业吗?

名字是我们身份的一部分&#xff0c;人们往往喜欢将一个人名字同一种具体的职业联系在一起&#xff0c;而如果这个人名字看上去更适合一项工作&#xff0c;那么他&#xff08;她&#xff09;就有更多的机会得到这份工作。因此&#xff0c;我们在给福主取名改名时也会与职业特点…

10.Python异常处理

为增强程序的健壮性&#xff0c;我们也需要考虑异常处理方面的内容。例如 &#xff0c;在读取文件时需要考虑文件不存在、文件格式不正确等异常情况。这 就是本章要介绍的异常处理。 1 第一个异常——除零异常 在数学中&#xff0c;任何整数都不能除以0&#xff0c;如果在计算…

PCL 计算点与圆的距离(3D)

文章目录 一、简介二、实现代码三、实现效果参考资料一、简介 3D中的圆可以有圆心、半径以及法线来进行表示,如下图所示: 这里我们假设: Δ = P − C \Delta=P-C Δ

Wasm初上手

总之也是为了扩宽技术面吧。。。我也不知道为什么就想试试了&#xff0c;就酱。 参考阅读&#xff1a;极客时间《WebAssembly入门课》 安装wasm的编译器Emscripten。Emscripten 是一个“源到源”语言编译器工具集&#xff0c;这个工具集可以将 C/C 代码编译成对应 JavaScript 代…

【PostgreSQL】- 1.4 PostgreSQL 业务规划(创建 Schema)

业务规划与创建 Schemas 如果实际场景&#xff0c;有业务A、业务B、业务C&#xff0c;推荐的方式是在同一个数据库中为每个业务创建不同的 schema。然后&#xff0c;你可以为每个业务创建不同的账户&#xff0c;并赋予这些账户对应业务的 schema 权限。这种方式的好处是&#…

CSS使用clip-path实现元素动画

前言&#xff1a; 在日常开发当中&#xff0c;如果想要开发多边形&#xff0c;一般都需要多个盒子或者伪元素的帮助&#xff0c;有没有一直办法能只使用一个盒子实现呢&#xff1f; 有的&#xff1a;css裁剪 目录 前言&#xff1a; clip-path到底是什么&#xff1f; clip-pa…

【御控物联】 JavaScript JSON结构转换(4):对象To对象——规则属性重组

文章目录 一、JSON结构转换是什么&#xff1f;二、术语解释三、案例之《JSON对象 To JSON对象》四、代码实现五、在线转换工具六、技术资料 一、JSON结构转换是什么&#xff1f; JSON结构转换指的是将一个JSON对象或JSON数组按照一定规则进行重组、筛选、映射或转换&#xff0…

赋值语句还能当判断条件?涨芝士了!

赋值和条件看似是C语言中毫不相关的两个概念&#xff0c;虽然实际过程中我猜测不会有太多这种不太符合常理的情况出现&#xff0c;但是现在在学习的过程中&#xff0c;为了出题而出题总是会整出一些花活出来.....这很难不让人联想起高中时一些大佬为了彰显自己的数学天赋而自己…