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

Node.js全栈指南:浏览器显示一个网页

上一章,我们了解到,如何通过第二章的极简 Web 的例子来演示如何查看官方文档。为什么要把查阅官方文档放在前面的章节说明呢?因为查看文档是一个很重要的能力,就跟查字典一样。

回想一下,我们读小学,初中的时候,老师是不是专门教过如何查阅字典呢?不知道现在还是不是这样,笔者以前读小学,初中,新华字典是每个人书桌必备的。

所以,如果你在学习 Node.js 的过程中,或者学习其他技术,都可以用此方法来对语言,技术等进行学习和了解。

那么本章呢,我们继续在代码方面做一些推进,当浏览器发起请求的时候,返回一个网页并正确渲染网页中涉及到的 CSS、JS 脚本等资源。

picture 0

简单直接一点,直接把 HTML 字符串返回,哈哈。

picture 1

不要忘记启动 Web 服务哦,然后到浏览器访问,可以看到正确地显示了 HTML 效果。继续,加点料,把 CSS 写进去。

picture 2

很简单的效果,让 body 中的文字变成红色。

picture 3

不出所料,尽在掌控,是不是很简单?来,加点难度。

picture 4

把头部的样式单独放到一个文件中,用 link 标签引用。

picture 5

怎么回事?文字怎么没变色?还有,index.css 文件怎么返回的是 html 内容呢?

picture 7

不仅如此,浏览器一共发送了 3 个请求,返回的内容也都是一模一样的,有蹊跷。

picture 8

我们再回过头去看看代码,可以发现,我们每次请求,都返回了同样的内容。那么我们要怎么做,才能让不同的请求返回不同的内容?

很简单,if 判断就完事了。但是,怎么判断?判断什么参数呢?

也很简单,打印就完事了,打印谁呢?打印 req 参数。

picture 9

知道笔者的这个课程为什么叫做 “实验指南” 了吗?这个就是笔者的学习方式,哪里不懂,打印出来看,不要去猜,要用眼睛去观察,要不断地做实验,用数据说话。

picture 10

打印的参数很多,我们抽丝剥茧,找到这个关键的地方,恰好是那 3 个请求内容。现在知道怎么判断,判断谁了吗?没错,就是 url。

我们约定以下规则:

1,如果 url=/,则返回 HTML 页面。

2,如果 url=/index.css,则返回 CSS 样式。

3,如果 url=/favicon.ico,则返回网页标题栏的收藏图标。

picture 11

很简单的判断,不同的路径返回不同的内容。另外,收藏图标用到了文件读取方法,很简单,看下官方文档,搜索下资料就懂了,不多赘述。

picture 12

可以看到,收藏图标有了,CSS 样式也生效了,3 个请求返回也不一样了。

好像一切都完美了?其实不然,由于浏览器的包容性,一些玄机还暗藏其中,且听下回分解。

相关文章:

Node.js全栈指南:浏览器显示一个网页

上一章,我们了解到,如何通过第二章的极简 Web 的例子来演示如何查看官方文档。为什么要把查阅官方文档放在前面的章节说明呢?因为查看文档是一个很重要的能力,就跟查字典一样。 回想一下,我们读小学,初中的…...

Linux远程桌面(Ubuntu/Deepin)——安装和使用 VNC 及通过 noVNC 实现浏览器实现远程桌面访问教程

