mirror of
https://github.com/ZSCNetSupportDept/website.git
synced 2025-10-28 00:45:03 +08:00
Web历史初版～～
This commit is contained in:
@@ -1,19 +1,26 @@
|
||||
# Web的历史1️⃣-HTTP
|
||||
<!-- truncate -->
|
||||
|
||||
## 起源
|
||||
*注：这些文章本来是打算作为开发组后端培训文本的开篇而写的，但是我发现文章的内容过于复杂且有点离题，所以稍微修改了一下单独作为3篇独立的文章发布。*
|
||||
|
||||
*本文章的许多图片都直接来自 [MDN](https://developer.mozilla.org)，在这里先感谢图片的创作者。*
|
||||
|
||||
## 网络的起源
|
||||
人们最初发明网络的目的很简单：在不同的电脑之间传输文件。那个时候没有U盘，也没有蓝牙，计算机领域的前辈们必须从头设计一个高效的传输文件的办法。
|
||||
|
||||
假如我们的电脑上有一个文件`example.docx`,放在我们电脑的文件夹`documents`里面，我们如何使用最原始的方法把它传递给另外一台电脑呢？
|
||||
|
||||
首先为这台电脑分配一个IP地址，IP地址是一台电脑在互联网上唯一标识，例如我们电脑的的IP地址是`123.45.67.89`；我们在这台电脑上启动一个“HTTP服务程序”；在程序的设置里指定"根目录"是我们存放文件的文件夹`documents`。
|
||||
早期的程序员编写了一类叫做"HTTP服务器"的程序，程序的功能是选择电脑上的一个文件夹，将这个文件夹暴露在互联网上共所有人操作。这个文件夹叫做HTTP服务的“根目录”。
|
||||
|
||||
这个HTTP服务程序的作用是把你电脑上一个指定的文件夹(我们称为“根目录”)暴露在互联网上，所有人都可以下载这个文件夹下的文件。
|
||||
要使用这个程序，我们还要先给电脑分配一个IP地址，IP地址是一台电脑在互联网上的唯一标识，假如我们电脑的的IP地址是`123.45.67.89`。我们在这台电脑上启动一个HTTP服务程序。在程序的设置里指定根目录是我们存放文件的文件夹`documents`。
|
||||
|
||||
这个时候，打开另一台电脑，在浏览器地址栏中输入`http://123.45.67.89/example.docx`，这时候就会发生神奇的事情：浏览器会提示你下载`example.docx`,这样，文件就从一台电脑传输到了另一台电脑。
|
||||
前面说过，这个HTTP服务程序的作用是把你电脑上一个指定的文件夹(我们称为“根目录”)暴露在互联网上，所有人都可以下载这个文件夹下的文件。于是这个时候，我们打开随便另一台电脑(前提是有网)，在浏览器地址栏中输入`http://123.45.67.89/example.docx`，这时候就会发生神奇的事情：浏览器会提示你下载`example.docx`,这样，文件就从一台电脑传输到了另一台电脑。
|
||||
|
||||
假如`documents`文件夹下面还有另外一个文件`hi.txt`，那么当你在浏览器地址栏中输入`http://123.45.67.89/hi.txt`时，你就会发现浏览器显示了`hi.txt`这份文件的内容，因为浏览器可以直接显示`txt`文件，而不能直接显示`docx`文件。
|
||||
|
||||
|
||||
*IIS是Windows官方的HTTP服务器，有着图形化的配置界面，其它大部分HTTP服务器都需要通过命令行和配置文件进行配置。*
|
||||
|
||||
## HTTP协议
|
||||
|
||||
等等，刚才所讲的操作为什么能发生呢？当我在浏览器中输入网址并按下回车键的时候，这一切的背后到底发生了什么？
|
||||
@@ -22,11 +29,14 @@
|
||||
|
||||
HTTP协议，是`HyperText Transfer Protocol`的缩写，即"超文本传输协议"。是通过网络在电脑之间进行文件传输的默认协议。进行HTTP文件传输的双方，一个称之为”客户端“(Client),一个称之为"服务端"(Server)。
|
||||
|
||||
我们刚才就是在我们的电脑上部署了HTTP服务端，而浏览器就是我们通信中的客户端.一次完整的HTTP协议由客户端请求(Request)和服务端响应(Response)组成；**在HTTP协议中，总是由客户端先发起一次HTTP请求，然后由服务端返回这次请求的响应，这样才是一次完整的HTTP通信。**
|
||||
我们刚才就是在我们的电脑上部署了HTTP服务端，而浏览器就是我们通信中的客户端.一次完整的HTTP协议由客户端请求(Request)和服务端响应(Response)组成。**在HTTP协议中，总是由客户端先发起一次HTTP请求，然后由服务端返回这次请求的响应，这样才是一次完整的HTTP通信。**
|
||||
|
||||
|
||||
|
||||
|
||||
HTTP协议不仅可以获取一个文件(就像我们所做的)，也可以向服务端上传一个文件，或是修改服务端目录下某个文件的内容...
|
||||
|
||||
一次HTTP通信需要进行的操作(获取or上传等)由HTTP通信的“方法”指定，方法是请求头的一部分。
|
||||
一次HTTP通信要进行什么操作(获取or上传等)，由HTTP通信的“方法”指定，方法是请求头的一部分。
|
||||
|
||||
下面我们介绍HTTP协议的具体内容：
|
||||
|
||||
@@ -41,29 +51,35 @@ HTTP协议不仅可以获取一个文件(就像我们所做的)，也可以向
|
||||
- User-Agent:说明客户端是什么(是一个浏览器，还是命令行工具，还是爬虫？)
|
||||
- 自定义参数：除了上面的需要传输的标准内容，客户端还可以发送一些自定义的内容给服务端，这些内容总是以`Key=Value`的形式存在。
|
||||
|
||||
比如`content-encoding=gzip`,就是要求服务端把数据用`gzip`压缩之后传输过来，方便节省带宽。参数是放在地址栏里传输的，在正常的URI之后以`?`开头,以`&`分割，例如,一次完整的HTTP请求是：`http://123.45.67.89/example.docx?content-encoding=gzip&greeting=hello`
|
||||
举个例子，百度的搜索接口是`GET http://baidu.com/s`，要传递搜索内容到这个接口中，需要通过URL参数`wd`。如果你想用百度搜索东西，可以在地址栏里面输入`http://baidu.com/s?wd=你要搜的东西`，这就是URL参数的意义：向服务器传递一些自定义信息。
|
||||
|
||||
参数的内容不是HTTP标准，也就是服务端如何理解参数完全靠程序员的设置，如果程序员设置了`gzip`有关代码，那我们的参数才有意义，否则这些参数完全不起作用。
|
||||
参数的内容不是HTTP标准，也就是服务端如何理解参数完全靠程序员写的代码。比如谷歌的用户搜索接口就是`GET http://google.com/search?q=你要搜的东西`。
|
||||
|
||||
#### HTTP方法
|
||||
HTTP方法定义了这个请求具体要对指定的文件做什么，其中：
|
||||
- `GET`:获取指定文件的内容；
|
||||
- `GET`:获取指定文件的内容。
|
||||
- `POST`:上传一个文件，内容放在请求体(下面会讲到)
|
||||
- `PUT`:更新指定的文件，如果没有就创建一个
|
||||
- `PATCH`:修改指定的文件
|
||||
- `DELETE`:删除指指定的文件
|
||||
|
||||
我们日常使用浏览器，比如在地址栏中输入`baidu.com`,其实就是在对这个地址做GET请求，浏览器会把你的输入内容自动补全成 `GET http://www.baidu.com/` ,我们一般使用浏览器，没法手动做出除了GET之外的请求，但是其他请求今天又被经常使用，这其实是前端脚本在工作，以后会解释.
|
||||
其实这里还有一些方法的，我们以后讲。
|
||||
|
||||
我们日常使用浏览器，比如在地址栏中输入`baidu.com`,其实就是在对这个地址做GET请求，浏览器会把你的输入内容自动补全成 `GET http://www.baidu.com/` 这一HTTP请求
|
||||
|
||||
在浏览器地址栏里直接输入网址，默认就是发送GET请求。你可能会好奇，POST这些请求是怎么发出去的呢？这通常是由网页中的JavaScript代码在背后发送的。我们在之后的内容会讲到这一点。
|
||||
|
||||
|
||||
|
||||
|
||||
##### 请求体
|
||||
|
||||
对于某些方法，需要在请求时向服务器夹带一些东西(比如POST,PUT,PATCH需要你带上新文件的内容)，请求体就是装载这些东西的.
|
||||
对于某些方法，需要在请求时向服务器夹带一些东西(比如POST需要你带上新文件的内容)，请求体就是装载这些东西的.
|
||||
|
||||
像GET请求就没有请求体，因为GET请求不需要夹带信息.
|
||||
|
||||
:::tip 提示
|
||||
:::tip[提示]
|
||||
|
||||
浏览器虽然正常情况下没法做出GET外的请求，但是浏览器在控制台里是可以自定义请求的，以`Firefox`为例，在F12的`Network`一栏中点`New Request`(有一个加号)就可以发送自定义请求；例如`curl`等HTTP命令行工具也可以发送请求，专业一点的例如`Postman`是一个专业的HTTP测试工具，可以满足很多复杂的要求
|
||||
浏览器虽然正常情况下没法做出GET外的请求，但是浏览器在控制台里是可以自定义请求的，以`Firefox`为例，在F12的`Network`一栏中点`New Request`(有一个加号)就可以发送自定义请求。`curl`等HTTP命令行工具也可以发送请求.
|
||||
|
||||
实际上，HTTP协议中的“客户端”不仅仅是指浏览器，我们通常用的浏览器就是最常见的客户端，但其实像curl这样的命令行工具，或者手机APP，或者是浏览器里的JavaScript代码，当它们向服务器请求数据时，也扮演着客户端的角色。
|
||||
|
||||
:::
|
||||
|
||||
@@ -75,6 +91,8 @@ HTTP方法定义了这个请求具体要对指定的文件做什么，其中：
|
||||
|
||||
回应体就是包含了回应的主体内容了，如果是GET请求的话，那么就回应了所GET文件的内容，如果是其他请求的话，可能也会没有回应体，具体看使用的方法
|
||||
|
||||
|
||||
|
||||
#### 一个例子
|
||||
`GET`方法从服务器获得一个资源，我们在浏览器的地址栏输入一个地址时，就是在对这个URI做`GET`请求，前面的例子也是通过`GET`方法来进行的。
|
||||
|
||||
@@ -82,31 +100,55 @@ HTTP方法定义了这个请求具体要对指定的文件做什么，其中：
|
||||
|
||||
`POST`方法向服务器上传一个资源，例如使用某个客户端发送`POST http://example.org/sheet.xlsx`，在request body里面带上你的这个文件，那么`example.org`网站的根目录下就会多出一个叫做`sheet.xlsx`的文件
|
||||
|
||||
|
||||
除了上面介绍的这些方法，还有`DELETE`,`PATCH`等方法，分别对应了删除，修改一个资源，你可以在你的电脑上通过`curl`等程序，或者通过浏览器控制台来进行常规的`GET`之外的方法请求
|
||||
|
||||
:::tip 提示
|
||||
:::tip[提示]
|
||||
|
||||
httpbin.org 这个网站可以让你试验HTTP协议的方法
|
||||
|
||||
:::
|
||||
|
||||
:::info[HTTPS]
|
||||
|
||||
HTTP在网络上是明文传输的，也就是说客户端和服务器之间的每个网络节点，每个人都可以看到。这显然不方便隐私，所以人们发明了HTTPS，也就是把HTTP的正文加密了，HTTPS可以说是当今互联网的基石，有了HTTPS，我们才能放心地在网上输入密码，用银行卡付款等。
|
||||
|
||||
:::
|
||||
|
||||
### 网页与HTML
|
||||
|
||||
随着网络的发展，人们发现互联网的潜力远不止于传输文件。特别是浏览器的普及，人们希望能直接在网页上展示丰富的信息，而不只是把浏览器当作下载工具。前面我们说过了，浏览器可以直接展示`txt`文件，但是最大的问题是，`txt`文件是没有样式的。
|
||||
随着网络的发展，人们发现互联网的潜力远不止于传输文件。特别是浏览器的普及，人们希望能直接在网页上展示丰富的信息，而不只是把浏览器当作下载工具。前面我们说过了，浏览器可以直接展示txt文件，但是最大的问题是，txt文件是没有样式的。
|
||||
|
||||
比如：txt无法设置字体大小和颜色,无法加粗、倾斜文字,无法创建表格和列表,无法插入图片和链接。这些都是txt的局限。
|
||||
|
||||
为了解决这个问题，人们发明了`HTML`(HyperText Markup Language),就是“超文本标记语言”，HTML的核心思想是：在普通文本中加入特殊的标记，告诉浏览器如何显示内容。
|
||||
为了解决这个问题，人们发明了HTML(HyperText Markup Language),就是“超文本标记语言”，HTML的核心思想是：在普通文本中加入特殊的标记，告诉浏览器如何显示内容。
|
||||
|
||||
比如`<i>你好～</i>`就是指示浏览器显示`你好～`这段文字，并且以斜体的方式。你可以像打开`txt`文件一样打开`html`文件，只不过浏览器默认是加载渲染之后的界面而不是raw HTML
|
||||
比如`<i>你好～</i>`就是指示浏览器以斜体的方式显示`你好～`这段文字。你可以用系统自带的笔记本像打开txt文件一样打开HTML文件，只不过浏览器默认是加载渲染之后的界面而不是原始的HTML。
|
||||
|
||||
除HTML之外，人们还发明了CSS与HTML搭配使用，CSS可以对样式做更复杂高级精细的控制，这里就不细说了
|
||||
|
||||
回到我们的主题，不管使用的是什么方法，操作的是什么文件，HTTP协议传输的对象都是一些固定静态的文件，其内容在服务器上是固定不变的（除非手动修改），这样的网页称为静态网页。
|
||||
|
||||
静态网页中，所有用户看到的内容都相同，内容不会根据用户行为动态变化
|
||||
，服务器只负责传输文件，不进行复杂计算。
|
||||
静态网页中，所有用户看到的内容都相同，内容不会根据用户行为动态变化，服务器只负责传输文件，不进行复杂计算。
|
||||
|
||||
我们的wiki就是静态网页，在服务端上都对应着html页面，只不过加了非常多的样式显得很高级。
|
||||
我们的wiki就是静态网页，在服务端上都对应着HTML页面，只不过加了非常多的样式显得很高级。
|
||||
|
||||
很多常见的网站（如企业官网、技术文档、个人博客等）都是静态网页，虽然看起来很精美，但本质上就是经过精心设计的HTML和CSS文件。
|
||||
|
||||
|
||||
|
||||
:::info
|
||||
|
||||
这是三篇系列文章中的第**1**篇
|
||||
|
||||
点击以跳转：
|
||||
|
||||
**HTTP**(你在看的文章)
|
||||
|
||||
[动态网页](/blog/Web的历史2️⃣-动态网页)
|
||||
|
||||
[Web应用](/blog/Web的历史3️⃣-Web应用)
|
||||
|
||||
:::
|
||||
|
||||
|
||||
|
||||
@@ -1,2 +1,286 @@
|
||||
# Web的历史2️⃣-动态网页
|
||||
<!-- truncate -->
|
||||
|
||||
上篇文章我们已经了解了静态网页是如何工作的，但是这样的网页是不能满足大家对互联网的需求的。举例子来说：你访问b站首页`bilibili.com`,每次刷新，首页上显示给你的视频都不一样，不同的人访问这个首页，显示的也不一样，按理说大家都是访问一个网址，背后应该都是同一个文件，为什么每个人都不一样呢？这种功能是如何实现的？
|
||||
|
||||
淘宝上有数不清的商品在售卖，如果淘宝为每一个商品都在服务器目录下面创建一个html文件，好让大家通过访问`http://taobao.com/someproduct.html`来查看商品信息，那这个工作量就非常大了。而且，这样的网页，基本上没有交互的功能：我们希望用户可以点击按钮就能购买商品，商家在网页后台上操作就能上传商品。这种功能应该如何实现呢？
|
||||
|
||||
暂时先不考虑这些高级的问题，让我们先从最基础的讲起：
|
||||
|
||||
## 服务器端内嵌(SSI)
|
||||
|
||||
如果你想向网站中插入动态内容，SSI是最简单，最直接的办法，比如我们的wiki有许多页面，但是每个页面都有一些共同的元素：页面头部的导航栏，左侧的列表，页脚等。如果为每个页面都复制一份相同的HTML的话，那就太麻烦了，有没有什么办法，可以使HTML一次编写，到处渲染呢？
|
||||
|
||||
SSI(Server Side Includes)就是满足这种需求的一个HTML宏语言。它有点类似于C语言的`# include`宏：
|
||||
|
||||
假设这是我们首页的HTML:
|
||||
|
||||
```html
|
||||
<h1>wiki</h1>
|
||||
<!--#include file="navbar.html" -->
|
||||
<div class="article"></div>
|
||||
|
||||
```
|
||||
|
||||
假如`navbar.html`的内容如下：
|
||||
|
||||
```html
|
||||
|
||||
<tr>
|
||||
<td>教程</td>
|
||||
<td>文档</td>
|
||||
<td>高级</td>
|
||||
<td><a href="github.com/zscnsd/website">Github</a></td>
|
||||
</tr>
|
||||
|
||||
|
||||
```
|
||||
|
||||
那么用户访问我们首页时就会看到：
|
||||
|
||||
```html
|
||||
|
||||
<h1>wiki</h1>
|
||||
// highlight-start
|
||||
<tr>
|
||||
<td>教程</td>
|
||||
<td>文档</td>
|
||||
<td>高级</td>
|
||||
<td><a href="github.com/zscnsd/website">Github</a></td>
|
||||
</tr>
|
||||
// highlight-end
|
||||
<div class="article"></div>
|
||||
|
||||
|
||||
```
|
||||
如果导航栏的界面有变化，那么只需要修改`navbar.html`即可，不用修改网站中的每一个页面。
|
||||
|
||||
没错，SSI的功能就是简单地把制定的内容插入进HTML里。这对一些重复的元素(例如每个网页的页头，页脚，侧边栏)还有一些需要更新的内容很实用。
|
||||
|
||||
当然，SSI并没有解决动态网页的问题，它只是把需要手动更新的地方单独拿了出来，使维护静态网站更容易，所以程序员们又发明了CGI技术(其实SSI也可以嵌入CGI的)。
|
||||
|
||||
## CGI
|
||||
**CGI(Common Gateway Interface)** 是第一个真正实现动态网页的技术，它允许Web服务器执行外部程序来生成网页内容。
|
||||
|
||||
CGI的工作原理是：当用户访问特定URL时，服务器不是返回静态文件，而是执行一个程序，并将程序的输出作为HTTP响应返回给用户。
|
||||
|
||||
(举个天气预报的例子)：
|
||||
|
||||
Web服务器通常会把能执行的程序(除开静态文件)放在一个叫cgi-bin的特殊目录里。假设我们服务器的这个文件夹里有一个查询天气的Python程序`weather.py`,当用户访问`http://example.org/cgi-bin/weather.py?city=中山&date=2025-06-25`时,我们的HTTP服务程序会自动**执行**放在路径中`/cgi-bin/weather.py`的这个Python脚本，并且将客户端的请求头和请求体传递给脚本；
|
||||
|
||||
脚本解析请求头中`city=中山&date=2025-06-25`这个参数，在数据库中查询这个日期的天气，然后返回一个HTML给HTTP服务程序，再把这个HTML返回给客户端。
|
||||
|
||||
如果没有设置CGI,那么服务程序只会返回给客户端`TodayWeather.py`这个脚本文件的内容。
|
||||
|
||||
其实，CGI是一个接口格式，它定义了我们编写程序与HTTP服务程序之间如何交互。通常，HTTP服务程序给CGI程序的输入就是环境变量，输出就是标准输出。
|
||||
|
||||
CGI的巧妙之处在于，服务器不是用什么复杂的方式和脚本沟通，而是把请求信息（比如URL参数里的城市）变成程序很轻松就能读到的环境变量。而程序也不需要复杂的操作进行IO，它只需要把生成的HTML代码打印出来，服务器就会自动收集这些打印的内容，然后发回给用户的浏览器。
|
||||
|
||||
|
||||
下面是一个例子：
|
||||
|
||||
|
||||
```bash title="/var/www/cgi-bin/system-info.sh"
|
||||
|
||||
#!/bin/bash
|
||||
|
||||
# HTTP响应头
|
||||
echo "Content-type: text/html"
|
||||
echo ""
|
||||
|
||||
# HTML内容
|
||||
echo '<html>'
|
||||
echo '<head><title>系统信息</title></head>'
|
||||
echo '<body>'
|
||||
echo '<h1>服务器系统信息</h1>'
|
||||
echo '<p>当前时间：'$(date)'</p>'
|
||||
echo '<p>内存使用情况：</p>'
|
||||
echo '<pre>'
|
||||
free -h
|
||||
echo '</pre>'
|
||||
echo '</body>'
|
||||
echo '</html>'
|
||||
|
||||
```
|
||||
|
||||
每次用户访问这个页面，都会看到实时的系统信息，真正实现了动态内容。
|
||||
|
||||
虽然CGI现在很少见了，但它建立了一个重要概念：将URL请求映射到程序函数，而不是静态文件。这个思想成为了现代Web开发的基础。
|
||||
|
||||
## 嵌入式脚本
|
||||
随着动态网页需求的增长，纯CGI编程变得复杂。程序员们希望能够在HTML中直接编程动态代码，这样既保持了HTML的可读性，又能实现动态功能。
|
||||
|
||||
|
||||
这个就是嵌入式脚本，顾名思义就是把脚本和HTML混在一起，在HTML中嵌入脚本；
|
||||
|
||||
但是这种脚本和今天的前端JavaScript不同，它是由后端解释执行的，在返回HTML响应之前，HTTP服务程序会检查这个HTML里面有没有可以执行的脚本内容，有的话就执行这些脚本，并且把脚本的输出嵌入到HTML里面。任何有效的HTML也是有效的这类脚本语言。
|
||||
|
||||
从CGI到嵌入式脚本的另外一个关键驱动力是性能。CGI每来一个请求，服务器就得创建一个新进程去运行CGI程序，完成后再销毁，开销很大。而嵌入式脚本通常则是直接作为服务器的一部分运行，效率远高于CGI。
|
||||
|
||||
### JSP
|
||||
|
||||
举个例子吧，你可以轻松使用Java来创建动态网页，只需要把Java代码嵌入到HTML里面，使用`<% %>`包裹住代码：
|
||||
|
||||
```java
|
||||
|
||||
<html>
|
||||
<body>
|
||||
<p>当前时间：<%= new java.util.Date() %></p>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
||||
```
|
||||
|
||||
复杂一点的例子：
|
||||
|
||||
```java
|
||||
|
||||
<html>
|
||||
<body>
|
||||
<h1>欢迎访问我们的网站</h1>
|
||||
<p>当前服务器时间：<%= new java.util.Date() %></p>
|
||||
<p>您是第 <%= session.getAttribute("visitCount") %> 位访客</p>
|
||||
|
||||
<%-- 这是JSP注释，不会出现在最终HTML中 --%>
|
||||
<%
|
||||
// 这里可以写复杂的Java逻辑
|
||||
String userName = request.getParameter("user");
|
||||
if (userName != null) {
|
||||
out.println("<p>欢迎您，" + userName + "！</p>");
|
||||
}
|
||||
%>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
:::info[session和cookie]
|
||||
|
||||
在这段JSP代码中有一个对象叫做`session`，这是什么呢？实际上，因为HTTP是无状态的协议，意味着两次请求之间是完全独立的，一次请求不应该依赖另一次请求。这显得有点不灵活，于是人们会在HTTP的请求体上夹带一些额外的参数，用于表明用户的身份信息，比如在用户登录网站之后，服务器会给客户端一个密钥，下一次客户端请求页面是带上这个密钥，服务器就知道这是某个用户的请求。在这种模式下，服务器需要为每个用户维护信息，比如最简单地需要维护密钥是对应哪个用户的，这些信息就叫做session。
|
||||
|
||||
:::
|
||||
|
||||
类似于这样的脚本叫做JSP(JavaServer Pages),它在后端返回时被转换成Java Servlet代码来执行，本质上，JSP是Java Servlet的一种语法糖。至于JSP和Java Servlet都是什么，自行了解吧。
|
||||
|
||||
### PHP
|
||||
比JSP更灵活的就是PHP,PHP就是一门纯正的脚本语言了，它的用法与JSP类似,使用`<?php ?>包裹代码`：
|
||||
|
||||
```php
|
||||
|
||||
<html>
|
||||
<body>
|
||||
<h1>欢迎来到我的网站</h1>
|
||||
<?php
|
||||
$time = date('Y-m-d H:i:s');
|
||||
echo "<p>当前时间：$time</p>";
|
||||
?>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
也可以这样写，这样就类似于CGI程序的写法了：
|
||||
|
||||
|
||||
```php
|
||||
|
||||
<?php
|
||||
echo "<html><body>";
|
||||
echo "<h1>欢迎来到我的网站</h1>";
|
||||
$time = date('Y-m-d H:i:s');
|
||||
echo "<p>当前时间：$time</p>";
|
||||
echo "</body></html>";
|
||||
?>
|
||||
|
||||
```
|
||||
|
||||
### LAMP
|
||||
这种动态网页的编写方法流行了很多年，形成了一个叫做"LAMP"的套路：Linux+Apache+MySQL+PHP;就是将电脑装上Linux系统，运行Apache这个HTTP服务端，使用PHP作为动态脚本语言,使用MySQL来存储和访问业务数据。
|
||||
|
||||
需要注意的是，这四个都是开源免费的软件，LAMP的兴起，是开源软件运动的标志之一。开源软件使得部署网站的成本极大地降低，推动了互联网的繁荣。如果你想建站，那时候互联网上到处都是"LAMP一件安装脚本"之类的东西，现在也能搜到不少。一个下午就能上线一个完备的网站。这些技术的出现，使得开网站不再局限于大企业才能办得到的事情，一时间互联网上到处都是个人或者小单位的网站，甚至后来出现了诸如Wordpress之类的方案，不会写代码也能开网站。繁荣的生态，网页上丰富的动态内容，形成了被我们称为“Web 2.0”的时代。
|
||||
|
||||
LAMP的一个典型反面是微软全家桶：Windows Server+IIS+SQL Server+ASP，这套技术方案需要给微软缴纳高额的授权费用，在当时基本上只限于追求稳定和售后服务的企业使用。我们的文章也没有怎么介绍这些技术。不过IIS对于个人用自己的电脑建站还是非常方便的。(当然国内没有公网IP那是另一回事了╮(￣▽￣)╭)
|
||||
|
||||
## MVC架构
|
||||
随着网页的不断发展，出现了复杂的业务逻辑，并且页面也越来越复杂；这时候，把页面和程序逻辑混在一起的嵌入式脚本在庞大的复杂代码情况下变得难以维护。
|
||||
|
||||
而且它们都有一个特点：依赖于具体的某个HTTP服务程序，PHP依赖于Apache的`mod_php`或Nginx的FastCGI支持，JSP依赖于Servlet容器例如Tomcat,这增加了开发与部署的耦合度，更使得项目难以管理。嵌入式脚本难以复用已有的代码，这些代码的测试也需要模拟HTTP环境，难以测试。
|
||||
|
||||
此时兴起了一种新的Web后端编程思想，它就是MVC(Model-View-Controller)
|
||||
|
||||
简单来说，根据大量的开发经验累积，人们发现一个动态网页的后端通常需要做到这3件事情：
|
||||
- Model:使用面向对象的方法为业务建模，把数据对应到编程语言中的对象，把对数据的操作对应到对象的方法。负责对业务数据进行实际的操作。
|
||||
- View：输入数据，负责把数据变成用户可以直观看懂的HTML。
|
||||
- Controller：负责协调，调用上面两个部分。
|
||||
|
||||
|
||||
|
||||
例如，当我们在报修系统中想要查询一个片区的全部报修时，首先我们访问`http://wwbx.zsxyww.com/QueryTickets.php?zone=朝晖&status=pending`
|
||||
|
||||
然后服务器根目录下的`QueryTickets.php`程序就会接受到我们的请求(在MVC时期的PHP程序已经不像嵌入式脚本那时混写HTML和PHP,整个文件就是以`<?php`开头的一整个脚本，没有HTML)
|
||||
|
||||
`QueryTickets.php`脚本就是MVC中的Controller,脚本解析到我们想寻找朝晖片区所有待解决的报修，于是它调用一个函数`Ticket.Query()`，但是Controller知道朝晖片区在数据库对应的编号是10,待解决状态的编号是0，于是他把URI参数中的`朝晖`和`pending`改成`10`和`0`传递给函数；
|
||||
|
||||
这个函数会去数据库（比如前面提到的MySQL）里查询数据，最终执行类似于`SELECT * FROM tickets WHERE zone=10 AND status=0;`这样的SQL语句，然后把查询的每一行都对应一个Ticket对象，返回一个Ticket的数组。这个函数，以及Ticket类的定义就是Model负责的部分。
|
||||
|
||||
:::info
|
||||
|
||||
SQL(Structured Query Language)是进行数据库操作的标准途径，你可以简单地把数据库理解成有更多功能和性能更高的Excel表格，即使这个表格有上亿行，数据库也能在不到几秒内精准执行复杂的数据读取或写入。
|
||||
|
||||
刚才的那个SQL语句，就是让数据库找到所有在10号片区(朝晖)未解决的工单，给出这些工单的所有信息。是不是非常直观方便？
|
||||
|
||||
数据库往往是后端的核心。许多后端系统，可以说就是SQL数据库的套壳，它们的业务逻辑不会超过"CRUD"，这也是为什么例如Supabase之类的产品能够如此的流行。
|
||||
|
||||
:::
|
||||
|
||||
Model是程序的核心。它不关心页面长什么样，只负责处理和业务相关的数据。在我们报修系统的例子里，它定义了一张报修单应该包含哪些信息（如ID、地点、状态），并提供了操作这些数据的方法（如从数据库查询报修单、更新报修单状态等）。这是网站业务逻辑的体现。
|
||||
|
||||
当Controller获得Model返回的数据时，它就把这些数据移交View函数渲染，调用View函数。View首先把Ticket对象里面的`10`和`0`改成`朝晖`和`待解决`，然后检查客户端的UA,如果是电脑的话就在一行显示更多数据，如果是手机的话就返回紧凑的界面。根据不同的访问设备，预先在系统中存放了一些模板HTML文件，view读取这些文件，然后将数据放到里面，返回给用户；
|
||||
|
||||
这样用户访问`QueryTickets.php`时，就会看到一个根据后台数据实时更新的一个页面。这就是一个简单的MVC架构页面的例子。
|
||||
|
||||
:::tip[提示]
|
||||
|
||||
哈哈，这个例子其实是骗你的，我们的报修系统既不是用的PHP,也不是用的MVC架构，甚至路由都是虚拟的。这个例子只是让你比较好懂～
|
||||
|
||||
:::
|
||||
|
||||
### 虚拟路由
|
||||
实际上，程序员们认为基于传统服务器文件的路由架构严重阻碍了后端系统的灵活设计。也就是说，用户输入的URI,必须对应根目录里面一个实际存在的文件，比如上面的`QueryTickets.php`，在后端就是一个实际存在的脚本。由HTTP程序负责调用这个脚本，并且把脚本的输出发送过去。
|
||||
|
||||
MVC架构，包括更新的设计，都采用虚拟路由。也就是说，URI不再匹配根目录里的一个文件，什么URI匹配什么现在完全取决于程序员希望它匹配什么，比如匹配程序里的某个函数（不再一定是脚本语言，可以编译语言例如C语言的函数），把函数的输出传给用户。
|
||||
|
||||
通常的MVC设计下，在MVC之前程序还有一个路由层，客户端的HTTP请求首先到达这里，经过这里解析后，转交给不同的地方
|
||||
|
||||
举例来说明，当用户访问`http://wwbx.zsxyww.com/Tickets/朝晖/pending`的时候，程序员可以在路由层定义：所有以`/Tickets`开头的URI,全部转交`Query()`函数处理，`Query()`看到转交过来的请求头URI在`/Tickets`后面是`/朝晖/pending`，就去数据库查询朝晖的待解决工单，然后调用渲染函数返回HTML。在服务器根目录下面是没有`/Tickets/朝晖/pending`这个文件的。嗯...其实连根目录都不需要了，
|
||||
|
||||
发展到后来，连HTTP服务器也没有了：因为程序员们觉得每次都要配置一个独立的HTTP服务器（比如Apache）再来运行自己的程序有点麻烦。于是，很多现代的Web框架干脆自己内置了一个迷你的HTTP服务器功能。启动程序时，这个内置的服务器也一起启动了，让开发和部署变得更简单。
|
||||
|
||||
当然，这种模式下，URI也可以传统地绑定到某个文件上。例如，我们的官网`www.zsxyww.com`在接受到任何无效的URI时，都会将请求路由到文件`404.html`上，表示没有找到你请求的东西，比如，`www.zsxyww.com/hahaha`,和`www.zsxyww.com/aaa/bbb`都没有在程序路由中规定，一切超出规定的URI全部都路由到`404.html`文件上，返回一个静态的文件。
|
||||
|
||||
|
||||
|
||||
### MVC框架
|
||||
MVC作为一种编程思想可以被程序员灵活地使用，不过也有一些在编程语言基础上编写的MVC框架，来约束程序员使用MVC的思想开发后端，也简化了开发；这种框架有很多，而且不少编程语言都有，我们介绍几个有代表性的：
|
||||
|
||||
- Ruby on Rails 约定大于配置
|
||||
- Django
|
||||
- Spring Boot
|
||||
|
||||
|
||||
:::info
|
||||
|
||||
这是三篇系列文章中的第**2**篇
|
||||
|
||||
点击以跳转：
|
||||
|
||||
[HTTP](/blog/Web的历史1️⃣-HTTP)
|
||||
|
||||
**动态网页**(你在看的文章)
|
||||
|
||||
[Web应用](/blog/Web的历史3️⃣-Web应用)
|
||||
|
||||
:::
|
||||
|
||||
|
||||
|
||||
File diff suppressed because one or more lines are too long
@@ -161,6 +161,7 @@ const config = {
|
||||
prism: {
|
||||
theme: prismThemes.github,
|
||||
darkTheme: prismThemes.dracula,
|
||||
additonalLanguages: ["Java", "PHP", "Bash"],
|
||||
},
|
||||
docs: {
|
||||
sidebar: {
|
||||
|
||||
BIN
static/img/blog/basic_static_app_server.png
Normal file
BIN
static/img/blog/basic_static_app_server.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.1 KiB |
231
static/img/blog/fetching-a-page.svg
Normal file
231
static/img/blog/fetching-a-page.svg
Normal file
@@ -0,0 +1,231 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="710" height="470" style="background-color:#fff" viewBox="-0.5 -0.5 710 470">
|
||||
<rect width="100%" height="100%" fill="#FFF"/>
|
||||
<rect width="710" height="470" fill="#FFF" pointer-events="all" rx="14.1" ry="14.1"/>
|
||||
<rect width="320" height="420" x="20" y="30" fill="#FFF" stroke="#000" pointer-events="all" rx="9.6" ry="9.6"/>
|
||||
<rect width="140" height="70" x="190" y="90" fill="#fff2cc" stroke="#d6b656" pointer-events="all" rx="2.1" ry="2.1"/>
|
||||
<switch transform="translate(-.5 -.5)">
|
||||
<foreignObject width="100%" height="100%" pointer-events="none" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow:visible;text-align:left">
|
||||
<div xmlns="http://www.w3.org/1999/xhtml" style="display:flex;align-items:unsafe center;justify-content:unsafe center;width:134px;height:1px;padding-top:125px;margin-left:193px">
|
||||
<div data-drawio-colors="color: rgb(0, 0, 0);" style="box-sizing:border-box;font-size:0;text-align:center">
|
||||
<div style="display:inline-block;font-size:16px;font-family:monospace;color:#000;line-height:1.2;pointer-events:all;white-space:normal;overflow-wrap:normal">
|
||||
image
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</foreignObject>
|
||||
<text x="260" y="130" font-family="Monospace" font-size="16" text-anchor="middle">image</text>
|
||||
</switch>
|
||||
<rect width="140" height="80" x="40" y="310" fill="#f8cecc" stroke="#b85450" pointer-events="all" rx="2.4" ry="2.4"/>
|
||||
<switch transform="translate(-.5 -.5)">
|
||||
<foreignObject width="100%" height="100%" pointer-events="none" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow:visible;text-align:left">
|
||||
<div xmlns="http://www.w3.org/1999/xhtml" style="display:flex;align-items:unsafe center;justify-content:unsafe center;width:134px;height:1px;padding-top:350px;margin-left:43px">
|
||||
<div data-drawio-colors="color: rgb(0, 0, 0);" style="box-sizing:border-box;font-size:0;text-align:center">
|
||||
<div style="display:inline-block;font-size:16px;font-family:monospace;color:#000;line-height:1.2;pointer-events:all;white-space:normal;overflow-wrap:normal">
|
||||
Video
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</foreignObject>
|
||||
<text x="110" y="355" font-family="Monospace" font-size="16" text-anchor="middle">Video</text>
|
||||
</switch>
|
||||
<rect width="140" height="80" x="190" y="310" fill="#ffe6cc" stroke="#d79b00" pointer-events="all" rx="2.4" ry="2.4"/>
|
||||
<switch transform="translate(-.5 -.5)">
|
||||
<foreignObject width="100%" height="100%" pointer-events="none" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow:visible;text-align:left">
|
||||
<div xmlns="http://www.w3.org/1999/xhtml" style="display:flex;align-items:unsafe center;justify-content:unsafe center;width:134px;height:1px;padding-top:350px;margin-left:193px">
|
||||
<div data-drawio-colors="color: rgb(0, 0, 0);" style="box-sizing:border-box;font-size:0;text-align:center">
|
||||
<div style="display:inline-block;font-size:16px;font-family:monospace;color:#000;line-height:1.2;pointer-events:all;white-space:normal;overflow-wrap:normal">
|
||||
Advertisement
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</foreignObject>
|
||||
<text x="260" y="355" font-family="Monospace" font-size="16" text-anchor="middle">Advertisement</text>
|
||||
</switch>
|
||||
<rect width="70" height="10" x="40" y="410" fill="#ccc" pointer-events="all" rx="3.6" ry="3.6"/>
|
||||
<rect width="200" height="10" x="120" y="410" fill="#ccc" pointer-events="all" rx="3.6" ry="3.6"/>
|
||||
<rect width="140" height="10" x="40" y="90" fill="#ccc" pointer-events="all" rx="3.6" ry="3.6"/>
|
||||
<rect width="130" height="10" x="40" y="110" fill="#ccc" pointer-events="all" rx="3.6" ry="3.6"/>
|
||||
<rect width="40" height="10" x="40" y="130" fill="#ccc" pointer-events="all" rx="3.6" ry="3.6"/>
|
||||
<rect width="90" height="10" x="90" y="130" fill="#ccc" pointer-events="all" rx="3.6" ry="3.6"/>
|
||||
<rect width="90" height="10" x="40" y="182" fill="#ccc" pointer-events="all" rx="3.6" ry="3.6"/>
|
||||
<rect width="90" height="10" x="40" y="222" fill="#ccc" pointer-events="all" rx="3.6" ry="3.6"/>
|
||||
<rect width="90" height="10" x="40" y="262" fill="#ccc" pointer-events="all" rx="3.6" ry="3.6"/>
|
||||
<rect width="90" height="10" x="135" y="262" fill="#ccc" pointer-events="all" rx="3.6" ry="3.6"/>
|
||||
<rect width="90" height="10" x="40" y="282" fill="#ccc" pointer-events="all" rx="3.6" ry="3.6"/>
|
||||
<rect width="90" height="10" x="140" y="282" fill="#ccc" pointer-events="all" rx="3.6" ry="3.6"/>
|
||||
<rect width="120" height="10" x="135" y="222" fill="#ccc" pointer-events="all" rx="3.6" ry="3.6"/>
|
||||
<rect width="120" height="10" x="40" y="242" fill="#ccc" pointer-events="all" rx="3.6" ry="3.6"/>
|
||||
<rect width="120" height="10" x="135" y="182" fill="#ccc" pointer-events="all" rx="3.6" ry="3.6"/>
|
||||
<rect width="120" height="10" x="40" y="202" fill="#ccc" pointer-events="all" rx="3.6" ry="3.6"/>
|
||||
<rect width="80" height="10" x="230" y="262" fill="#ccc" pointer-events="all" rx="3.6" ry="3.6"/>
|
||||
<rect width="120" height="10" x="170" y="242" fill="#ccc" pointer-events="all" rx="3.6" ry="3.6"/>
|
||||
<rect width="40" height="10" x="170" y="202" fill="#ccc" pointer-events="all" rx="3.6" ry="3.6"/>
|
||||
<rect width="40" height="10" x="240" y="282" fill="#ccc" pointer-events="all" rx="3.6" ry="3.6"/>
|
||||
<rect width="40" height="10" x="270" y="222" fill="#ccc" pointer-events="all" rx="3.6" ry="3.6"/>
|
||||
<rect width="90" height="10" x="220" y="202" fill="#ccc" pointer-events="all" rx="3.6" ry="3.6"/>
|
||||
<rect width="50" height="10" x="40" y="430" fill="#ccc" pointer-events="all" rx="3.6" ry="3.6"/>
|
||||
<rect width="40" height="10" x="120" y="430" fill="#ccc" pointer-events="all" rx="3.6" ry="3.6"/>
|
||||
<rect width="40" height="10" x="200" y="430" fill="#ccc" pointer-events="all" rx="3.6" ry="3.6"/>
|
||||
<rect width="50" height="10" x="280" y="430" fill="#ccc" pointer-events="all" rx="3.6" ry="3.6"/>
|
||||
<rect width="290" height="10" x="40" y="60" fill="#adadad" pointer-events="all" rx="3.6" ry="3.6"/>
|
||||
<rect width="130" height="10" x="40" y="150" fill="#ccc" pointer-events="all" rx="3.6" ry="3.6"/>
|
||||
<rect width="140" height="24" x="100" fill="none" pointer-events="all" rx=".72" ry=".72"/>
|
||||
<switch transform="translate(-.5 -.5)">
|
||||
<foreignObject width="100%" height="100%" pointer-events="none" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow:visible;text-align:left">
|
||||
<div xmlns="http://www.w3.org/1999/xhtml" style="display:flex;align-items:unsafe center;justify-content:unsafe center;width:134px;height:1px;padding-top:12px;margin-left:103px">
|
||||
<div data-drawio-colors="color: rgb(0, 0, 0);" style="box-sizing:border-box;font-size:0;text-align:center">
|
||||
<div style="display:inline-block;font-size:16px;font-family:monospace;color:#000;line-height:1.2;pointer-events:all;white-space:normal;overflow-wrap:normal">
|
||||
<div>
|
||||
Web document
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</foreignObject>
|
||||
<text x="170" y="17" font-family="Monospace" font-size="16" text-anchor="middle">Web document</text>
|
||||
</switch>
|
||||
<g stroke="#000">
|
||||
<path fill="none" stroke-miterlimit="10" d="M333 125h207V85h10" pointer-events="stroke"/>
|
||||
<circle cx="330" cy="125" r="3" pointer-events="all"/>
|
||||
</g>
|
||||
<g stroke="#000">
|
||||
<path fill="none" stroke-miterlimit="10" d="m283 85.01 132.5.49L550 85" pointer-events="stroke"/>
|
||||
<circle cx="280" cy="85" r="3" pointer-events="all"/>
|
||||
</g>
|
||||
<g stroke="#000">
|
||||
<path fill="none" stroke-miterlimit="10" d="M333 350h197v35h20" pointer-events="stroke"/>
|
||||
<circle cx="330" cy="350" r="3" pointer-events="all"/>
|
||||
</g>
|
||||
<g stroke="#000">
|
||||
<path fill="none" stroke-miterlimit="10" d="M180 307v-10h370" pointer-events="stroke"/>
|
||||
<circle cx="180" cy="310" r="3" pointer-events="all"/>
|
||||
</g>
|
||||
<rect width="150" height="24" x="370" y="20" fill="none" pointer-events="all" rx=".72" ry=".72"/>
|
||||
<switch transform="translate(-.5 -.5)">
|
||||
<foreignObject width="100%" height="100%" pointer-events="none" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow:visible;text-align:left">
|
||||
<div xmlns="http://www.w3.org/1999/xhtml" style="display:flex;align-items:unsafe center;justify-content:unsafe center;width:144px;height:1px;padding-top:32px;margin-left:373px">
|
||||
<div data-drawio-colors="color: rgb(0, 0, 0);" style="box-sizing:border-box;font-size:0;text-align:center">
|
||||
<div style="display:inline-block;font-size:16px;font-family:monospace;color:#000;line-height:1.2;pointer-events:all;white-space:normal;overflow-wrap:normal">
|
||||
<div>
|
||||
GET index.html
|
||||
<br/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</foreignObject>
|
||||
<text x="445" y="37" font-family="Monospace" font-size="16" text-anchor="middle">GET index.html
|
||||
</text>
|
||||
</switch>
|
||||
<rect width="150" height="24" x="370" y="60" fill="none" pointer-events="all" rx=".72" ry=".72"/>
|
||||
<switch transform="translate(-.5 -.5)">
|
||||
<foreignObject width="100%" height="100%" pointer-events="none" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow:visible;text-align:left">
|
||||
<div xmlns="http://www.w3.org/1999/xhtml" style="display:flex;align-items:unsafe center;justify-content:unsafe center;width:144px;height:1px;padding-top:72px;margin-left:373px">
|
||||
<div data-drawio-colors="color: rgb(0, 0, 0);" style="box-sizing:border-box;font-size:0;text-align:center">
|
||||
<div style="display:inline-block;font-size:16px;font-family:monospace;color:#000;line-height:1.2;pointer-events:all;white-space:normal;overflow-wrap:normal">
|
||||
<div>
|
||||
GET styles.css
|
||||
<br/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</foreignObject>
|
||||
<text x="445" y="77" font-family="Monospace" font-size="16" text-anchor="middle">GET styles.css
|
||||
</text>
|
||||
</switch>
|
||||
<rect width="150" height="24" x="370" y="103" fill="none" pointer-events="all" rx=".72" ry=".72"/>
|
||||
<switch transform="translate(-.5 -.5)">
|
||||
<foreignObject width="100%" height="100%" pointer-events="none" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow:visible;text-align:left">
|
||||
<div xmlns="http://www.w3.org/1999/xhtml" style="display:flex;align-items:unsafe center;justify-content:unsafe center;width:144px;height:1px;padding-top:115px;margin-left:373px">
|
||||
<div data-drawio-colors="color: rgb(0, 0, 0);" style="box-sizing:border-box;font-size:0;text-align:center">
|
||||
<div style="display:inline-block;font-size:16px;font-family:monospace;color:#000;line-height:1.2;pointer-events:all;white-space:normal;overflow-wrap:normal">
|
||||
<div>
|
||||
GET header.png
|
||||
<br/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</foreignObject>
|
||||
<text x="445" y="120" font-family="Monospace" font-size="16" text-anchor="middle">GET header.png
|
||||
</text>
|
||||
</switch>
|
||||
<rect width="150" height="24" x="370" y="268" fill="none" pointer-events="all" rx=".72" ry=".72"/>
|
||||
<switch transform="translate(-.5 -.5)">
|
||||
<foreignObject width="100%" height="100%" pointer-events="none" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow:visible;text-align:left">
|
||||
<div xmlns="http://www.w3.org/1999/xhtml" style="display:flex;align-items:unsafe center;justify-content:unsafe center;width:144px;height:1px;padding-top:280px;margin-left:373px">
|
||||
<div data-drawio-colors="color: rgb(0, 0, 0);" style="box-sizing:border-box;font-size:0;text-align:center">
|
||||
<div style="display:inline-block;font-size:16px;font-family:monospace;color:#000;line-height:1.2;pointer-events:all;white-space:normal;overflow-wrap:normal">
|
||||
<div>
|
||||
GET video.mp4
|
||||
<br/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</foreignObject>
|
||||
<text x="445" y="285" font-family="Monospace" font-size="16" text-anchor="middle">GET video.mp4
|
||||
</text>
|
||||
</switch>
|
||||
<rect width="150" height="24" x="370" y="326" fill="none" pointer-events="all" rx=".72" ry=".72"/>
|
||||
<switch transform="translate(-.5 -.5)">
|
||||
<foreignObject width="100%" height="100%" pointer-events="none" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow:visible;text-align:left">
|
||||
<div xmlns="http://www.w3.org/1999/xhtml" style="display:flex;align-items:unsafe center;justify-content:unsafe center;width:144px;height:1px;padding-top:338px;margin-left:373px">
|
||||
<div data-drawio-colors="color: rgb(0, 0, 0);" style="box-sizing:border-box;font-size:0;text-align:center">
|
||||
<div style="display:inline-block;font-size:16px;font-family:monospace;color:#000;line-height:1.2;pointer-events:all;white-space:normal;overflow-wrap:normal">
|
||||
<div>
|
||||
GET advert.jpg
|
||||
<br/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</foreignObject>
|
||||
<text x="445" y="343" font-family="Monospace" font-size="16" text-anchor="middle">GET advert.jpg
|
||||
</text>
|
||||
</switch>
|
||||
<rect width="140" height="70" x="550" y="50" fill="#bac8d3" stroke="#23445d" pointer-events="all" rx="2.1" ry="2.1"/>
|
||||
<switch transform="translate(-.5 -.5)">
|
||||
<foreignObject width="100%" height="100%" pointer-events="none" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow:visible;text-align:left">
|
||||
<div xmlns="http://www.w3.org/1999/xhtml" style="display:flex;align-items:unsafe center;justify-content:unsafe center;width:134px;height:1px;padding-top:85px;margin-left:553px">
|
||||
<div data-drawio-colors="color: rgb(0, 0, 0);" style="box-sizing:border-box;font-size:0;text-align:center">
|
||||
<div style="display:inline-block;font-size:16px;font-family:monospace;color:#000;line-height:1.2;pointer-events:all;white-space:normal;overflow-wrap:normal">
|
||||
Web server
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</foreignObject>
|
||||
<text x="620" y="90" font-family="Monospace" font-size="16" text-anchor="middle">Web server</text>
|
||||
</switch>
|
||||
<g stroke="#000">
|
||||
<path fill="none" stroke-miterlimit="10" d="M342.84 50.02 540 50v35h10" pointer-events="stroke"/>
|
||||
<circle cx="339.84" cy="50.02" r="3" pointer-events="all"/>
|
||||
</g>
|
||||
<rect width="140" height="70" x="550" y="262" fill="#d0cee2" stroke="#56517e" pointer-events="all" rx="2.1" ry="2.1"/>
|
||||
<switch transform="translate(-.5 -.5)">
|
||||
<foreignObject width="100%" height="100%" pointer-events="none" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow:visible;text-align:left">
|
||||
<div xmlns="http://www.w3.org/1999/xhtml" style="display:flex;align-items:unsafe center;justify-content:unsafe center;width:134px;height:1px;padding-top:297px;margin-left:553px">
|
||||
<div data-drawio-colors="color: rgb(0, 0, 0);" style="box-sizing:border-box;font-size:0;text-align:center">
|
||||
<div style="display:inline-block;font-size:16px;font-family:monospace;color:#000;line-height:1.2;pointer-events:all;white-space:normal;overflow-wrap:normal">
|
||||
Video server
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</foreignObject>
|
||||
<text x="620" y="302" font-family="Monospace" font-size="16" text-anchor="middle">Video server</text>
|
||||
</switch>
|
||||
<rect width="140" height="70" x="550" y="350" fill="#b1ddf0" stroke="#10739e" pointer-events="all" rx="2.1" ry="2.1"/>
|
||||
<switch transform="translate(-.5 -.5)">
|
||||
<foreignObject width="100%" height="100%" pointer-events="none" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow:visible;text-align:left">
|
||||
<div xmlns="http://www.w3.org/1999/xhtml" style="display:flex;align-items:unsafe center;justify-content:unsafe center;width:134px;height:1px;padding-top:385px;margin-left:553px">
|
||||
<div data-drawio-colors="color: rgb(0, 0, 0);" style="box-sizing:border-box;font-size:0;text-align:center">
|
||||
<div style="display:inline-block;font-size:16px;font-family:monospace;color:#000;line-height:1.2;pointer-events:all;white-space:normal;overflow-wrap:normal">
|
||||
Ad server
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</foreignObject>
|
||||
<text x="620" y="390" font-family="Monospace" font-size="16" text-anchor="middle">Ad server</text>
|
||||
</switch>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 16 KiB |
127
static/img/blog/http-request.svg
Normal file
127
static/img/blog/http-request.svg
Normal file
@@ -0,0 +1,127 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" style="background-color:#fff" viewBox="-.5 -.5 310 191">
|
||||
<rect width="100%" height="100%" fill="#FFF"/>
|
||||
<rect width="297" height="87" x="7" y="58" fill="#e6e6e6" pointer-events="all" rx="6.96" ry="6.96"/>
|
||||
<g stroke="#000" stroke-miterlimit="10">
|
||||
<path fill="none" d="M32.62 58.64 30.9 30" pointer-events="stroke"/>
|
||||
<path d="m32.93 63.88-2.75-6.84 2.44 1.6 2.22-1.88Z" pointer-events="all"/>
|
||||
</g>
|
||||
<path fill="none" d="M0 0h60v30H0z" pointer-events="all"/>
|
||||
<switch transform="translate(-.5 -.5)">
|
||||
<foreignObject width="100%" height="100%" pointer-events="none" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow:visible;text-align:left">
|
||||
<div xmlns="http://www.w3.org/1999/xhtml" style="display:flex;align-items:unsafe center;justify-content:unsafe center;width:58px;height:1px;padding-top:15px;margin-left:1px">
|
||||
<div data-drawio-colors="color: rgb(0, 0, 0);" style="box-sizing:border-box;font-size:0;text-align:center">
|
||||
<div style="display:inline-block;font-size:16px;font-family:Helvetica;color:#000;line-height:1.2;pointer-events:all;white-space:normal;overflow-wrap:normal">
|
||||
<div style="font-size:16px">Method</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</foreignObject>
|
||||
<text x="30" y="20" font-family="Helvetica" font-size="16" text-anchor="middle">Method</text>
|
||||
</switch>
|
||||
<path fill="none" d="M56 0h60v30H56z" pointer-events="all"/>
|
||||
<switch transform="translate(-.5 -.5)">
|
||||
<foreignObject width="100%" height="100%" pointer-events="none" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow:visible;text-align:left">
|
||||
<div xmlns="http://www.w3.org/1999/xhtml" style="display:flex;align-items:unsafe center;justify-content:unsafe center;width:58px;height:1px;padding-top:15px;margin-left:57px">
|
||||
<div data-drawio-colors="color: rgb(0, 0, 0);" style="box-sizing:border-box;font-size:0;text-align:center">
|
||||
<div style="display:inline-block;font-size:16px;font-family:Helvetica;color:#000;line-height:1.2;pointer-events:all;white-space:normal;overflow-wrap:normal">Path</div>
|
||||
</div>
|
||||
</div>
|
||||
</foreignObject>
|
||||
<text x="86" y="20" font-family="Helvetica" font-size="16" text-anchor="middle">Path</text>
|
||||
</switch>
|
||||
<path fill="none" d="M113 0h122v30H113z" pointer-events="all"/>
|
||||
<switch transform="translate(-.5 -.5)">
|
||||
<foreignObject width="100%" height="100%" pointer-events="none" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow:visible;text-align:left">
|
||||
<div xmlns="http://www.w3.org/1999/xhtml" style="display:flex;align-items:unsafe center;justify-content:unsafe center;width:120px;height:1px;padding-top:15px;margin-left:114px">
|
||||
<div data-drawio-colors="color: rgb(0, 0, 0);" style="box-sizing:border-box;font-size:0;text-align:center">
|
||||
<div style="display:inline-block;font-size:16px;font-family:Helvetica;color:#000;line-height:1.2;pointer-events:all;white-space:normal;overflow-wrap:normal">Protocol version</div>
|
||||
</div>
|
||||
</div>
|
||||
</foreignObject>
|
||||
<text x="174" y="20" font-family="Helvetica" font-size="16" text-anchor="middle">Protocol version</text>
|
||||
</switch>
|
||||
<path fill="none" d="M127 161h60v30h-60z" pointer-events="all"/>
|
||||
<switch transform="translate(-.5 -.5)">
|
||||
<foreignObject width="100%" height="100%" pointer-events="none" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow:visible;text-align:left">
|
||||
<div xmlns="http://www.w3.org/1999/xhtml" style="display:flex;align-items:unsafe center;justify-content:unsafe center;width:58px;height:1px;padding-top:176px;margin-left:128px">
|
||||
<div data-drawio-colors="color: rgb(0, 0, 0);" style="box-sizing:border-box;font-size:0;text-align:center">
|
||||
<div style="display:inline-block;font-size:16px;font-family:Helvetica;color:#000;line-height:1.2;pointer-events:all;white-space:normal;overflow-wrap:normal">
|
||||
<div style="font-size:16px">Headers</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</foreignObject>
|
||||
<text x="157" y="181" font-family="Helvetica" font-size="16" text-anchor="middle">Headers</text>
|
||||
</switch>
|
||||
<g stroke="#000" stroke-miterlimit="10">
|
||||
<path fill="none" d="M79.45 58.2 83.73 30" pointer-events="stroke"/>
|
||||
<path d="m78.67 63.39-1.26-7.27 2.04 2.08 2.57-1.38Z" pointer-events="all"/>
|
||||
</g>
|
||||
<g stroke="#000" stroke-miterlimit="10">
|
||||
<path fill="none" d="M153.71 58.24 166.96 30" pointer-events="stroke"/>
|
||||
<path d="m151.48 62.99.86-7.33 1.37 2.58 2.85-.6Z" pointer-events="all"/>
|
||||
</g>
|
||||
<rect width="36" height="21" x="15" y="65" fill="#f2fffc" pointer-events="all" rx="1.68" ry="1.68"/>
|
||||
<switch transform="translate(-.5 -.5)">
|
||||
<foreignObject width="100%" height="100%" pointer-events="none" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow:visible;text-align:left">
|
||||
<div xmlns="http://www.w3.org/1999/xhtml" style="display:flex;align-items:unsafe center;justify-content:unsafe flex-start;width:1px;height:1px;padding-top:76px;margin-left:19px">
|
||||
<div data-drawio-colors="color: #333333;" style="box-sizing:border-box;font-size:0;text-align:left">
|
||||
<div style="display:inline-block;font-size:16px;font-family:monospace;color:#333;line-height:1.2;pointer-events:all;white-space:nowrap">
|
||||
<p style="line-height:100%">
|
||||
<font color="#509ad4" style="font-size:16px">GET</font>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</foreignObject>
|
||||
<text x="19" y="80" fill="#333" font-family="Monospace" font-size="16">GET</text>
|
||||
</switch>
|
||||
<rect width="17" height="21" x="70" y="64.5" fill="#f5f5ff" pointer-events="all" rx="1.36" ry="1.36"/>
|
||||
<switch transform="translate(-.5 -.5)">
|
||||
<foreignObject width="100%" height="100%" pointer-events="none" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow:visible;text-align:left">
|
||||
<div xmlns="http://www.w3.org/1999/xhtml" style="display:flex;align-items:unsafe center;justify-content:unsafe flex-start;width:1px;height:1px;padding-top:75px;margin-left:74px">
|
||||
<div data-drawio-colors="color: #333333;" style="box-sizing:border-box;font-size:0;text-align:left">
|
||||
<div style="display:inline-block;font-size:16px;font-family:monospace;color:#333;line-height:1.2;pointer-events:all;white-space:nowrap">
|
||||
<p style="line-height:100%">/</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</foreignObject>
|
||||
<text x="74" y="80" fill="#333" font-family="Monospace" font-size="16">/</text>
|
||||
</switch>
|
||||
<rect width="100" height="22" x="101" y="64" fill="#f5ebef" pointer-events="all" rx="1.76" ry="1.76"/>
|
||||
<switch transform="translate(-.5 -.5)">
|
||||
<foreignObject width="100%" height="100%" pointer-events="none" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow:visible;text-align:left">
|
||||
<div xmlns="http://www.w3.org/1999/xhtml" style="display:flex;align-items:unsafe center;justify-content:unsafe flex-start;width:1px;height:1px;padding-top:75px;margin-left:105px">
|
||||
<div data-drawio-colors="color: #333333;" style="box-sizing:border-box;font-size:0;text-align:left">
|
||||
<div style="display:inline-block;font-size:16px;font-family:monospace;color:#333;line-height:1.2;pointer-events:all;white-space:nowrap">
|
||||
<p style="line-height:100%">
|
||||
<font color="#5d837e" style="font-size:16px">HTTP</font>/<font color="#cd5b92" style="font-size:16px">1.1</font>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</foreignObject>
|
||||
<text x="105" y="80" fill="#333" font-family="Monospace" font-size="16">HTTP/1.1</text>
|
||||
</switch>
|
||||
<rect width="284" height="48" x="15" y="90" fill="#cfe3f5" pointer-events="all" rx="3.84" ry="3.84"/>
|
||||
<switch transform="translate(-.5 -.5)">
|
||||
<foreignObject width="100%" height="100%" pointer-events="none" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow:visible;text-align:left">
|
||||
<div xmlns="http://www.w3.org/1999/xhtml" style="display:flex;align-items:unsafe center;justify-content:unsafe flex-start;width:278px;height:1px;padding-top:114px;margin-left:19px">
|
||||
<div data-drawio-colors="color: #333333;" style="box-sizing:border-box;font-size:0;text-align:left">
|
||||
<div style="display:inline-block;font-size:16px;font-family:monospace;color:#333;line-height:1.2;pointer-events:all;white-space:normal;overflow-wrap:normal">
|
||||
<div style="font-size:16px">
|
||||
<font color="#5d837e" style="font-size:16px">Host</font>: developer.mozilla.org</div>
|
||||
<div style="font-size:16px">
|
||||
<font color="#5d837e" style="font-size:16px">Accept-Language</font>: fr</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</foreignObject>
|
||||
<text x="19" y="119" fill="#333" font-family="Monospace" font-size="16">Host: developer.mozilla.org...</text>
|
||||
</switch>
|
||||
<g stroke="#000" stroke-miterlimit="10">
|
||||
<path fill="none" d="M157 144.37V161" pointer-events="stroke"/>
|
||||
<path d="m157 139.12 2.33 7-2.33-1.75-2.33 1.75Z" pointer-events="all"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 9.1 KiB |
121
static/img/blog/http-response.svg
Normal file
121
static/img/blog/http-response.svg
Normal file
@@ -0,0 +1,121 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" style="background-color:#fff" viewBox="-0.5 -0.5 422 205">
|
||||
<rect width="100%" height="100%" fill="#FFF"/>
|
||||
<rect width="381" height="105" x="30" y="51" fill="#e6e6e6" pointer-events="all" rx="3.15" ry="3.15"/>
|
||||
<path fill="none" d="M233 0h137v30H233z" pointer-events="all"/>
|
||||
<switch transform="translate(-.5 -.5)">
|
||||
<foreignObject width="100%" height="100%" pointer-events="none" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow:visible;text-align:left">
|
||||
<div xmlns="http://www.w3.org/1999/xhtml" style="display:flex;align-items:unsafe center;justify-content:unsafe center;width:135px;height:1px;padding-top:15px;margin-left:234px">
|
||||
<div data-drawio-colors="color: rgb(0, 0, 0);" style="box-sizing:border-box;font-size:0;text-align:center">
|
||||
<div style="display:inline-block;font-size:16px;font-family:Helvetica;color:#000;line-height:1.2;pointer-events:all;white-space:normal;overflow-wrap:normal">Status message</div>
|
||||
</div>
|
||||
</div>
|
||||
</foreignObject>
|
||||
<text x="302" y="20" font-family="Helvetica" font-size="16" text-anchor="middle">Status message</text>
|
||||
</switch>
|
||||
<path fill="none" d="M137 0h94v30h-94z" pointer-events="all"/>
|
||||
<switch transform="translate(-.5 -.5)">
|
||||
<foreignObject width="100%" height="100%" pointer-events="none" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow:visible;text-align:left">
|
||||
<div xmlns="http://www.w3.org/1999/xhtml" style="display:flex;align-items:unsafe center;justify-content:unsafe center;width:92px;height:1px;padding-top:15px;margin-left:138px">
|
||||
<div data-drawio-colors="color: rgb(0, 0, 0);" style="box-sizing:border-box;font-size:0;text-align:center">
|
||||
<div style="display:inline-block;font-size:16px;font-family:Helvetica;color:#000;line-height:1.2;pointer-events:all;white-space:normal;overflow-wrap:normal">Status code</div>
|
||||
</div>
|
||||
</div>
|
||||
</foreignObject>
|
||||
<text x="184" y="20" font-family="Helvetica" font-size="16" text-anchor="middle">Status code</text>
|
||||
</switch>
|
||||
<path fill="none" d="M0 0h118v30H0z" pointer-events="all"/>
|
||||
<switch transform="translate(-.5 -.5)">
|
||||
<foreignObject width="100%" height="100%" pointer-events="none" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow:visible;text-align:left">
|
||||
<div xmlns="http://www.w3.org/1999/xhtml" style="display:flex;align-items:unsafe center;justify-content:unsafe center;width:116px;height:1px;padding-top:15px;margin-left:1px">
|
||||
<div data-drawio-colors="color: rgb(0, 0, 0);" style="box-sizing:border-box;font-size:0;text-align:center">
|
||||
<div style="display:inline-block;font-size:16px;font-family:Helvetica;color:#000;line-height:1.2;pointer-events:all;white-space:normal;overflow-wrap:normal">Protocol version</div>
|
||||
</div>
|
||||
</div>
|
||||
</foreignObject>
|
||||
<text x="59" y="20" font-family="Helvetica" font-size="16" text-anchor="middle">Protocol version</text>
|
||||
</switch>
|
||||
<path fill="none" d="M192 175h60v30h-60z" pointer-events="all"/>
|
||||
<switch transform="translate(-.5 -.5)">
|
||||
<foreignObject width="100%" height="100%" pointer-events="none" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow:visible;text-align:left">
|
||||
<div xmlns="http://www.w3.org/1999/xhtml" style="display:flex;align-items:unsafe center;justify-content:unsafe center;width:58px;height:1px;padding-top:190px;margin-left:193px">
|
||||
<div data-drawio-colors="color: rgb(0, 0, 0);" style="box-sizing:border-box;font-size:0;text-align:center">
|
||||
<div style="display:inline-block;font-size:16px;font-family:Helvetica;color:#000;line-height:1.2;pointer-events:all;white-space:normal;overflow-wrap:normal">
|
||||
<div style="font-size:16px">Headers</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</foreignObject>
|
||||
<text x="222" y="195" font-family="Helvetica" font-size="16" text-anchor="middle">Headers</text>
|
||||
</switch>
|
||||
<rect width="36" height="21" x="197" y="56" fill="#f2fffc" pointer-events="all" rx="1.68" ry="1.68"/>
|
||||
<switch transform="translate(-.5 -.5)">
|
||||
<foreignObject width="100%" height="100%" pointer-events="none" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow:visible;text-align:left">
|
||||
<div xmlns="http://www.w3.org/1999/xhtml" style="display:flex;align-items:unsafe center;justify-content:unsafe center;width:1px;height:1px;padding-top:66px;margin-left:215px">
|
||||
<div data-drawio-colors="color: #333333;" style="box-sizing:border-box;font-size:0;text-align:center">
|
||||
<div style="display:inline-block;font-size:16px;font-family:monospace;color:#333;line-height:1.2;pointer-events:all;white-space:nowrap">OK</div>
|
||||
</div>
|
||||
</div>
|
||||
</foreignObject>
|
||||
<text x="215" y="71" fill="#333" font-family="Monospace" font-size="16" text-anchor="middle">OK</text>
|
||||
</switch>
|
||||
<rect width="42" height="21" x="139" y="56" fill="#f5f5ff" pointer-events="all" rx="1.68" ry="1.68"/>
|
||||
<switch transform="translate(-.5 -.5)">
|
||||
<foreignObject width="100%" height="100%" pointer-events="none" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow:visible;text-align:left">
|
||||
<div xmlns="http://www.w3.org/1999/xhtml" style="display:flex;align-items:unsafe center;justify-content:unsafe center;width:1px;height:1px;padding-top:66px;margin-left:160px">
|
||||
<div data-drawio-colors="color: #333333;" style="box-sizing:border-box;font-size:0;text-align:center">
|
||||
<div style="display:inline-block;font-size:16px;font-family:monospace;color:#333;line-height:1.2;pointer-events:all;white-space:nowrap">200</div>
|
||||
</div>
|
||||
</div>
|
||||
</foreignObject>
|
||||
<text x="160" y="71" fill="#333" font-family="Monospace" font-size="16" text-anchor="middle">200</text>
|
||||
</switch>
|
||||
<rect width="92" height="22" x="38" y="55" fill="#f5ebef" pointer-events="all" rx="1.76" ry="1.76"/>
|
||||
<switch transform="translate(-.5 -.5)">
|
||||
<foreignObject width="100%" height="100%" pointer-events="none" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow:visible;text-align:left">
|
||||
<div xmlns="http://www.w3.org/1999/xhtml" style="display:flex;align-items:unsafe center;justify-content:unsafe center;width:1px;height:1px;padding-top:66px;margin-left:84px">
|
||||
<div data-drawio-colors="color: #333333;" style="box-sizing:border-box;font-size:0;text-align:center">
|
||||
<div style="display:inline-block;font-size:16px;font-family:monospace;color:#333;line-height:1.2;pointer-events:all;white-space:nowrap">
|
||||
<p style="line-height:100%">
|
||||
<font color="#5d837e" style="font-size:16px">HTTP</font>/<font color="#cd5b92" style="font-size:16px">1.1</font>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</foreignObject>
|
||||
<text x="84" y="71" fill="#333" font-family="Monospace" font-size="16" text-anchor="middle">HTTP/1.1</text>
|
||||
</switch>
|
||||
<rect width="368" height="63" x="38" y="83" fill="#cfe3f5" pointer-events="all" rx="1.89" ry="1.89"/>
|
||||
<switch transform="translate(-.5 -.5)">
|
||||
<foreignObject width="100%" height="100%" pointer-events="none" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow:visible;text-align:left">
|
||||
<div xmlns="http://www.w3.org/1999/xhtml" style="display:flex;align-items:unsafe center;justify-content:unsafe flex-start;width:362px;height:1px;padding-top:115px;margin-left:42px">
|
||||
<div data-drawio-colors="color: #333333;" style="box-sizing:border-box;font-size:0;text-align:left">
|
||||
<div style="display:inline-block;font-size:16px;font-family:monospace;color:#333;line-height:1.2;pointer-events:all;white-space:normal;overflow-wrap:normal">
|
||||
<div style="font-size:16px">
|
||||
<font color="#5d837e" style="font-size:16px">date</font>: Tue, 18 Jun 2024 10:03:55 GMT</div>
|
||||
<div style="font-size:16px">
|
||||
<font color="#5d837e" style="font-size:16px">cache-control</font>: public, max-age=3600</div>
|
||||
<div style="font-size:16px">
|
||||
<font color="#5d837e" style="font-size:16px">content-type</font>: text/html</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</foreignObject>
|
||||
<text x="42" y="119" fill="#333" font-family="Monospace" font-size="16">date: Tue, 18 Jun 2024 10:03:55 GMT...</text>
|
||||
</switch>
|
||||
<g stroke="#000" stroke-miterlimit="10">
|
||||
<path fill="none" d="M222 152.37V175" pointer-events="stroke"/>
|
||||
<path d="m222 147.12 2.33 7-2.33-1.75-2.33 1.75Z" pointer-events="all"/>
|
||||
</g>
|
||||
<g stroke="#000" stroke-miterlimit="10">
|
||||
<path fill="none" d="M229.63 53.02 273.15 30" pointer-events="stroke"/>
|
||||
<path d="m224.99 55.48 5.09-5.34-.45 2.88 2.64 1.25Z" pointer-events="all"/>
|
||||
</g>
|
||||
<g stroke="#000" stroke-miterlimit="10">
|
||||
<path fill="none" d="m163.22 50.5 12-20.5" pointer-events="stroke"/>
|
||||
<path d="m160.56 55.04 1.53-7.22 1.13 2.68 2.89-.33Z" pointer-events="all"/>
|
||||
</g>
|
||||
<g stroke="#000" stroke-miterlimit="10">
|
||||
<path fill="none" d="M60.68 48.64 59.75 30" pointer-events="stroke"/>
|
||||
<path d="m60.94 53.88-2.68-6.87 2.42 1.63 2.25-1.86Z" pointer-events="all"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 9.1 KiB |
BIN
static/img/blog/iis-changeroot-websoft9.png
Normal file
BIN
static/img/blog/iis-changeroot-websoft9.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
BIN
static/img/blog/model-view-controller-light-blue.png
Normal file
BIN
static/img/blog/model-view-controller-light-blue.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 42 KiB |
BIN
static/img/blog/web_application_with_html_and_steps.png
Normal file
BIN
static/img/blog/web_application_with_html_and_steps.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 18 KiB |
Reference in New Issue
Block a user