现代 Web 应用开发与设计导论

Web 开发概况

Web 开发是指创建和维护网站、客户端程序、服务器与其他 Web 应用程序的过程。它包括使用不同的编程语言和技术来编写、测试和部署 Web 应用程序,以满足特定的业务需求和用户需求

通过 Web 开发技术,开发者能够设计实现诸多满足不同需求场景的应用程序,包括但不限于:网站开发、Android/IOS/Harmony OS NEXT 移动端应用程序、微信小程序、桌面应用、群聊机器人、游戏、浏览器插件、3D 建模、高性能服务器、分布式应用、虚拟现实应用、区块链、物联网设备……

前端和后端

在软件架构和程序设计领域,前端是软件系统中直接和用户交互的部分,而后端控制着软件的输出。将软件分为前端和后端是一种将软件不同功能的部分相互分离的抽象

在 Web 开发中,前端在绝大多数情况下指能够被用户直接访问与交互的模块,如网页、手机 App、桌面应用、小程序等。后端包括程序运行的后台服务器、存储数据的数据库以及其他数据中间件。大部分软件都概念性地分成了前端和后端,在大多数情况下,软件的后端经常是隐藏着而不被用户看到

狭义的前端通常是指网站或应用程序中与用户直接交互的部分。它是一种用于构建用户界面的技术和工具的集合,这些界面可以在 Web 浏览器中运行

image-20240131193923031

后端开发主要负责编写运行在服务端上的代码,通常来说,这部分的工作需要和数据库与 Web API 打交道,比如读写数据、读写文件、实现业务逻辑等。有些时候,业务逻辑存储在客户端,这时后台就是用来以 Web 服务的形式提供数据库中的数据

image-20240131193927733

开发者可以同时掌握前端和后端的技术,但大多数 Web 开发者都还是有一定的专精方向,甚至只在某一方面深入研究。尽管前后端是有天然的区别,但并没有规定它们各自的具体任务。有时前端只是完成数据的显示,而其他主要工作都在后端完成。但也有时,后端只是提供数据,而所有的计算和具体功能都在前端完成。前后端工作的分配,通常都是由项目的设计和架构来决定的

image-20240131193852641

浏览器

浏览器是用来检索、展示以及传递 Web 信息资源的应用程序。Web 信息资源由统一资源标识符 (Uniform Resource Identifier,URI) 所标记,它可以是一张网页、一张图片、一段视频或者任何在 Web 上所呈现的内容。使用者可以借助超链接,通过浏览器浏览互相关联的信息

浏览器内核 (Rendering Engine),是指浏览器最核心的部分,负责对网页语法的解释(如标准通用标记语言下的一个应用 HTML、CSS、JavaScript)并渲染网页。通常所谓的浏览器内核也就是浏览器所采用的渲染引擎,渲染引擎决定了浏览器如何显示网页的内容以及页面的格式信息。不同的浏览器内核对网页编写语法的解释也有不同

C/S B/S 架构

C/S 架构是一种典型的两层架构,其全称是 Client/Server,即客户端服务器端架构,其客户端包含一个或多个在用户的电脑上运行的程序,而服务器端有两种,一种是数据库服务器端,客户端通过数据库连接访问服务器端的数据;另一种是 Socket 服务器端,服务器端的程序通过 Socket 与客户端的程序通信

image-20240131193935031

B/S 架构的全称为 Browser/Server,即浏览器/服务器结构。Browser 指的是 Web 浏览器,极少数事务逻辑在前端实现,但主要事务逻辑在服务器端实现。B/S 架构的系统无须特别安装,只有 Web 浏览器即可

image-20240131193939509

HTML

超文本标记语言(Hyper Text Markup Language,简称:HTML)是一种用于创建网页的标准标记语言。HTML 是一种基础技术,常与 CSS、JavaScript 一起被众多网站用于设计网页、网页应用程序以及移动应用程序的用户界面。网页浏览器可以读取 HTML 文件,并将其渲染成可视化网页。HTML 描述了一个网站的结构语义随着线索的呈现,使之成为一种标记语言而非编程语言

CSS

层叠样式表(Cascading Style Sheets)是一种用来为结构化文档(如 HTML 文档或 XML 应用)添加样式(字体、间距和颜色等)的计算机语言。CSS3 现在已被大部分现代浏览器支持,而下一版的 CSS4 仍在开发中。CSS 不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。CSS 能够对网页中元素位置的排版进行像素级精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力

JavaScript

JavaScript 是一种高级的、解释型的编程语言

JavaScript 是一门基于原型、头等函数的语言,是一门多范式的语言,它支持面向对象程序设计,指令式编程,以及函数式编程。它由 ECMA(欧洲电脑制造商协会)通过 ECMAScript 实现语言的标准化

ECMAScript 6.0(简称 ES6)是 JavaScript 语言的下一代标准,于 2015 年 6 月正式发布。它的目标,是使得 JavaScript 语言可以用来编写复杂的大型应用程序,成为企业级开发语言

ES6 既是一个历史名词,也是一个泛指,含义是 5.1 版以后的 JavaScript 的下一代标准,涵盖了 ES2015、ES2016、ES2017 等等,而 ES2015 则是正式名称,特指该年发布的正式版本的语言标准