在 Linux 上安装和使用 VNC 及通过 noVNC 实现浏览器远程访问教程 Windows上通常会自带xrdp远程桌面,但是当我们使用 Deepin 或 Ubuntu 系统作为开发机器且需要图形化界面的时候,就需要安装和配置 VNC(Virtual Network Computing&#xff09…...

2024年最新通信安全员考试题库

61.架设架空光缆,可使用吊板作业的情况是()。 A.在2.2/7规格的电杆与墙壁之间的吊线上,吊线高度5m B.在2.2/7规格的墙壁与墙壁之间的吊线上,吊线高度6m C.在2.2/7规格的电杆与电杆之间的吊线上,吊线高度…...

SpringMVC系列八: 手动实现SpringMVC底层机制-下

手动实现SpringMVC底层机制-下 实现任务阶段五🍍完成Spring容器对象的自动装配-Autowired 实现任务阶段六🍍完成控制器方法获取参数-RequestParam1.🥦将 方法的 HttpServletRequest 和 HttpServletResponse 参数封装到数组, 进行反射调用2.&a…...

【昇思初学入门】第八天打卡-模型保存与加载

模型保存与加载 学习心得 保存 CheckPoint 格式文件,在模型训练过程中,可以添加检查点(CheckPoint)用于保存模型的参数,以便进行推理及再训练使用。如果想继续在不同硬件平台上做推理,可通过网络和CheckPoint格式文件生成对应的…...

喜报!极限科技新获得一项国家发明专利授权:“搜索数据库的正排索引处理方法、装置、介质和设备”

近日,极限数据(北京)科技有限公司(简称:极限科技)新获得一项国家发明专利授权,专利名为 “搜索数据库的正排索引处理方法、装置、介质和设备”,专利号:ZL 2024 1 0479400…...

深入探讨:UART与USART在单片机中串口的实际应用与实现技巧

单片机(Microcontroller Unit, MCU)是一种集成了处理器、存储器和输入输出接口的微型计算机。它广泛应用于嵌入式系统中,用于控制各类电子设备。UART和USART是单片机中常见的通信接口,负责串行数据传输。下面我们详细介绍它们在单…...

Windows上PyTorch3D安装踩坑记录

直入正题,打开命令行,直接通过 pip 安装 PyTorch3D : (python11) F:\study\2021-07\python>pip install pytorch3d Looking in indexes: http://mirrors.aliyun.com/pypi/simple/ ERROR: Could not find a version that satisfies the requirement p…...

操作符详解(上) (C语言)

操作符详解(上) 一. 进制转换1. 二进制2. 二进制的转换 二. 原码 补码 反码三. 操作符的分类四. 结构成员访问操作符1. 结构体的声明2. 结构体成员访问操作符 一. 进制转换 1. 二进制 在学习操作符之前,我们先了解一些2进制、8进制、10进制…...

使用 audit2allow 工具添加SELinux权限的方法

1. audit2allow工具的使用 audit2allow 命令的作用是分析日志,并提供允许的建议规则或拒绝的建议规则。 1.1 audit2allow的安装 sudo apt-get install policycoreutilssudo apt install policycoreutils-python-utils 1.2 auditallow的命令 命令含义用法-v--ve…...

一文弄懂FPGA

一、FPGA简介 什么是FPGA? FPGA(Field-Programmable Gate Array)是一种可编程逻辑器件,可以在现场通过硬件描述语言(HDL)进行配置。它具有高度的灵活性和并行处理能力,广泛应用于通信、计算、…...

Rust 中使用 :: 这种语法的几种情况

文章目录 1. 访问模块成员:2. 访问关联函数或静态方法:3. 访问 trait 的关联类型或关联常量4. 指定泛型类型参数 1. 访问模块成员: mod utils {pub fn do_something() { /* ... */ } }let result utils::do_something();2. 访问关联函数或静…...

Ruby langchainrb gem and custom configuration for the model setup

题意:Ruby 的 langchainrb gem 以及针对模型设置的自定义配置 问题背景: I am working in a prototype using the gem langchainrb. I am using the module assistant module to implemente a basic RAG architecture. 我正在使用 langchainrb 这个 ge…...

高校新生如何选择最优手机流量卡?

一年一度的高考已经结束了,愿广大学子金榜题名,家长们都给孩子准备好了手机,那么手机流量卡应该如何选择呢? 高校新生在选择手机流量卡时,需要综合考量流量套餐、费用、网络覆盖、售后服务等多方面因素,以下…...

QT QML 生成二维码

Qt生成二维码 C++版 文章目录 步骤1:安装libqrencode步骤2:创建C++类生成二维码步骤3:将C++类与QML绑定步骤4:创建QML界面步骤5:配置项目文件总结在Qt QML中实现二维码生成,可以使用一个C++库来生成二维码,然后将生成的二维码图像传递给QML进行显示。一个常用的二维码生…...

IDEA中Maven--下载安装自己适配的版本---理解

Maven解释: Maven是一个强大的项目管理工具和构建工具,主要用于Java项目。它能够帮助开发团队管理项目的依赖、构建项目、发布文档和报告,并能够自动化许多重复的任务。 Maven的主要作用包括: 依赖管理:Maven能够管理…...

【osgEarth】Ubuntu 22.04 源码编译osgEarth 3.5

下载源代码 git clone --depth1 https://dgithub.xyz/gwaldron/osgearth -b osgearth-3.5 下载子模块 git submodule update --init 如果下载不过来,就手动修改下.git/config文件,将子模块的地址替换成加速地址 (base) yeqiangyeqiang-Default-string…...

ASP.NET Core 6.0 使用 资源过滤器和行为过滤器

1.AOP 面向切面编程 概念 AOP(Aspect-Oriented Programming,面向切面编程)是一种编程范式,旨在通过预定义的模式(即“切面”)对程序的横切关注点进行模块化。横切关注点是一个在多个应用模块中出现的概念,例如日志记录、事务管理、安全检查等。AOP允许开发者定义“切面”…...

电脑屏幕花屏怎么办?5个方法解决问题!

“我刚刚打开电脑就发现我的电脑屏幕出现了花屏的情况。这让我很困惑,我应该怎么解决这个问题呢?求帮助。” 在这个数字时代的浪潮中,电脑早已成为我们生活中不可或缺的一部分。然而,当你正沉浸在紧张的游戏对战中,或是…...

git 初基本使用-----------笔记

Git命令 下载git 打开Git官网(git-scm.com),根据自己电脑的操作系统选择相应的Git版本,点击“Download”。 基本的git命令使用 可以在项目文件下右击“Git Bash Here” ,也可以命令终端下cd到指定目录执行初始化命令…...

调用支付宝接口响应40004 SYSTEM_ERROR问题排查

在对接支付宝API的时候,遇到了一些问题,记录一下排查过程。 Body:{"datadigital_fincloud_generalsaas_face_certify_initialize_response":{"msg":"Business Failed","code":"40004","sub_msg…...

Xshell远程连接Kali(默认 | 私钥)Note版

前言:xshell远程连接,私钥连接和常规默认连接 任务一 开启ssh服务 service ssh status //查看ssh服务状态 service ssh start //开启ssh服务 update-rc.d ssh enable //开启自启动ssh服务 任务二 修改配置文件 vi /etc/ssh/ssh_config //第一…...

【网络安全产品大调研系列】2. 体验漏洞扫描

前言 2023 年漏洞扫描服务市场规模预计为 3.06(十亿美元)。漏洞扫描服务市场行业预计将从 2024 年的 3.48(十亿美元)增长到 2032 年的 9.54(十亿美元)。预测期内漏洞扫描服务市场 CAGR(增长率&…...

ESP32 I2S音频总线学习笔记(四): INMP441采集音频并实时播放

简介 前面两期文章我们介绍了I2S的读取和写入,一个是通过INMP441麦克风模块采集音频,一个是通过PCM5102A模块播放音频,那如果我们将两者结合起来,将麦克风采集到的音频通过PCM5102A播放,是不是就可以做一个扩音器了呢…...

【Go】3、Go语言进阶与依赖管理

前言 本系列文章参考自稀土掘金上的 【字节内部课】公开课,做自我学习总结整理。 Go语言并发编程 Go语言原生支持并发编程,它的核心机制是 Goroutine 协程、Channel 通道,并基于CSP(Communicating Sequential Processes&#xff0…...

【Web 进阶篇】优雅的接口设计:统一响应、全局异常处理与参数校验

系列回顾: 在上一篇中,我们成功地为应用集成了数据库,并使用 Spring Data JPA 实现了基本的 CRUD API。我们的应用现在能“记忆”数据了!但是,如果你仔细审视那些 API,会发现它们还很“粗糙”:有…...

12.找到字符串中所有字母异位词

🧠 题目解析 题目描述: 给定两个字符串 s 和 p,找出 s 中所有 p 的字母异位词的起始索引。 返回的答案以数组形式表示。 字母异位词定义: 若两个字符串包含的字符种类和出现次数完全相同,顺序无所谓,则互为…...

如何在网页里填写 PDF 表格?

有时候,你可能希望用户能在你的网站上填写 PDF 表单。然而,这件事并不简单,因为 PDF 并不是一种原生的网页格式。虽然浏览器可以显示 PDF 文件,但原生并不支持编辑或填写它们。更糟的是,如果你想收集表单数据&#xff…...

【从零学习JVM|第三篇】类的生命周期(高频面试题)

前言: 在Java编程中,类的生命周期是指类从被加载到内存中开始,到被卸载出内存为止的整个过程。了解类的生命周期对于理解Java程序的运行机制以及性能优化非常重要。本文会深入探寻类的生命周期,让读者对此有深刻印象。 目录 ​…...

在Mathematica中实现Newton-Raphson迭代的收敛时间算法(一般三次多项式)

考察一般的三次多项式,以r为参数: p[z_, r_] : z^3 (r - 1) z - r; roots[r_] : z /. Solve[p[z, r] 0, z]; 此多项式的根为: 尽管看起来这个多项式是特殊的,其实一般的三次多项式都是可以通过线性变换化为这个形式…...