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 个请求返回也不一样了。

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/35784.shtml

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

相关文章

泰迪智能科技大数据挖掘企业服务平台典型合作案例介绍

泰迪大数据挖掘企业服务平台 是一款通用的、企业级、智能化的数据分析模型构建与数据应用场景设计工具,能够一体化地完成数据集成、模型构建、模型发布,为数据分析、探索、服务流程提供支撑,提供完整的数据探索、多数据源接入、特征处理、模型…

高考志愿填报:选好专业还是选好学校?

目录 引言 专业解析 工科类专业 文科类专业 医药类专业 商科类专业 名校效应分析 名校声誉的影响 教育资源和研究机会 学术氛围和创新能力 就业优势 好专业和好学校的权衡 职业目标的判断 行业需求的考量 教育质量的比较 结论 引言 2024年高考帷幕落下&#xff…

七天速通javaSE:第四天 java方法

文章目录 前言一、什么是方法?二、方法的定义与调用1. 方法的定义2. 方法的调用3. 练习:定义比大小方法并调用 三、方法的重载四、递归五、可变参数拓展:命令行传递参数 前言 本章将学习java方法。 一、什么是方法? java方法是用…

uniapp 微信小程序端使用百度地图API

1、登录百度地图开放平台 https://lbsyun.baidu.com/(没有账号则先去创建一个百度账号) 2、进入百度地图开放平台控制台(导航栏“控制台”),点击“应用管理”-“我的应用” 3、选择“创建应用”,应用模块选…

机器学习辅助的乙醇浓度检测(毕设节选)

目录 1.为什么要机器学习 2. 神经网络一般组成 3.BP神经网络工作过程 4.评价指标 5.实操代码 1.为什么要用机器学习 人工分析大量的谐振模式,建立各种WGM的响应与未知目标之间的关系,是一个很大的挑战。机器学习(ML)能够自行识别全谱的全部特征。作为…

【PythonWeb开发】Flask自定义模板路径和静态资源路径

在大型的 Flask 项目中,确实可能会有多个子应用(Blueprints),每个子应用可能都有自己的静态文件和模板。为了更好地管理和组织这些资源,可以使用static_folder 和template_folder 属性来统一管理。必须同时设置好主应用…

期货交易记录20240626

文章目录 期货交易系统构建第一步、选品第二步、心态历练第三步、开仓纪律第四步、持仓纪律第五步、接下来的计划 2024年6月26号,开始写期货交易的第四篇日记。 交易记录:做了一笔纯碱的多单,在回撤了400个点左右后,看到企稳信号后…

LLM文本数据集775TB:覆盖32个领域,444个数据集

大语言模型在各领域展现出巨大潜力,其性能在很大程度上依赖于训练和测试所用的数据集。然而,目前在如何构建和优化这些数据集方面,尚缺乏统一的认识和方法论。下面从五个方面整合和分类了LLM数据集的基本内容:预训练语料库、指令微…

day38动态规划part01| 理论基础 509. 斐波那契数 70. 爬楼梯 746. 使用最小花费爬楼梯

**理论基础 ** 无论大家之前对动态规划学到什么程度,一定要先看 我讲的 动态规划理论基础。 如果没做过动态规划的题目,看我讲的理论基础,会有感觉 是不是简单题想复杂了? 其实并没有,我讲的理论基础内容,…

【TB作品】MSP430G2553,单片机,口袋板, 烘箱温度控制器

题3 烘箱温度控制器 设计一个基于MSP430的温度控制器,满足如下技术指标: (1)1KW 电炉加热,最度温度为110℃ (2)恒温箱温度可设定,温度控制误差≦2℃ (3)实时显…

如何创建一个vue项目

目录 1.环境准备 2.检查node和npm版本,确定已安装nodejs 3.全局安装vue/cli、webpack、webpack-cli、vue/cli-init 4.检查vue版本,注意V是大写 5.创建vue项目 6.得到的vue项目目录结构如下: 1.环境准备 安装nodejs,或者安装nvm,并使用…

记录一次CMS的代码审计

本次代码审计使用了白加黑的手法,用黑盒的视角测试功能点,用白盒的方式作为验证。 0x1 XSS guestbook处,可以看到有一个留言板 idea搜索guestbook。发现代码如下,其中的getModel是获取数据的方法。Guestbook.class就是具体要获取…

zkWASM:ZK+zkVM的下一站?

1. 引言 ZK技术具备极大通用性,也帮助以太坊从去中心化投资走向去信任化的价值观。“Don’t trust, Verify it!”,是ZK技术的最佳实践。ZK技术能够重构链桥、预言机、链上查询、链下计算、虚拟机等等一系列应用场景,而通用型的ZK协处理器就是…

【Docker】镜像

目录 1. 镜像拉取 2. 镜像查询 3. 镜像导出 4. 镜像上传 5. 镜像打标签 6. 镜像上推 7. 镜像删除 8. 镜像运行及修改 8.1 在registry 节点运行 mariadb 镜像,将宿主机 13306 端口作为容器3306 端口映射 8.2 查看容器ID 8.3 进入容器 8.4 创建数据库xd_d…

SK Hynix 3D DRAM良率突破56.1%,开启存储新时代

根据韩国财经媒体Business Korea独家报道:在刚刚结束的VLSI 2024国际研讨会上,韩国半导体巨头SK Hynix公布了一项振奋人心的进展:其五层堆叠3D DRAM的制造良率已达到56.1%。此成果标志着3D DRAM技术在商业化道路上迈出了坚实的一步&#xff0…

JUC 队列

常见的阻塞队列 Queue接口 public interface Queue<E> extends Collection<E> {//添加一个元素&#xff0c;添加成功返回true, 如果队列满了&#xff0c;就会抛出异常boolean add(E e);//添加一个元素&#xff0c;添加成功返回true, 如果队列满了&#xff0c;返回…

sudo 权限之危险的 bash 命令

文章目录 [toc]事出有因干就完事了创建用户配置 sudo 权限sudo 验证使用 bash 命令执行 chmod 命令使用 bash 命令执行删根 事出有因 使用普通用户安装 tidb 时&#xff0c;发现报错了&#xff0c;报错内容如下&#xff1a; ERROR SSHCommand {"host": "…

三十九篇:UML与SysML:掌握现代软件和系统架构的关键

UML与SysML&#xff1a;掌握现代软件和系统架构的关键 1. 引言 1.1 为什么系统设计如此关键 在当今快速发展的技术环境中&#xff0c;系统设计的重要性不言而喻。无论是软件开发还是复杂的系统工程&#xff0c;良好的设计是确保项目成功的基石。系统设计不仅关系到功能的实现…

【Windows】Windows 10 + PowerToys 快捷键

1、Windows 10 快捷键2、PowerToys 快捷键2.1、始终置顶2.2、颜色选择器2.3、打开FancyZones编辑器2.3.1、FancyZones编辑器编辑布局2.3.2、将窗口放置到指定区域 2.4、鼠标实用工具2.4.1、查找我的鼠标2.4.2、启用/关闭鼠标荧光笔2.4.3、启用/关闭鼠标跳转2.4.4、 启用/关闭鼠…

Spring统一功能

文章目录 一、什么是统一功能二、拦截器2.1 什么是拦截器2.2 拦截器的使用2.3 案例&#xff1a;不拦截前端的请求2.4 拦截器是如何实现的 ---- >分析DispatcherServlet源码分析 三、适配器模式四、统一数据返回格式五、统一异常六、案例&#xff1a;在图书管理系统使用统一功…