当前位置: 首页 > 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到指定目录执行初始化命令…...

后进先出(LIFO)详解

LIFO 是 Last In, First Out 的缩写,中文译为后进先出。这是一种数据结构的工作原则,类似于一摞盘子或一叠书本: 最后放进去的元素最先出来 -想象往筒状容器里放盘子: (1)你放进的最后一个盘子&#xff08…...

基于FPGA的PID算法学习———实现PID比例控制算法

基于FPGA的PID算法学习 前言一、PID算法分析二、PID仿真分析1. PID代码2.PI代码3.P代码4.顶层5.测试文件6.仿真波形 总结 前言 学习内容:参考网站: PID算法控制 PID即:Proportional(比例)、Integral(积分&…...

黑马Mybatis

Mybatis 表现层&#xff1a;页面展示 业务层&#xff1a;逻辑处理 持久层&#xff1a;持久数据化保存 在这里插入图片描述 Mybatis快速入门 ![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/6501c2109c4442118ceb6014725e48e4.png //logback.xml <?xml ver…...

【快手拥抱开源】通过快手团队开源的 KwaiCoder-AutoThink-preview 解锁大语言模型的潜力

引言&#xff1a; 在人工智能快速发展的浪潮中&#xff0c;快手Kwaipilot团队推出的 KwaiCoder-AutoThink-preview 具有里程碑意义——这是首个公开的AutoThink大语言模型&#xff08;LLM&#xff09;。该模型代表着该领域的重大突破&#xff0c;通过独特方式融合思考与非思考…...

Keil 中设置 STM32 Flash 和 RAM 地址详解

文章目录 Keil 中设置 STM32 Flash 和 RAM 地址详解一、Flash 和 RAM 配置界面(Target 选项卡)1. IROM1(用于配置 Flash)2. IRAM1(用于配置 RAM)二、链接器设置界面(Linker 选项卡)1. 勾选“Use Memory Layout from Target Dialog”2. 查看链接器参数(如果没有勾选上面…...

微服务商城-商品微服务

数据表 CREATE TABLE product (id bigint(20) UNSIGNED NOT NULL AUTO_INCREMENT COMMENT 商品id,cateid smallint(6) UNSIGNED NOT NULL DEFAULT 0 COMMENT 类别Id,name varchar(100) NOT NULL DEFAULT COMMENT 商品名称,subtitle varchar(200) NOT NULL DEFAULT COMMENT 商…...

Spring Boot+Neo4j知识图谱实战:3步搭建智能关系网络!

一、引言 在数据驱动的背景下&#xff0c;知识图谱凭借其高效的信息组织能力&#xff0c;正逐步成为各行业应用的关键技术。本文聚焦 Spring Boot与Neo4j图数据库的技术结合&#xff0c;探讨知识图谱开发的实现细节&#xff0c;帮助读者掌握该技术栈在实际项目中的落地方法。 …...

【学习笔记】深入理解Java虚拟机学习笔记——第4章 虚拟机性能监控,故障处理工具

第2章 虚拟机性能监控&#xff0c;故障处理工具 4.1 概述 略 4.2 基础故障处理工具 4.2.1 jps:虚拟机进程状况工具 命令&#xff1a;jps [options] [hostid] 功能&#xff1a;本地虚拟机进程显示进程ID&#xff08;与ps相同&#xff09;&#xff0c;可同时显示主类&#x…...

JVM暂停(Stop-The-World,STW)的原因分类及对应排查方案

JVM暂停(Stop-The-World,STW)的完整原因分类及对应排查方案,结合JVM运行机制和常见故障场景整理而成: 一、GC相关暂停​​ 1. ​​安全点(Safepoint)阻塞​​ ​​现象​​:JVM暂停但无GC日志,日志显示No GCs detected。​​原因​​:JVM等待所有线程进入安全点(如…...

C++八股 —— 单例模式

文章目录 1. 基本概念2. 设计要点3. 实现方式4. 详解懒汉模式 1. 基本概念 线程安全&#xff08;Thread Safety&#xff09; 线程安全是指在多线程环境下&#xff0c;某个函数、类或代码片段能够被多个线程同时调用时&#xff0c;仍能保证数据的一致性和逻辑的正确性&#xf…...