计算机网络基础知识

HTTP 协议

HTTP 是 Hyper Text Transfer Protocol(超文本传输协议)的缩写。HTTP 协议用于从 WWW 服务器传输超文本到本地浏览器的传送协议。它可以使浏览器更加高效,使网络传输减少。它不仅保证计算机正确快速地传输超文本文档,还确定传输文档中的哪一部分,以及哪部分内容首先显示 (如文本先于图形) 等。HTTP 是一个应用层协议,由请求和响应构成,是一个标准的客户端服务器模型。

image-20240131193951317

URL

在互联网上,每一信息资源都有统一的且在网上唯一的地址,该地址就叫 URL(Uniform Resource Locator, 统一资源定位符)。

URL 由三部分组成:资源类型、存放资源的主机域名、资源文件名。

也可认为由 4 部分组成:协议、主机、端口、路径。

URL 的一般格式为:protocol :// hostname [:port] / path / [:parameters] [?query] #fragment

image-20240131193059261

IP 地址和 DNS

IP 地址(类似 192.168.1.1 内网网关)是互联网协议地址,它给因特网上的每台计算机和其它设备都规定了一个唯一的地址。由于有这种唯一的地址,才保证了用户在连网的计算机上操作时,能够高效而且方便地从千千万万台计算机中选出自己所需的对象来

但是 IP 地址毕竟是一串毫无规律的数字,并不方便人类的记忆和书写。因此在 IP 地址的基础上又发展出一种符号化的地址方案,来代替数字型的 IP 地址,每一个符号化的地址都与特定的 IP 地址对应。这个与网络上的数字型 IP 地址相对应的字符型地址,就是域名

类似 http://www.google.com 这样的字符串就是“域名”,当访问 www.google.com 时,首先由 DNS(Domain Name System, DNS)域名系统解析为 IP 地址,随后再访问 IP

HTTP 请求

HTTP 请求是指从客户端到服务器端的请求消息,请求报文由请求行 (Request line)、请求头 (Header),空行、请求正文 4 部分组成

HTTP 响应

在接收和解释请求消息后,服务器会返回一个 HTTP 响应消息。HTTP 响应报文也由四个部分组成,分别是:状态行、消息报头、空行和响应正文

HTTP 方法

根据 HTTP 标准,HTTP 请求可以使用多种请求方法。HTTP 方法描述了对给定资源的期望动作,每一种请求方法都抽象出了一种不同给定语义。

HTTP1.0 定义了三种请求方法:GET、POST 和 HEAD 方法。

HTTP1.1 新增了六种请求方法:OPTIONS、PUT、PATCH、DELETE、TRACE 和 CONNECT 方法。

在实际开发中 GET、POST、PUT、DELETE 四类 HTTP 方法的使用率最高,能够用一套统一的语法规范对资源的 CRUD (增删改查) 逻辑进行抽象

GET 方法请求一个指定资源的表示形式,使用 GET 的请求应该只被用于获取数据

POST 方法用于将实体提交到指定的资源,通常导致在服务器上的状态变化或副作用

PUT 方法用请求有效载荷替换目标资源的所有当前表示

DELETE 方法删除指定的资源

image-20240131194356603

HTTP 状态码

当浏览者访问一个网页时,浏览者的浏览器会向网页所在服务器发出请求。当浏览器接收并显示网页前,此网页所在的服务器会返回一个包含 HTTP 状态码的信息头(server header)用以响应浏览器的请求

状态码类型:

状态码 类别 原因
1xx 信息性状态码 接收的请求正在处理
2xx 成功状态码 请求正常处理完毕
3xx 重定向状态码 需要进行附加操作以完成请求
4xx 客户端错误状态码 服务器无法处理请求
5xx 服务端错误状态码 服务器处理请求出错

常见的状态码:

100 Continue

客户端应继续其请求

200 OK

请求成功,一般用于 GET 与 POST 请求

201 Created

已创建,成功请求并创建了新的资源

401 Unauthorized

请求要求用户的身份认证

403 Forbidden

服务器理解请求客户端的请求,但是拒绝执行此请求

404 Not Found

服务器无法根据客户端的请求找到资源(网页)。

500 Internal Server Error

服务器内部错误,无法完成请求

RESTful API

REST 全称是 Representational State Transfer,中文意思是表述性状态转移。

RESTful 架构应该遵循统一接口原则,统一接口包含了一组受限的预定义的操作,不论什么样的资源,都是通过使用相同的接口进行资源的访问。

接口应该使用标准的 HTTP 方法如 GET,PUT 和 POST,并遵循这些方法的语义。

REST 所谓的表述指的是对资源的表述。要让一个资源可以被识别,需要有个唯一标识,在 Web 中这个唯一标识就是 URI

image-20240131194512617

版本控制工具

Git 版本控制工具

Git 是一个开源的分布式版本控制系统,可以有效、高速地处理从很小到非常大的项目版本管理。也是 Linus Torvalds 为了帮助管理 Linux 内核开发而开发的一个开放源码的版本控制软件

image-20240131194647849

GitHub 代码托管仓库

GitHub 是一个面向开源及私有软件项目的托管平台,因为只支持 Git 作为唯一的版本库格式进行托管

image-20240131194651596