websiteTeam/website
1
0
Fork 0
mirror of https://github.com/ZSCNetSupportDept/website.git synced 2025-10-29 01:15:04 +08:00
Code Activity
Files
build
website/blog/rss.xml
abc db6e8cfdf1 Deploy website - based on 505b5497c8
2025-10-09 16:40:56 +08:00

438 lines
186 KiB
XML
Raw Permalink Blame History

This file contains invisible Unicode characters

This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<?xml version="1.0" encoding="utf-8"?>
<rss version="2.0" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:content="http://purl.org/rss/1.0/modules/content/">
<channel>
<title>中山学院网络维护科 Blog</title>
<link>https://developer.zsxyww.com/blog</link>
<description>中山学院网络维护科 Blog</description>
<lastBuildDate>Sun, 13 Jul 2025 03:23:58 GMT</lastBuildDate>
<docs>https://validator.w3.org/feed/docs/rss2.html</docs>
<generator>https://github.com/jpmonette/feed</generator>
<language>en</language>
<item>
<title><![CDATA[Web的历史1️⃣-HTTP]]></title>
<link>https://developer.zsxyww.com/blog/Web的历史1️⃣-HTTP</link>
<guid>https://developer.zsxyww.com/blog/Web的历史1️⃣-HTTP</guid>
<pubDate>Sun, 13 Jul 2025 03:23:58 GMT</pubDate>
<description><![CDATA[注：这些文章本来是打算作为开发组后端培训文本的开篇而写的，但是我发现文章的内容过于复杂且有点离题，所以稍微修改了一下单独作为3篇独立的文章发布。]]></description>
<content:encoded><![CDATA[<p><em>注：这些文章本来是打算作为开发组后端培训文本的开篇而写的，但是我发现文章的内容过于复杂且有点离题，所以稍微修改了一下单独作为3篇独立的文章发布。</em></p>
<p><em>本文章的许多图片都直接来自 <a href="https://developer.mozilla.org/" target="_blank" rel="noopener noreferrer">MDN</a>，在这里先感谢图片的创作者。</em></p>
<h2 class="anchor anchorWithStickyNavbar_LWe7" id="网络的起源">网络的起源<a href="https://developer.zsxyww.com/blog/Web%E7%9A%84%E5%8E%86%E5%8F%B21%EF%B8%8F%E2%83%A3-HTTP#%E7%BD%91%E7%BB%9C%E7%9A%84%E8%B5%B7%E6%BA%90" class="hash-link" aria-label="Direct link to 网络的起源" title="Direct link to 网络的起源">​</a></h2>
<p>人们最初发明网络的目的很简单：在不同的电脑之间传输文件。那个时候没有U盘，也没有蓝牙，计算机领域的前辈们必须从头设计一个高效的传输文件的办法。</p>
<p>假如我们的电脑上有一个文件<code>example.docx</code>,放在我们电脑的文件夹<code>documents</code>里面，我们如何使用最原始的方法把它传递给另外一台电脑呢？</p>
<p>早期的程序员编写了一类叫做"HTTP服务器"的程序，程序的功能是选择电脑上的一个文件夹，将这个文件夹暴露在互联网上让所有人操作。这个文件夹叫做HTTP服务的“根目录”。</p>
<p>要使用这个程序，我们还要先给电脑分配一个IP地址，IP地址是一台电脑在互联网上的唯一标识，假如我们电脑的的IP地址是<code>123.45.67.89</code>。我们在这台电脑上启动一个HTTP服务程序。在程序的设置里指定根目录是我们存放文件的文件夹<code>documents</code>。</p>
<p>前面说过，这个HTTP服务程序的作用是把你电脑上一个指定的文件夹(我们称为“根目录”)暴露在互联网上，所有人都可以下载这个文件夹下的文件。于是这个时候，我们打开随便另一台电脑(前提是有网)，在浏览器地址栏中输入<code>http://123.45.67.89/example.docx</code>，这时候就会发生神奇的事情：浏览器会提示你下载<code>example.docx</code>,这样，文件就从一台电脑传输到了另一台电脑。</p>
<p>假如<code>documents</code>文件夹下面还有另外一个文件<code>hi.txt</code>，那么当你在浏览器地址栏中输入<code>http://123.45.67.89/hi.txt</code>时，你就会发现浏览器显示了<code>hi.txt</code>这份文件的内容，因为浏览器可以直接显示<code>txt</code>文件，而不能直接显示<code>docx</code>文件。</p>
<p><img decoding="async" loading="lazy" alt="IIS根目录" src="https://developer.zsxyww.com/assets/images/iis-changeroot-websoft9-72efa0f7652462650d11b04bba150819.png" width="960" height="400" class="img_ev3q"></p>
<blockquote>
<p><em>IIS是Windows官方的HTTP服务器，有着图形化的配置界面，其它大部分HTTP服务器都需要通过命令行和配置文件进行配置。</em></p>
</blockquote>
<h2 class="anchor anchorWithStickyNavbar_LWe7" id="http协议">HTTP协议<a href="https://developer.zsxyww.com/blog/Web%E7%9A%84%E5%8E%86%E5%8F%B21%EF%B8%8F%E2%83%A3-HTTP#http%E5%8D%8F%E8%AE%AE" class="hash-link" aria-label="Direct link to HTTP协议" title="Direct link to HTTP协议">​</a></h2>
<p>等等，刚才所讲的操作为什么能发生呢？当我在浏览器中输入网址并按下回车键的时候，这一切的背后到底发生了什么？</p>
<p>我们之前提到了，要把电脑中的一个文件夹暴露在网络上供所有人访问，就需要启动一个"HTTP服务程序"，这个HTTP是什么呢？</p>
<p>HTTP协议，是<code>HyperText Transfer Protocol</code>的缩写，即"超文本传输协议"。是通过网络在电脑之间进行文件传输的默认协议。进行HTTP文件传输的双方，一个称之为”客户端“(Client),一个称之为"服务端"(Server)。</p>
<p>我们刚才就是在我们的电脑上部署了HTTP服务端，而浏览器就是我们通信中的客户端。浏览器首先对服务器发送信息(行话叫做"请求")，要求获取某个文件；然后服务器返回这个文件(行话叫做“响应”)。</p>
<p>一次完整的HTTP通信总是由客户端请求(Request)和服务端响应(Response)组成。在HTTP协议中，总是由客户端先发起一次HTTP请求，然后由服务端返回这次请求的响应，这样才是一次完整的HTTP通信。</p>
<p>实际上，HTTP协议中的“客户端”不仅仅是指浏览器，但我们通常用的浏览器确实就是最常见的HTTP客户端。但其实像curl这样的命令行工具，或者手机APP，或者是浏览器里的JavaScript代码，当它们向服务器请求数据时，也可以被称作客户端。</p>
<p><img decoding="async" loading="lazy" alt="HTTP请求示意图" src="data:image/png;base64,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" width="960" height="267" class="img_ev3q"></p>
<p>实际上，HTTP协议不仅可以获取一个文件(就像我们所做的)，也可以向服务端上传一个文件，或是修改某个文件的内容...</p>
<p>一次HTTP通信要进行什么操作(获取or上传等)，由HTTP请求中的“方法”指定，方法是"请求头"的一部分。</p>
<p>"请求头"是什么？别着急，下面我们介绍HTTP协议的具体内容：</p>
<h3 class="anchor anchorWithStickyNavbar_LWe7" id="请求">请求<a href="https://developer.zsxyww.com/blog/Web%E7%9A%84%E5%8E%86%E5%8F%B21%EF%B8%8F%E2%83%A3-HTTP#%E8%AF%B7%E6%B1%82" class="hash-link" aria-label="Direct link to 请求" title="Direct link to 请求">​</a></h3>
<p>前面说了，HTTP通信总是以客户端发送请求开始，服务端是没法主动给客户端发信息的。</p>
<p>一个HTTP请求包含请求头(HTTP Request Header)和请求体(Request Body)，请求头主要包含了：</p>
<ul>
<li>协议版本:告诉服务器，这次交流，要使用哪个版本的HTTP协议</li>
<li>目标:要访问哪个电脑，例如刚才的<code>123.45.67.89</code></li>
<li>URI:要操作哪个文件，例如<code>example.docx</code>,IP地址或者网址后面的内容就是URI了</li>
<li>方法:要对这个文件做什么，比如获取这个文件的内容，还是在服务器上创建这个文件</li>
<li>自定义参数：除了上面的信息，客户端还可以发送一些额外的内容给服务端，这些内容总是以<code>Key=Value</code>的形式存在。在正常的URI后有一个<code>?</code>，表示参数的开始，<code>&amp;</code>表示不同参数之间的分隔。</li>
</ul>
<p>例如：<code>http://123.45.67.89/example.docx?compressed=true&amp;method=gzip</code></p>
<p>这就是让服务器压缩发来的文件，使用gzip压缩。</p>
<p>参数的内容不是HTTP标准，也就是服务端如何理解参数，完全靠程序员写的代码。如果程序员没有设置，那么参数就毫无用处。</p>
<h4 class="anchor anchorWithStickyNavbar_LWe7" id="http方法">HTTP方法<a href="https://developer.zsxyww.com/blog/Web%E7%9A%84%E5%8E%86%E5%8F%B21%EF%B8%8F%E2%83%A3-HTTP#http%E6%96%B9%E6%B3%95" class="hash-link" aria-label="Direct link to HTTP方法" title="Direct link to HTTP方法">​</a></h4>
<p>HTTP方法定义了这个请求具体要对指定的文件做什么，其中：</p>
<ul>
<li><code>GET</code>:获取指定文件的内容。</li>
<li><code>POST</code>:上传一个文件，内容放在请求体(下面会讲到)。</li>
<li><code>DELETE</code>:删除某个文件。</li>
</ul>
<p>其实这里还有一些方法的，我们以后讲。</p>
<p>我们日常使用浏览器，比如在地址栏中输入<code>baidu.com</code>,其实就是在对这个地址做GET请求，浏览器会把你的输入内容自动补全成 <code>GET http://www.baidu.com/</code> 这一HTTP请求</p>
<div class="theme-admonition theme-admonition-tip admonition_xJq3 alert alert--success"><div class="admonitionHeading_Gvgb"><span class="admonitionIcon_Rf37"><svg viewBox="0 0 12 16"><path fill-rule="evenodd" d="M6.5 0C3.48 0 1 2.19 1 5c0 .92.55 2.25 1 3 1.34 2.25 1.78 2.78 2 4v1h5v-1c.22-1.22.66-1.75 2-4 .45-.75 1-2.08 1-3 0-2.81-2.48-5-5.5-5zm3.64 7.48c-.25.44-.47.8-.67 1.11-.86 1.41-1.25 2.06-1.45 3.23-.02.05-.02.11-.02.17H5c0-.06 0-.13-.02-.17-.2-1.17-.59-1.83-1.45-3.23-.2-.31-.42-.67-.67-1.11C2.44 6.78 2 5.65 2 5c0-2.2 2.02-4 4.5-4 1.22 0 2.36.42 3.22 1.19C10.55 2.94 11 3.94 11 5c0 .66-.44 1.78-.86 2.48zM4 14h5c-.23 1.14-1.3 2-2.5 2s-2.27-.86-2.5-2z"></path></svg></span>提示</div><div class="admonitionContent_BuS1"><p>打开浏览器的F12开发者菜单，选择"Network"，可以看到你在访问这个网站时与服务器所进行的所有HTTP请求</p></div></div>
<p>在浏览器地址栏里直接输入网址，默认就是发送GET请求。你可能会好奇，POST这些请求是怎么发出去的呢？这通常是由网页中的JavaScript代码在背后发送的。我们在之后的内容会讲到这一点。</p>
<p><img decoding="async" loading="lazy" alt="请求头" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHN0eWxlPSJiYWNrZ3JvdW5kLWNvbG9yOiNmZmYiIHZpZXdCb3g9Ii0uNSAtLjUgMzEwIDE5MSI+CiAgPHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0iI0ZGRiIvPgogIDxyZWN0IHdpZHRoPSIyOTciIGhlaWdodD0iODciIHg9IjciIHk9IjU4IiBmaWxsPSIjZTZlNmU2IiBwb2ludGVyLWV2ZW50cz0iYWxsIiByeD0iNi45NiIgcnk9IjYuOTYiLz4KICA8ZyBzdHJva2U9IiMwMDAiIHN0cm9rZS1taXRlcmxpbWl0PSIxMCI+CiAgICA8cGF0aCBmaWxsPSJub25lIiBkPSJNMzIuNjIgNTguNjQgMzAuOSAzMCIgcG9pbnRlci1ldmVudHM9InN0cm9rZSIvPgogICAgPHBhdGggZD0ibTMyLjkzIDYzLjg4LTIuNzUtNi44NCAyLjQ0IDEuNiAyLjIyLTEuODhaIiBwb2ludGVyLWV2ZW50cz0iYWxsIi8+CiAgPC9nPgogIDxwYXRoIGZpbGw9Im5vbmUiIGQ9Ik0wIDBoNjB2MzBIMHoiIHBvaW50ZXItZXZlbnRzPSJhbGwiLz4KICA8c3dpdGNoIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0uNSAtLjUpIj4KICAgIDxmb3JlaWduT2JqZWN0IHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHBvaW50ZXItZXZlbnRzPSJub25lIiByZXF1aXJlZEZlYXR1cmVzPSJodHRwOi8vd3d3LnczLm9yZy9UUi9TVkcxMS9mZWF0dXJlI0V4dGVuc2liaWxpdHkiIHN0eWxlPSJvdmVyZmxvdzp2aXNpYmxlO3RleHQtYWxpZ246bGVmdCI+CiAgICAgIDxkaXYgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGh0bWwiIHN0eWxlPSJkaXNwbGF5OmZsZXg7YWxpZ24taXRlbXM6dW5zYWZlIGNlbnRlcjtqdXN0aWZ5LWNvbnRlbnQ6dW5zYWZlIGNlbnRlcjt3aWR0aDo1OHB4O2hlaWdodDoxcHg7cGFkZGluZy10b3A6MTVweDttYXJnaW4tbGVmdDoxcHgiPgogICAgICAgIDxkaXYgZGF0YS1kcmF3aW8tY29sb3JzPSJjb2xvcjogcmdiKDAsIDAsIDApOyIgc3R5bGU9ImJveC1zaXppbmc6Ym9yZGVyLWJveDtmb250LXNpemU6MDt0ZXh0LWFsaWduOmNlbnRlciI+CiAgICAgICAgICA8ZGl2IHN0eWxlPSJkaXNwbGF5OmlubGluZS1ibG9jaztmb250LXNpemU6MTZweDtmb250LWZhbWlseTpIZWx2ZXRpY2E7Y29sb3I6IzAwMDtsaW5lLWhlaWdodDoxLjI7cG9pbnRlci1ldmVudHM6YWxsO3doaXRlLXNwYWNlOm5vcm1hbDtvdmVyZmxvdy13cmFwOm5vcm1hbCI+CiAgICAgICAgICAgIDxkaXYgc3R5bGU9ImZvbnQtc2l6ZToxNnB4Ij5NZXRob2Q8L2Rpdj4KICAgICAgICAgIDwvZGl2PgogICAgICAgIDwvZGl2PgogICAgICA8L2Rpdj4KICAgIDwvZm9yZWlnbk9iamVjdD4KICAgIDx0ZXh0IHg9IjMwIiB5PSIyMCIgZm9udC1mYW1pbHk9IkhlbHZldGljYSIgZm9udC1zaXplPSIxNiIgdGV4dC1hbmNob3I9Im1pZGRsZSI+TWV0aG9kPC90ZXh0PgogIDwvc3dpdGNoPgogIDxwYXRoIGZpbGw9Im5vbmUiIGQ9Ik01NiAwaDYwdjMwSDU2eiIgcG9pbnRlci1ldmVudHM9ImFsbCIvPgogIDxzd2l0Y2ggdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLS41IC0uNSkiPgogICAgPGZvcmVpZ25PYmplY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgcG9pbnRlci1ldmVudHM9Im5vbmUiIHJlcXVpcmVkRmVhdHVyZXM9Imh0dHA6Ly93d3cudzMub3JnL1RSL1NWRzExL2ZlYXR1cmUjRXh0ZW5zaWJpbGl0eSIgc3R5bGU9Im92ZXJmbG93OnZpc2libGU7dGV4dC1hbGlnbjpsZWZ0Ij4KICAgICAgPGRpdiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94aHRtbCIgc3R5bGU9ImRpc3BsYXk6ZmxleDthbGlnbi1pdGVtczp1bnNhZmUgY2VudGVyO2p1c3RpZnktY29udGVudDp1bnNhZmUgY2VudGVyO3dpZHRoOjU4cHg7aGVpZ2h0OjFweDtwYWRkaW5nLXRvcDoxNXB4O21hcmdpbi1sZWZ0OjU3cHgiPgogICAgICAgIDxkaXYgZGF0YS1kcmF3aW8tY29sb3JzPSJjb2xvcjogcmdiKDAsIDAsIDApOyIgc3R5bGU9ImJveC1zaXppbmc6Ym9yZGVyLWJveDtmb250LXNpemU6MDt0ZXh0LWFsaWduOmNlbnRlciI+CiAgICAgICAgICA8ZGl2IHN0eWxlPSJkaXNwbGF5OmlubGluZS1ibG9jaztmb250LXNpemU6MTZweDtmb250LWZhbWlseTpIZWx2ZXRpY2E7Y29sb3I6IzAwMDtsaW5lLWhlaWdodDoxLjI7cG9pbnRlci1ldmVudHM6YWxsO3doaXRlLXNwYWNlOm5vcm1hbDtvdmVyZmxvdy13cmFwOm5vcm1hbCI+UGF0aDwvZGl2PgogICAgICAgIDwvZGl2PgogICAgICA8L2Rpdj4KICAgIDwvZm9yZWlnbk9iamVjdD4KICAgIDx0ZXh0IHg9Ijg2IiB5PSIyMCIgZm9udC1mYW1pbHk9IkhlbHZldGljYSIgZm9udC1zaXplPSIxNiIgdGV4dC1hbmNob3I9Im1pZGRsZSI+UGF0aDwvdGV4dD4KICA8L3N3aXRjaD4KICA8cGF0aCBmaWxsPSJub25lIiBkPSJNMTEzIDBoMTIydjMwSDExM3oiIHBvaW50ZXItZXZlbnRzPSJhbGwiLz4KICA8c3dpdGNoIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0uNSAtLjUpIj4KICAgIDxmb3JlaWduT2JqZWN0IHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHBvaW50ZXItZXZlbnRzPSJub25lIiByZXF1aXJlZEZlYXR1cmVzPSJodHRwOi8vd3d3LnczLm9yZy9UUi9TVkcxMS9mZWF0dXJlI0V4dGVuc2liaWxpdHkiIHN0eWxlPSJvdmVyZmxvdzp2aXNpYmxlO3RleHQtYWxpZ246bGVmdCI+CiAgICAgIDxkaXYgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGh0bWwiIHN0eWxlPSJkaXNwbGF5OmZsZXg7YWxpZ24taXRlbXM6dW5zYWZlIGNlbnRlcjtqdXN0aWZ5LWNvbnRlbnQ6dW5zYWZlIGNlbnRlcjt3aWR0aDoxMjBweDtoZWlnaHQ6MXB4O3BhZGRpbmctdG9wOjE1cHg7bWFyZ2luLWxlZnQ6MTE0cHgiPgogICAgICAgIDxkaXYgZGF0YS1kcmF3aW8tY29sb3JzPSJjb2xvcjogcmdiKDAsIDAsIDApOyIgc3R5bGU9ImJveC1zaXppbmc6Ym9yZGVyLWJveDtmb250LXNpemU6MDt0ZXh0LWFsaWduOmNlbnRlciI+CiAgICAgICAgICA8ZGl2IHN0eWxlPSJkaXNwbGF5OmlubGluZS1ibG9jaztmb250LXNpemU6MTZweDtmb250LWZhbWlseTpIZWx2ZXRpY2E7Y29sb3I6IzAwMDtsaW5lLWhlaWdodDoxLjI7cG9pbnRlci1ldmVudHM6YWxsO3doaXRlLXNwYWNlOm5vcm1hbDtvdmVyZmxvdy13cmFwOm5vcm1hbCI+UHJvdG9jb2wgdmVyc2lvbjwvZGl2PgogICAgICAgIDwvZGl2PgogICAgICA8L2Rpdj4KICAgIDwvZm9yZWlnbk9iamVjdD4KICAgIDx0ZXh0IHg9IjE3NCIgeT0iMjAiIGZvbnQtZmFtaWx5PSJIZWx2ZXRpY2EiIGZvbnQtc2l6ZT0iMTYiIHRleHQtYW5jaG9yPSJtaWRkbGUiPlByb3RvY29sIHZlcnNpb248L3RleHQ+CiAgPC9zd2l0Y2g+CiAgPHBhdGggZmlsbD0ibm9uZSIgZD0iTTEyNyAxNjFoNjB2MzBoLTYweiIgcG9pbnRlci1ldmVudHM9ImFsbCIvPgogIDxzd2l0Y2ggdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLS41IC0uNSkiPgogICAgPGZvcmVpZ25PYmplY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgcG9pbnRlci1ldmVudHM9Im5vbmUiIHJlcXVpcmVkRmVhdHVyZXM9Imh0dHA6Ly93d3cudzMub3JnL1RSL1NWRzExL2ZlYXR1cmUjRXh0ZW5zaWJpbGl0eSIgc3R5bGU9Im92ZXJmbG93OnZpc2libGU7dGV4dC1hbGlnbjpsZWZ0Ij4KICAgICAgPGRpdiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94aHRtbCIgc3R5bGU9ImRpc3BsYXk6ZmxleDthbGlnbi1pdGVtczp1bnNhZmUgY2VudGVyO2p1c3RpZnktY29udGVudDp1bnNhZmUgY2VudGVyO3dpZHRoOjU4cHg7aGVpZ2h0OjFweDtwYWRkaW5nLXRvcDoxNzZweDttYXJnaW4tbGVmdDoxMjhweCI+CiAgICAgICAgPGRpdiBkYXRhLWRyYXdpby1jb2xvcnM9ImNvbG9yOiByZ2IoMCwgMCwgMCk7IiBzdHlsZT0iYm94LXNpemluZzpib3JkZXItYm94O2ZvbnQtc2l6ZTowO3RleHQtYWxpZ246Y2VudGVyIj4KICAgICAgICAgIDxkaXYgc3R5bGU9ImRpc3BsYXk6aW5saW5lLWJsb2NrO2ZvbnQtc2l6ZToxNnB4O2ZvbnQtZmFtaWx5OkhlbHZldGljYTtjb2xvcjojMDAwO2xpbmUtaGVpZ2h0OjEuMjtwb2ludGVyLWV2ZW50czphbGw7d2hpdGUtc3BhY2U6bm9ybWFsO292ZXJmbG93LXdyYXA6bm9ybWFsIj4KICAgICAgICAgICAgPGRpdiBzdHlsZT0iZm9udC1zaXplOjE2cHgiPkhlYWRlcnM8L2Rpdj4KICAgICAgICAgIDwvZGl2PgogICAgICAgIDwvZGl2PgogICAgICA8L2Rpdj4KICAgIDwvZm9yZWlnbk9iamVjdD4KICAgIDx0ZXh0IHg9IjE1NyIgeT0iMTgxIiBmb250LWZhbWlseT0iSGVsdmV0aWNhIiBmb250LXNpemU9IjE2IiB0ZXh0LWFuY2hvcj0ibWlkZGxlIj5IZWFkZXJzPC90ZXh0PgogIDwvc3dpdGNoPgogIDxnIHN0cm9rZT0iIzAwMCIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIj4KICAgIDxwYXRoIGZpbGw9Im5vbmUiIGQ9Ik03OS40NSA1OC4yIDgzLjczIDMwIiBwb2ludGVyLWV2ZW50cz0ic3Ryb2tlIi8+CiAgICA8cGF0aCBkPSJtNzguNjcgNjMuMzktMS4yNi03LjI3IDIuMDQgMi4wOCAyLjU3LTEuMzhaIiBwb2ludGVyLWV2ZW50cz0iYWxsIi8+CiAgPC9nPgogIDxnIHN0cm9rZT0iIzAwMCIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIj4KICAgIDxwYXRoIGZpbGw9Im5vbmUiIGQ9Ik0xNTMuNzEgNTguMjQgMTY2Ljk2IDMwIiBwb2ludGVyLWV2ZW50cz0ic3Ryb2tlIi8+CiAgICA8cGF0aCBkPSJtMTUxLjQ4IDYyLjk5Ljg2LTcuMzMgMS4zNyAyLjU4IDIuODUtLjZaIiBwb2ludGVyLWV2ZW50cz0iYWxsIi8+CiAgPC9nPgogIDxyZWN0IHdpZHRoPSIzNiIgaGVpZ2h0PSIyMSIgeD0iMTUiIHk9IjY1IiBmaWxsPSIjZjJmZmZjIiBwb2ludGVyLWV2ZW50cz0iYWxsIiByeD0iMS42OCIgcnk9IjEuNjgiLz4KICA8c3dpdGNoIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0uNSAtLjUpIj4KICAgIDxmb3JlaWduT2JqZWN0IHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHBvaW50ZXItZXZlbnRzPSJub25lIiByZXF1aXJlZEZlYXR1cmVzPSJodHRwOi8vd3d3LnczLm9yZy9UUi9TVkcxMS9mZWF0dXJlI0V4dGVuc2liaWxpdHkiIHN0eWxlPSJvdmVyZmxvdzp2aXNpYmxlO3RleHQtYWxpZ246bGVmdCI+CiAgICAgIDxkaXYgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGh0bWwiIHN0eWxlPSJkaXNwbGF5OmZsZXg7YWxpZ24taXRlbXM6dW5zYWZlIGNlbnRlcjtqdXN0aWZ5LWNvbnRlbnQ6dW5zYWZlIGZsZXgtc3RhcnQ7d2lkdGg6MXB4O2hlaWdodDoxcHg7cGFkZGluZy10b3A6NzZweDttYXJnaW4tbGVmdDoxOXB4Ij4KICAgICAgICA8ZGl2IGRhdGEtZHJhd2lvLWNvbG9ycz0iY29sb3I6ICMzMzMzMzM7IiBzdHlsZT0iYm94LXNpemluZzpib3JkZXItYm94O2ZvbnQtc2l6ZTowO3RleHQtYWxpZ246bGVmdCI+CiAgICAgICAgICA8ZGl2IHN0eWxlPSJkaXNwbGF5OmlubGluZS1ibG9jaztmb250LXNpemU6MTZweDtmb250LWZhbWlseTptb25vc3BhY2U7Y29sb3I6IzMzMztsaW5lLWhlaWdodDoxLjI7cG9pbnRlci1ldmVudHM6YWxsO3doaXRlLXNwYWNlOm5vd3JhcCI+CiAgICAgICAgICAgIDxwIHN0eWxlPSJsaW5lLWhlaWdodDoxMDAlIj4KICAgICAgICAgICAgICA8Zm9udCBjb2xvcj0iIzUwOWFkNCIgc3R5bGU9ImZvbnQtc2l6ZToxNnB4Ij5HRVQ8L2ZvbnQ+CiAgICAgICAgICAgIDwvcD4KICAgICAgICAgIDwvZGl2PgogICAgICAgIDwvZGl2PgogICAgICA8L2Rpdj4KICAgIDwvZm9yZWlnbk9iamVjdD4KICAgIDx0ZXh0IHg9IjE5IiB5PSI4MCIgZmlsbD0iIzMzMyIgZm9udC1mYW1pbHk9Ik1vbm9zcGFjZSIgZm9udC1zaXplPSIxNiI+R0VUPC90ZXh0PgogIDwvc3dpdGNoPgogIDxyZWN0IHdpZHRoPSIxNyIgaGVpZ2h0PSIyMSIgeD0iNzAiIHk9IjY0LjUiIGZpbGw9IiNmNWY1ZmYiIHBvaW50ZXItZXZlbnRzPSJhbGwiIHJ4PSIxLjM2IiByeT0iMS4zNiIvPgogIDxzd2l0Y2ggdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLS41IC0uNSkiPgogICAgPGZvcmVpZ25PYmplY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgcG9pbnRlci1ldmVudHM9Im5vbmUiIHJlcXVpcmVkRmVhdHVyZXM9Imh0dHA6Ly93d3cudzMub3JnL1RSL1NWRzExL2ZlYXR1cmUjRXh0ZW5zaWJpbGl0eSIgc3R5bGU9Im92ZXJmbG93OnZpc2libGU7dGV4dC1hbGlnbjpsZWZ0Ij4KICAgICAgPGRpdiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94aHRtbCIgc3R5bGU9ImRpc3BsYXk6ZmxleDthbGlnbi1pdGVtczp1bnNhZmUgY2VudGVyO2p1c3RpZnktY29udGVudDp1bnNhZmUgZmxleC1zdGFydDt3aWR0aDoxcHg7aGVpZ2h0OjFweDtwYWRkaW5nLXRvcDo3NXB4O21hcmdpbi1sZWZ0Ojc0cHgiPgogICAgICAgIDxkaXYgZGF0YS1kcmF3aW8tY29sb3JzPSJjb2xvcjogIzMzMzMzMzsiIHN0eWxlPSJib3gtc2l6aW5nOmJvcmRlci1ib3g7Zm9udC1zaXplOjA7dGV4dC1hbGlnbjpsZWZ0Ij4KICAgICAgICAgIDxkaXYgc3R5bGU9ImRpc3BsYXk6aW5saW5lLWJsb2NrO2ZvbnQtc2l6ZToxNnB4O2ZvbnQtZmFtaWx5Om1vbm9zcGFjZTtjb2xvcjojMzMzO2xpbmUtaGVpZ2h0OjEuMjtwb2ludGVyLWV2ZW50czphbGw7d2hpdGUtc3BhY2U6bm93cmFwIj4KICAgICAgICAgICAgPHAgc3R5bGU9ImxpbmUtaGVpZ2h0OjEwMCUiPi88L3A+CiAgICAgICAgICA8L2Rpdj4KICAgICAgICA8L2Rpdj4KICAgICAgPC9kaXY+CiAgICA8L2ZvcmVpZ25PYmplY3Q+CiAgICA8dGV4dCB4PSI3NCIgeT0iODAiIGZpbGw9IiMzMzMiIGZvbnQtZmFtaWx5PSJNb25vc3BhY2UiIGZvbnQtc2l6ZT0iMTYiPi88L3RleHQ+CiAgPC9zd2l0Y2g+CiAgPHJlY3Qgd2lkdGg9IjEwMCIgaGVpZ2h0PSIyMiIgeD0iMTAxIiB5PSI2NCIgZmlsbD0iI2Y1ZWJlZiIgcG9pbnRlci1ldmVudHM9ImFsbCIgcng9IjEuNzYiIHJ5PSIxLjc2Ii8+CiAgPHN3aXRjaCB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtLjUgLS41KSI+CiAgICA8Zm9yZWlnbk9iamVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBwb2ludGVyLWV2ZW50cz0ibm9uZSIgcmVxdWlyZWRGZWF0dXJlcz0iaHR0cDovL3d3dy53My5vcmcvVFIvU1ZHMTEvZmVhdHVyZSNFeHRlbnNpYmlsaXR5IiBzdHlsZT0ib3ZlcmZsb3c6dmlzaWJsZTt0ZXh0LWFsaWduOmxlZnQiPgogICAgICA8ZGl2IHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hodG1sIiBzdHlsZT0iZGlzcGxheTpmbGV4O2FsaWduLWl0ZW1zOnVuc2FmZSBjZW50ZXI7anVzdGlmeS1jb250ZW50OnVuc2FmZSBmbGV4LXN0YXJ0O3dpZHRoOjFweDtoZWlnaHQ6MXB4O3BhZGRpbmctdG9wOjc1cHg7bWFyZ2luLWxlZnQ6MTA1cHgiPgogICAgICAgIDxkaXYgZGF0YS1kcmF3aW8tY29sb3JzPSJjb2xvcjogIzMzMzMzMzsiIHN0eWxlPSJib3gtc2l6aW5nOmJvcmRlci1ib3g7Zm9udC1zaXplOjA7dGV4dC1hbGlnbjpsZWZ0Ij4KICAgICAgICAgIDxkaXYgc3R5bGU9ImRpc3BsYXk6aW5saW5lLWJsb2NrO2ZvbnQtc2l6ZToxNnB4O2ZvbnQtZmFtaWx5Om1vbm9zcGFjZTtjb2xvcjojMzMzO2xpbmUtaGVpZ2h0OjEuMjtwb2ludGVyLWV2ZW50czphbGw7d2hpdGUtc3BhY2U6bm93cmFwIj4KICAgICAgICAgICAgPHAgc3R5bGU9ImxpbmUtaGVpZ2h0OjEwMCUiPgogICAgICAgICAgICAgIDxmb250IGNvbG9yPSIjNWQ4MzdlIiBzdHlsZT0iZm9udC1zaXplOjE2cHgiPkhUVFA8L2ZvbnQ+Lzxmb250IGNvbG9yPSIjY2Q1YjkyIiBzdHlsZT0iZm9udC1zaXplOjE2cHgiPjEuMTwvZm9udD4KICAgICAgICAgICAgPC9wPgogICAgICAgICAgPC9kaXY+CiAgICAgICAgPC9kaXY+CiAgICAgIDwvZGl2PgogICAgPC9mb3JlaWduT2JqZWN0PgogICAgPHRleHQgeD0iMTA1IiB5PSI4MCIgZmlsbD0iIzMzMyIgZm9udC1mYW1pbHk9Ik1vbm9zcGFjZSIgZm9udC1zaXplPSIxNiI+SFRUUC8xLjE8L3RleHQ+CiAgPC9zd2l0Y2g+CiAgPHJlY3Qgd2lkdGg9IjI4NCIgaGVpZ2h0PSI0OCIgeD0iMTUiIHk9IjkwIiBmaWxsPSIjY2ZlM2Y1IiBwb2ludGVyLWV2ZW50cz0iYWxsIiByeD0iMy44NCIgcnk9IjMuODQiLz4KICA8c3dpdGNoIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0uNSAtLjUpIj4KICAgIDxmb3JlaWduT2JqZWN0IHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHBvaW50ZXItZXZlbnRzPSJub25lIiByZXF1aXJlZEZlYXR1cmVzPSJodHRwOi8vd3d3LnczLm9yZy9UUi9TVkcxMS9mZWF0dXJlI0V4dGVuc2liaWxpdHkiIHN0eWxlPSJvdmVyZmxvdzp2aXNpYmxlO3RleHQtYWxpZ246bGVmdCI+CiAgICAgIDxkaXYgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGh0bWwiIHN0eWxlPSJkaXNwbGF5OmZsZXg7YWxpZ24taXRlbXM6dW5zYWZlIGNlbnRlcjtqdXN0aWZ5LWNvbnRlbnQ6dW5zYWZlIGZsZXgtc3RhcnQ7d2lkdGg6Mjc4cHg7aGVpZ2h0OjFweDtwYWRkaW5nLXRvcDoxMTRweDttYXJnaW4tbGVmdDoxOXB4Ij4KICAgICAgICA8ZGl2IGRhdGEtZHJhd2lvLWNvbG9ycz0iY29sb3I6ICMzMzMzMzM7IiBzdHlsZT0iYm94LXNpemluZzpib3JkZXItYm94O2ZvbnQtc2l6ZTowO3RleHQtYWxpZ246bGVmdCI+CiAgICAgICAgICA8ZGl2IHN0eWxlPSJkaXNwbGF5OmlubGluZS1ibG9jaztmb250LXNpemU6MTZweDtmb250LWZhbWlseTptb25vc3BhY2U7Y29sb3I6IzMzMztsaW5lLWhlaWdodDoxLjI7cG9pbnRlci1ldmVudHM6YWxsO3doaXRlLXNwYWNlOm5vcm1hbDtvdmVyZmxvdy13cmFwOm5vcm1hbCI+CiAgICAgICAgICAgIDxkaXYgc3R5bGU9ImZvbnQtc2l6ZToxNnB4Ij4KICAgICAgICAgICAgICA8Zm9udCBjb2xvcj0iIzVkODM3ZSIgc3R5bGU9ImZvbnQtc2l6ZToxNnB4Ij5Ib3N0PC9mb250PjogZGV2ZWxvcGVyLm1vemlsbGEub3JnPC9kaXY+CiAgICAgICAgICAgIDxkaXYgc3R5bGU9ImZvbnQtc2l6ZToxNnB4Ij4KICAgICAgICAgICAgICA8Zm9udCBjb2xvcj0iIzVkODM3ZSIgc3R5bGU9ImZvbnQtc2l6ZToxNnB4Ij5BY2NlcHQtTGFuZ3VhZ2U8L2ZvbnQ+OiBmcjwvZGl2PgogICAgICAgICAgPC9kaXY+CiAgICAgICAgPC9kaXY+CiAgICAgIDwvZGl2PgogICAgPC9mb3JlaWduT2JqZWN0PgogICAgPHRleHQgeD0iMTkiIHk9IjExOSIgZmlsbD0iIzMzMyIgZm9udC1mYW1pbHk9Ik1vbm9zcGFjZSIgZm9udC1zaXplPSIxNiI+SG9zdDogZGV2ZWxvcGVyLm1vemlsbGEub3JnLi4uPC90ZXh0PgogIDwvc3dpdGNoPgogIDxnIHN0cm9rZT0iIzAwMCIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIj4KICAgIDxwYXRoIGZpbGw9Im5vbmUiIGQ9Ik0xNTcgMTQ0LjM3VjE2MSIgcG9pbnRlci1ldmVudHM9InN0cm9rZSIvPgogICAgPHBhdGggZD0ibTE1NyAxMzkuMTIgMi4zMyA3LTIuMzMtMS43NS0yLjMzIDEuNzVaIiBwb2ludGVyLWV2ZW50cz0iYWxsIi8+CiAgPC9nPgo8L3N2Zz4=" width="310" height="191" class="img_ev3q"></p>
<h4 class="anchor anchorWithStickyNavbar_LWe7" id="请求体">请求体<a href="https://developer.zsxyww.com/blog/Web%E7%9A%84%E5%8E%86%E5%8F%B21%EF%B8%8F%E2%83%A3-HTTP#%E8%AF%B7%E6%B1%82%E4%BD%93" class="hash-link" aria-label="Direct link to 请求体" title="Direct link to 请求体">​</a></h4>
<p>对于某些方法，需要在请求时向服务器夹带一些东西(比如POST需要你带上新文件的内容)，请求体就是装载这些东西的.</p>
<p>像GET请求就没有请求体，因为GET请求不需要夹带信息.</p>
<div class="theme-admonition theme-admonition-tip admonition_xJq3 alert alert--success"><div class="admonitionHeading_Gvgb"><span class="admonitionIcon_Rf37"><svg viewBox="0 0 12 16"><path fill-rule="evenodd" d="M6.5 0C3.48 0 1 2.19 1 5c0 .92.55 2.25 1 3 1.34 2.25 1.78 2.78 2 4v1h5v-1c.22-1.22.66-1.75 2-4 .45-.75 1-2.08 1-3 0-2.81-2.48-5-5.5-5zm3.64 7.48c-.25.44-.47.8-.67 1.11-.86 1.41-1.25 2.06-1.45 3.23-.02.05-.02.11-.02.17H5c0-.06 0-.13-.02-.17-.2-1.17-.59-1.83-1.45-3.23-.2-.31-.42-.67-.67-1.11C2.44 6.78 2 5.65 2 5c0-2.2 2.02-4 4.5-4 1.22 0 2.36.42 3.22 1.19C10.55 2.94 11 3.94 11 5c0 .66-.44 1.78-.86 2.48zM4 14h5c-.23 1.14-1.3 2-2.5 2s-2.27-.86-2.5-2z"></path></svg></span>提示</div><div class="admonitionContent_BuS1"><p>正常地使用浏览器，是没法做出GET外的请求的，但是浏览器在控制台里可以自定义请求，以<code>Firefox</code>为例，在F12的<code>Network</code>一栏中点<code>New Request</code>(有一个加号)就可以发送自定义请求。<code>curl</code>等HTTP命令行工具也可以发送请求.</p></div></div>
<h3 class="anchor anchorWithStickyNavbar_LWe7" id="响应">响应<a href="https://developer.zsxyww.com/blog/Web%E7%9A%84%E5%8E%86%E5%8F%B21%EF%B8%8F%E2%83%A3-HTTP#%E5%93%8D%E5%BA%94" class="hash-link" aria-label="Direct link to 响应" title="Direct link to 响应">​</a></h3>
<p>回应也分为回应头和回应体，回应头主要包含：</p>
<ul>
<li>状态码：针对请求的回应有对应的状态，比如，如果GET请求没有问题，成功返回的话就返回<code>200 OK</code>状态码，如果找不到请求里对应的文件就会返回<code>404 Not Found</code></li>
<li>内容格式:向浏览器说明回应体（若有）是什么格式的,文本文件的编码设置等，比如html文件？图片？docx文档？有没有被压缩？如果有，压缩格式？这决定了浏览器如何对待这些文件</li>
<li>内容的大小：返回所请求资源的大小（若有）</li>
</ul>
<p>回应体就是包含了回应的主体内容了，如果是GET请求的话，那么就回应了所GET文件的内容，如果是其他请求的话，可能也会没有回应体，具体看使用的方法</p>
<p><img decoding="async" loading="lazy" alt="回应体" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHN0eWxlPSJiYWNrZ3JvdW5kLWNvbG9yOiNmZmYiIHZpZXdCb3g9Ii0wLjUgLTAuNSA0MjIgMjA1Ij4KICA8cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSIjRkZGIi8+CiAgPHJlY3Qgd2lkdGg9IjM4MSIgaGVpZ2h0PSIxMDUiIHg9IjMwIiB5PSI1MSIgZmlsbD0iI2U2ZTZlNiIgcG9pbnRlci1ldmVudHM9ImFsbCIgcng9IjMuMTUiIHJ5PSIzLjE1Ii8+CiAgPHBhdGggZmlsbD0ibm9uZSIgZD0iTTIzMyAwaDEzN3YzMEgyMzN6IiBwb2ludGVyLWV2ZW50cz0iYWxsIi8+CiAgPHN3aXRjaCB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtLjUgLS41KSI+CiAgICA8Zm9yZWlnbk9iamVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBwb2ludGVyLWV2ZW50cz0ibm9uZSIgcmVxdWlyZWRGZWF0dXJlcz0iaHR0cDovL3d3dy53My5vcmcvVFIvU1ZHMTEvZmVhdHVyZSNFeHRlbnNpYmlsaXR5IiBzdHlsZT0ib3ZlcmZsb3c6dmlzaWJsZTt0ZXh0LWFsaWduOmxlZnQiPgogICAgICA8ZGl2IHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hodG1sIiBzdHlsZT0iZGlzcGxheTpmbGV4O2FsaWduLWl0ZW1zOnVuc2FmZSBjZW50ZXI7anVzdGlmeS1jb250ZW50OnVuc2FmZSBjZW50ZXI7d2lkdGg6MTM1cHg7aGVpZ2h0OjFweDtwYWRkaW5nLXRvcDoxNXB4O21hcmdpbi1sZWZ0OjIzNHB4Ij4KICAgICAgICA8ZGl2IGRhdGEtZHJhd2lvLWNvbG9ycz0iY29sb3I6IHJnYigwLCAwLCAwKTsiIHN0eWxlPSJib3gtc2l6aW5nOmJvcmRlci1ib3g7Zm9udC1zaXplOjA7dGV4dC1hbGlnbjpjZW50ZXIiPgogICAgICAgICAgPGRpdiBzdHlsZT0iZGlzcGxheTppbmxpbmUtYmxvY2s7Zm9udC1zaXplOjE2cHg7Zm9udC1mYW1pbHk6SGVsdmV0aWNhO2NvbG9yOiMwMDA7bGluZS1oZWlnaHQ6MS4yO3BvaW50ZXItZXZlbnRzOmFsbDt3aGl0ZS1zcGFjZTpub3JtYWw7b3ZlcmZsb3ctd3JhcDpub3JtYWwiPlN0YXR1cyBtZXNzYWdlPC9kaXY+CiAgICAgICAgPC9kaXY+CiAgICAgIDwvZGl2PgogICAgPC9mb3JlaWduT2JqZWN0PgogICAgPHRleHQgeD0iMzAyIiB5PSIyMCIgZm9udC1mYW1pbHk9IkhlbHZldGljYSIgZm9udC1zaXplPSIxNiIgdGV4dC1hbmNob3I9Im1pZGRsZSI+U3RhdHVzIG1lc3NhZ2U8L3RleHQ+CiAgPC9zd2l0Y2g+CiAgPHBhdGggZmlsbD0ibm9uZSIgZD0iTTEzNyAwaDk0djMwaC05NHoiIHBvaW50ZXItZXZlbnRzPSJhbGwiLz4KICA8c3dpdGNoIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0uNSAtLjUpIj4KICAgIDxmb3JlaWduT2JqZWN0IHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHBvaW50ZXItZXZlbnRzPSJub25lIiByZXF1aXJlZEZlYXR1cmVzPSJodHRwOi8vd3d3LnczLm9yZy9UUi9TVkcxMS9mZWF0dXJlI0V4dGVuc2liaWxpdHkiIHN0eWxlPSJvdmVyZmxvdzp2aXNpYmxlO3RleHQtYWxpZ246bGVmdCI+CiAgICAgIDxkaXYgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGh0bWwiIHN0eWxlPSJkaXNwbGF5OmZsZXg7YWxpZ24taXRlbXM6dW5zYWZlIGNlbnRlcjtqdXN0aWZ5LWNvbnRlbnQ6dW5zYWZlIGNlbnRlcjt3aWR0aDo5MnB4O2hlaWdodDoxcHg7cGFkZGluZy10b3A6MTVweDttYXJnaW4tbGVmdDoxMzhweCI+CiAgICAgICAgPGRpdiBkYXRhLWRyYXdpby1jb2xvcnM9ImNvbG9yOiByZ2IoMCwgMCwgMCk7IiBzdHlsZT0iYm94LXNpemluZzpib3JkZXItYm94O2ZvbnQtc2l6ZTowO3RleHQtYWxpZ246Y2VudGVyIj4KICAgICAgICAgIDxkaXYgc3R5bGU9ImRpc3BsYXk6aW5saW5lLWJsb2NrO2ZvbnQtc2l6ZToxNnB4O2ZvbnQtZmFtaWx5OkhlbHZldGljYTtjb2xvcjojMDAwO2xpbmUtaGVpZ2h0OjEuMjtwb2ludGVyLWV2ZW50czphbGw7d2hpdGUtc3BhY2U6bm9ybWFsO292ZXJmbG93LXdyYXA6bm9ybWFsIj5TdGF0dXMgY29kZTwvZGl2PgogICAgICAgIDwvZGl2PgogICAgICA8L2Rpdj4KICAgIDwvZm9yZWlnbk9iamVjdD4KICAgIDx0ZXh0IHg9IjE4NCIgeT0iMjAiIGZvbnQtZmFtaWx5PSJIZWx2ZXRpY2EiIGZvbnQtc2l6ZT0iMTYiIHRleHQtYW5jaG9yPSJtaWRkbGUiPlN0YXR1cyBjb2RlPC90ZXh0PgogIDwvc3dpdGNoPgogIDxwYXRoIGZpbGw9Im5vbmUiIGQ9Ik0wIDBoMTE4djMwSDB6IiBwb2ludGVyLWV2ZW50cz0iYWxsIi8+CiAgPHN3aXRjaCB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtLjUgLS41KSI+CiAgICA8Zm9yZWlnbk9iamVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBwb2ludGVyLWV2ZW50cz0ibm9uZSIgcmVxdWlyZWRGZWF0dXJlcz0iaHR0cDovL3d3dy53My5vcmcvVFIvU1ZHMTEvZmVhdHVyZSNFeHRlbnNpYmlsaXR5IiBzdHlsZT0ib3ZlcmZsb3c6dmlzaWJsZTt0ZXh0LWFsaWduOmxlZnQiPgogICAgICA8ZGl2IHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hodG1sIiBzdHlsZT0iZGlzcGxheTpmbGV4O2FsaWduLWl0ZW1zOnVuc2FmZSBjZW50ZXI7anVzdGlmeS1jb250ZW50OnVuc2FmZSBjZW50ZXI7d2lkdGg6MTE2cHg7aGVpZ2h0OjFweDtwYWRkaW5nLXRvcDoxNXB4O21hcmdpbi1sZWZ0OjFweCI+CiAgICAgICAgPGRpdiBkYXRhLWRyYXdpby1jb2xvcnM9ImNvbG9yOiByZ2IoMCwgMCwgMCk7IiBzdHlsZT0iYm94LXNpemluZzpib3JkZXItYm94O2ZvbnQtc2l6ZTowO3RleHQtYWxpZ246Y2VudGVyIj4KICAgICAgICAgIDxkaXYgc3R5bGU9ImRpc3BsYXk6aW5saW5lLWJsb2NrO2ZvbnQtc2l6ZToxNnB4O2ZvbnQtZmFtaWx5OkhlbHZldGljYTtjb2xvcjojMDAwO2xpbmUtaGVpZ2h0OjEuMjtwb2ludGVyLWV2ZW50czphbGw7d2hpdGUtc3BhY2U6bm9ybWFsO292ZXJmbG93LXdyYXA6bm9ybWFsIj5Qcm90b2NvbCB2ZXJzaW9uPC9kaXY+CiAgICAgICAgPC9kaXY+CiAgICAgIDwvZGl2PgogICAgPC9mb3JlaWduT2JqZWN0PgogICAgPHRleHQgeD0iNTkiIHk9IjIwIiBmb250LWZhbWlseT0iSGVsdmV0aWNhIiBmb250LXNpemU9IjE2IiB0ZXh0LWFuY2hvcj0ibWlkZGxlIj5Qcm90b2NvbCB2ZXJzaW9uPC90ZXh0PgogIDwvc3dpdGNoPgogIDxwYXRoIGZpbGw9Im5vbmUiIGQ9Ik0xOTIgMTc1aDYwdjMwaC02MHoiIHBvaW50ZXItZXZlbnRzPSJhbGwiLz4KICA8c3dpdGNoIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0uNSAtLjUpIj4KICAgIDxmb3JlaWduT2JqZWN0IHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHBvaW50ZXItZXZlbnRzPSJub25lIiByZXF1aXJlZEZlYXR1cmVzPSJodHRwOi8vd3d3LnczLm9yZy9UUi9TVkcxMS9mZWF0dXJlI0V4dGVuc2liaWxpdHkiIHN0eWxlPSJvdmVyZmxvdzp2aXNpYmxlO3RleHQtYWxpZ246bGVmdCI+CiAgICAgIDxkaXYgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGh0bWwiIHN0eWxlPSJkaXNwbGF5OmZsZXg7YWxpZ24taXRlbXM6dW5zYWZlIGNlbnRlcjtqdXN0aWZ5LWNvbnRlbnQ6dW5zYWZlIGNlbnRlcjt3aWR0aDo1OHB4O2hlaWdodDoxcHg7cGFkZGluZy10b3A6MTkwcHg7bWFyZ2luLWxlZnQ6MTkzcHgiPgogICAgICAgIDxkaXYgZGF0YS1kcmF3aW8tY29sb3JzPSJjb2xvcjogcmdiKDAsIDAsIDApOyIgc3R5bGU9ImJveC1zaXppbmc6Ym9yZGVyLWJveDtmb250LXNpemU6MDt0ZXh0LWFsaWduOmNlbnRlciI+CiAgICAgICAgICA8ZGl2IHN0eWxlPSJkaXNwbGF5OmlubGluZS1ibG9jaztmb250LXNpemU6MTZweDtmb250LWZhbWlseTpIZWx2ZXRpY2E7Y29sb3I6IzAwMDtsaW5lLWhlaWdodDoxLjI7cG9pbnRlci1ldmVudHM6YWxsO3doaXRlLXNwYWNlOm5vcm1hbDtvdmVyZmxvdy13cmFwOm5vcm1hbCI+CiAgICAgICAgICAgIDxkaXYgc3R5bGU9ImZvbnQtc2l6ZToxNnB4Ij5IZWFkZXJzPC9kaXY+CiAgICAgICAgICA8L2Rpdj4KICAgICAgICA8L2Rpdj4KICAgICAgPC9kaXY+CiAgICA8L2ZvcmVpZ25PYmplY3Q+CiAgICA8dGV4dCB4PSIyMjIiIHk9IjE5NSIgZm9udC1mYW1pbHk9IkhlbHZldGljYSIgZm9udC1zaXplPSIxNiIgdGV4dC1hbmNob3I9Im1pZGRsZSI+SGVhZGVyczwvdGV4dD4KICA8L3N3aXRjaD4KICA8cmVjdCB3aWR0aD0iMzYiIGhlaWdodD0iMjEiIHg9IjE5NyIgeT0iNTYiIGZpbGw9IiNmMmZmZmMiIHBvaW50ZXItZXZlbnRzPSJhbGwiIHJ4PSIxLjY4IiByeT0iMS42OCIvPgogIDxzd2l0Y2ggdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLS41IC0uNSkiPgogICAgPGZvcmVpZ25PYmplY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgcG9pbnRlci1ldmVudHM9Im5vbmUiIHJlcXVpcmVkRmVhdHVyZXM9Imh0dHA6Ly93d3cudzMub3JnL1RSL1NWRzExL2ZlYXR1cmUjRXh0ZW5zaWJpbGl0eSIgc3R5bGU9Im92ZXJmbG93OnZpc2libGU7dGV4dC1hbGlnbjpsZWZ0Ij4KICAgICAgPGRpdiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94aHRtbCIgc3R5bGU9ImRpc3BsYXk6ZmxleDthbGlnbi1pdGVtczp1bnNhZmUgY2VudGVyO2p1c3RpZnktY29udGVudDp1bnNhZmUgY2VudGVyO3dpZHRoOjFweDtoZWlnaHQ6MXB4O3BhZGRpbmctdG9wOjY2cHg7bWFyZ2luLWxlZnQ6MjE1cHgiPgogICAgICAgIDxkaXYgZGF0YS1kcmF3aW8tY29sb3JzPSJjb2xvcjogIzMzMzMzMzsiIHN0eWxlPSJib3gtc2l6aW5nOmJvcmRlci1ib3g7Zm9udC1zaXplOjA7dGV4dC1hbGlnbjpjZW50ZXIiPgogICAgICAgICAgPGRpdiBzdHlsZT0iZGlzcGxheTppbmxpbmUtYmxvY2s7Zm9udC1zaXplOjE2cHg7Zm9udC1mYW1pbHk6bW9ub3NwYWNlO2NvbG9yOiMzMzM7bGluZS1oZWlnaHQ6MS4yO3BvaW50ZXItZXZlbnRzOmFsbDt3aGl0ZS1zcGFjZTpub3dyYXAiPk9LPC9kaXY+CiAgICAgICAgPC9kaXY+CiAgICAgIDwvZGl2PgogICAgPC9mb3JlaWduT2JqZWN0PgogICAgPHRleHQgeD0iMjE1IiB5PSI3MSIgZmlsbD0iIzMzMyIgZm9udC1mYW1pbHk9Ik1vbm9zcGFjZSIgZm9udC1zaXplPSIxNiIgdGV4dC1hbmNob3I9Im1pZGRsZSI+T0s8L3RleHQ+CiAgPC9zd2l0Y2g+CiAgPHJlY3Qgd2lkdGg9IjQyIiBoZWlnaHQ9IjIxIiB4PSIxMzkiIHk9IjU2IiBmaWxsPSIjZjVmNWZmIiBwb2ludGVyLWV2ZW50cz0iYWxsIiByeD0iMS42OCIgcnk9IjEuNjgiLz4KICA8c3dpdGNoIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0uNSAtLjUpIj4KICAgIDxmb3JlaWduT2JqZWN0IHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHBvaW50ZXItZXZlbnRzPSJub25lIiByZXF1aXJlZEZlYXR1cmVzPSJodHRwOi8vd3d3LnczLm9yZy9UUi9TVkcxMS9mZWF0dXJlI0V4dGVuc2liaWxpdHkiIHN0eWxlPSJvdmVyZmxvdzp2aXNpYmxlO3RleHQtYWxpZ246bGVmdCI+CiAgICAgIDxkaXYgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGh0bWwiIHN0eWxlPSJkaXNwbGF5OmZsZXg7YWxpZ24taXRlbXM6dW5zYWZlIGNlbnRlcjtqdXN0aWZ5LWNvbnRlbnQ6dW5zYWZlIGNlbnRlcjt3aWR0aDoxcHg7aGVpZ2h0OjFweDtwYWRkaW5nLXRvcDo2NnB4O21hcmdpbi1sZWZ0OjE2MHB4Ij4KICAgICAgICA8ZGl2IGRhdGEtZHJhd2lvLWNvbG9ycz0iY29sb3I6ICMzMzMzMzM7IiBzdHlsZT0iYm94LXNpemluZzpib3JkZXItYm94O2ZvbnQtc2l6ZTowO3RleHQtYWxpZ246Y2VudGVyIj4KICAgICAgICAgIDxkaXYgc3R5bGU9ImRpc3BsYXk6aW5saW5lLWJsb2NrO2ZvbnQtc2l6ZToxNnB4O2ZvbnQtZmFtaWx5Om1vbm9zcGFjZTtjb2xvcjojMzMzO2xpbmUtaGVpZ2h0OjEuMjtwb2ludGVyLWV2ZW50czphbGw7d2hpdGUtc3BhY2U6bm93cmFwIj4yMDA8L2Rpdj4KICAgICAgICA8L2Rpdj4KICAgICAgPC9kaXY+CiAgICA8L2ZvcmVpZ25PYmplY3Q+CiAgICA8dGV4dCB4PSIxNjAiIHk9IjcxIiBmaWxsPSIjMzMzIiBmb250LWZhbWlseT0iTW9ub3NwYWNlIiBmb250LXNpemU9IjE2IiB0ZXh0LWFuY2hvcj0ibWlkZGxlIj4yMDA8L3RleHQ+CiAgPC9zd2l0Y2g+CiAgPHJlY3Qgd2lkdGg9IjkyIiBoZWlnaHQ9IjIyIiB4PSIzOCIgeT0iNTUiIGZpbGw9IiNmNWViZWYiIHBvaW50ZXItZXZlbnRzPSJhbGwiIHJ4PSIxLjc2IiByeT0iMS43NiIvPgogIDxzd2l0Y2ggdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLS41IC0uNSkiPgogICAgPGZvcmVpZ25PYmplY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgcG9pbnRlci1ldmVudHM9Im5vbmUiIHJlcXVpcmVkRmVhdHVyZXM9Imh0dHA6Ly93d3cudzMub3JnL1RSL1NWRzExL2ZlYXR1cmUjRXh0ZW5zaWJpbGl0eSIgc3R5bGU9Im92ZXJmbG93OnZpc2libGU7dGV4dC1hbGlnbjpsZWZ0Ij4KICAgICAgPGRpdiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94aHRtbCIgc3R5bGU9ImRpc3BsYXk6ZmxleDthbGlnbi1pdGVtczp1bnNhZmUgY2VudGVyO2p1c3RpZnktY29udGVudDp1bnNhZmUgY2VudGVyO3dpZHRoOjFweDtoZWlnaHQ6MXB4O3BhZGRpbmctdG9wOjY2cHg7bWFyZ2luLWxlZnQ6ODRweCI+CiAgICAgICAgPGRpdiBkYXRhLWRyYXdpby1jb2xvcnM9ImNvbG9yOiAjMzMzMzMzOyIgc3R5bGU9ImJveC1zaXppbmc6Ym9yZGVyLWJveDtmb250LXNpemU6MDt0ZXh0LWFsaWduOmNlbnRlciI+CiAgICAgICAgICA8ZGl2IHN0eWxlPSJkaXNwbGF5OmlubGluZS1ibG9jaztmb250LXNpemU6MTZweDtmb250LWZhbWlseTptb25vc3BhY2U7Y29sb3I6IzMzMztsaW5lLWhlaWdodDoxLjI7cG9pbnRlci1ldmVudHM6YWxsO3doaXRlLXNwYWNlOm5vd3JhcCI+CiAgICAgICAgICAgIDxwIHN0eWxlPSJsaW5lLWhlaWdodDoxMDAlIj4KICAgICAgICAgICAgICA8Zm9udCBjb2xvcj0iIzVkODM3ZSIgc3R5bGU9ImZvbnQtc2l6ZToxNnB4Ij5IVFRQPC9mb250Pi88Zm9udCBjb2xvcj0iI2NkNWI5MiIgc3R5bGU9ImZvbnQtc2l6ZToxNnB4Ij4xLjE8L2ZvbnQ+CiAgICAgICAgICAgIDwvcD4KICAgICAgICAgIDwvZGl2PgogICAgICAgIDwvZGl2PgogICAgICA8L2Rpdj4KICAgIDwvZm9yZWlnbk9iamVjdD4KICAgIDx0ZXh0IHg9Ijg0IiB5PSI3MSIgZmlsbD0iIzMzMyIgZm9udC1mYW1pbHk9Ik1vbm9zcGFjZSIgZm9udC1zaXplPSIxNiIgdGV4dC1hbmNob3I9Im1pZGRsZSI+SFRUUC8xLjE8L3RleHQ+CiAgPC9zd2l0Y2g+CiAgPHJlY3Qgd2lkdGg9IjM2OCIgaGVpZ2h0PSI2MyIgeD0iMzgiIHk9IjgzIiBmaWxsPSIjY2ZlM2Y1IiBwb2ludGVyLWV2ZW50cz0iYWxsIiByeD0iMS44OSIgcnk9IjEuODkiLz4KICA8c3dpdGNoIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0uNSAtLjUpIj4KICAgIDxmb3JlaWduT2JqZWN0IHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHBvaW50ZXItZXZlbnRzPSJub25lIiByZXF1aXJlZEZlYXR1cmVzPSJodHRwOi8vd3d3LnczLm9yZy9UUi9TVkcxMS9mZWF0dXJlI0V4dGVuc2liaWxpdHkiIHN0eWxlPSJvdmVyZmxvdzp2aXNpYmxlO3RleHQtYWxpZ246bGVmdCI+CiAgICAgIDxkaXYgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGh0bWwiIHN0eWxlPSJkaXNwbGF5OmZsZXg7YWxpZ24taXRlbXM6dW5zYWZlIGNlbnRlcjtqdXN0aWZ5LWNvbnRlbnQ6dW5zYWZlIGZsZXgtc3RhcnQ7d2lkdGg6MzYycHg7aGVpZ2h0OjFweDtwYWRkaW5nLXRvcDoxMTVweDttYXJnaW4tbGVmdDo0MnB4Ij4KICAgICAgICA8ZGl2IGRhdGEtZHJhd2lvLWNvbG9ycz0iY29sb3I6ICMzMzMzMzM7IiBzdHlsZT0iYm94LXNpemluZzpib3JkZXItYm94O2ZvbnQtc2l6ZTowO3RleHQtYWxpZ246bGVmdCI+CiAgICAgICAgICA8ZGl2IHN0eWxlPSJkaXNwbGF5OmlubGluZS1ibG9jaztmb250LXNpemU6MTZweDtmb250LWZhbWlseTptb25vc3BhY2U7Y29sb3I6IzMzMztsaW5lLWhlaWdodDoxLjI7cG9pbnRlci1ldmVudHM6YWxsO3doaXRlLXNwYWNlOm5vcm1hbDtvdmVyZmxvdy13cmFwOm5vcm1hbCI+CiAgICAgICAgICAgIDxkaXYgc3R5bGU9ImZvbnQtc2l6ZToxNnB4Ij4KICAgICAgICAgICAgICA8Zm9udCBjb2xvcj0iIzVkODM3ZSIgc3R5bGU9ImZvbnQtc2l6ZToxNnB4Ij5kYXRlPC9mb250PjogVHVlLCAxOCBKdW4gMjAyNCAxMDowMzo1NSBHTVQ8L2Rpdj4KICAgICAgICAgICAgPGRpdiBzdHlsZT0iZm9udC1zaXplOjE2cHgiPgogICAgICAgICAgICAgIDxmb250IGNvbG9yPSIjNWQ4MzdlIiBzdHlsZT0iZm9udC1zaXplOjE2cHgiPmNhY2hlLWNvbnRyb2w8L2ZvbnQ+OiBwdWJsaWMsIG1heC1hZ2U9MzYwMDwvZGl2PgogICAgICAgICAgICA8ZGl2IHN0eWxlPSJmb250LXNpemU6MTZweCI+CiAgICAgICAgICAgICAgPGZvbnQgY29sb3I9IiM1ZDgzN2UiIHN0eWxlPSJmb250LXNpemU6MTZweCI+Y29udGVudC10eXBlPC9mb250PjogdGV4dC9odG1sPC9kaXY+CiAgICAgICAgICA8L2Rpdj4KICAgICAgICA8L2Rpdj4KICAgICAgPC9kaXY+CiAgICA8L2ZvcmVpZ25PYmplY3Q+CiAgICA8dGV4dCB4PSI0MiIgeT0iMTE5IiBmaWxsPSIjMzMzIiBmb250LWZhbWlseT0iTW9ub3NwYWNlIiBmb250LXNpemU9IjE2Ij5kYXRlOiBUdWUsIDE4IEp1biAyMDI0IDEwOjAzOjU1IEdNVC4uLjwvdGV4dD4KICA8L3N3aXRjaD4KICA8ZyBzdHJva2U9IiMwMDAiIHN0cm9rZS1taXRlcmxpbWl0PSIxMCI+CiAgICA8cGF0aCBmaWxsPSJub25lIiBkPSJNMjIyIDE1Mi4zN1YxNzUiIHBvaW50ZXItZXZlbnRzPSJzdHJva2UiLz4KICAgIDxwYXRoIGQ9Im0yMjIgMTQ3LjEyIDIuMzMgNy0yLjMzLTEuNzUtMi4zMyAxLjc1WiIgcG9pbnRlci1ldmVudHM9ImFsbCIvPgogIDwvZz4KICA8ZyBzdHJva2U9IiMwMDAiIHN0cm9rZS1taXRlcmxpbWl0PSIxMCI+CiAgICA8cGF0aCBmaWxsPSJub25lIiBkPSJNMjI5LjYzIDUzLjAyIDI3My4xNSAzMCIgcG9pbnRlci1ldmVudHM9InN0cm9rZSIvPgogICAgPHBhdGggZD0ibTIyNC45OSA1NS40OCA1LjA5LTUuMzQtLjQ1IDIuODggMi42NCAxLjI1WiIgcG9pbnRlci1ldmVudHM9ImFsbCIvPgogIDwvZz4KICA8ZyBzdHJva2U9IiMwMDAiIHN0cm9rZS1taXRlcmxpbWl0PSIxMCI+CiAgICA8cGF0aCBmaWxsPSJub25lIiBkPSJtMTYzLjIyIDUwLjUgMTItMjAuNSIgcG9pbnRlci1ldmVudHM9InN0cm9rZSIvPgogICAgPHBhdGggZD0ibTE2MC41NiA1NS4wNCAxLjUzLTcuMjIgMS4xMyAyLjY4IDIuODktLjMzWiIgcG9pbnRlci1ldmVudHM9ImFsbCIvPgogIDwvZz4KICA8ZyBzdHJva2U9IiMwMDAiIHN0cm9rZS1taXRlcmxpbWl0PSIxMCI+CiAgICA8cGF0aCBmaWxsPSJub25lIiBkPSJNNjAuNjggNDguNjQgNTkuNzUgMzAiIHBvaW50ZXItZXZlbnRzPSJzdHJva2UiLz4KICAgIDxwYXRoIGQ9Im02MC45NCA1My44OC0yLjY4LTYuODcgMi40MiAxLjYzIDIuMjUtMS44NloiIHBvaW50ZXItZXZlbnRzPSJhbGwiLz4KICA8L2c+Cjwvc3ZnPg==" width="422" height="205" class="img_ev3q"></p>
<h3 class="anchor anchorWithStickyNavbar_LWe7" id="例子">例子<a href="https://developer.zsxyww.com/blog/Web%E7%9A%84%E5%8E%86%E5%8F%B21%EF%B8%8F%E2%83%A3-HTTP#%E4%BE%8B%E5%AD%90" class="hash-link" aria-label="Direct link to 例子" title="Direct link to 例子">​</a></h3>
<p><code>GET</code>方法从服务器获得一个资源，我们在浏览器的地址栏输入一个地址时，就是在对这个URI做<code>GET</code>请求，前面的例子也是通过<code>GET</code>方法来进行的。</p>
<p>比如，发送<code>GET http://developer.zsxyww.com/test/test.txt</code>,那么就会把我们服务器根目录上<code>test</code>文件夹里面的<code>test.txt</code>这个文件发过来</p>
<p><code>POST</code>方法向服务器上传一个资源，例如使用某个客户端发送<code>POST http://example.org/sheet.xlsx</code>，在request body里面带上你的这个文件，那么<code>example.org</code>网站的根目录下就会多出一个叫做<code>sheet.xlsx</code>的文件</p>
<p>除了上面介绍的这些方法，还有<code>DELETE</code>,<code>PATCH</code>等方法，分别对应了删除，修改一个资源，你可以在你的电脑上通过<code>curl</code>等程序，或者通过浏览器控制台来进行常规的<code>GET</code>之外的方法请求</p>
<div class="theme-admonition theme-admonition-tip admonition_xJq3 alert alert--success"><div class="admonitionHeading_Gvgb"><span class="admonitionIcon_Rf37"><svg viewBox="0 0 12 16"><path fill-rule="evenodd" d="M6.5 0C3.48 0 1 2.19 1 5c0 .92.55 2.25 1 3 1.34 2.25 1.78 2.78 2 4v1h5v-1c.22-1.22.66-1.75 2-4 .45-.75 1-2.08 1-3 0-2.81-2.48-5-5.5-5zm3.64 7.48c-.25.44-.47.8-.67 1.11-.86 1.41-1.25 2.06-1.45 3.23-.02.05-.02.11-.02.17H5c0-.06 0-.13-.02-.17-.2-1.17-.59-1.83-1.45-3.23-.2-.31-.42-.67-.67-1.11C2.44 6.78 2 5.65 2 5c0-2.2 2.02-4 4.5-4 1.22 0 2.36.42 3.22 1.19C10.55 2.94 11 3.94 11 5c0 .66-.44 1.78-.86 2.48zM4 14h5c-.23 1.14-1.3 2-2.5 2s-2.27-.86-2.5-2z"></path></svg></span>提示</div><div class="admonitionContent_BuS1"><p>httpbin.org 这个网站可以让你试验HTTP协议的方法</p></div></div>
<div class="theme-admonition theme-admonition-info admonition_xJq3 alert alert--info"><div class="admonitionHeading_Gvgb"><span class="admonitionIcon_Rf37"><svg viewBox="0 0 14 16"><path fill-rule="evenodd" d="M7 2.3c3.14 0 5.7 2.56 5.7 5.7s-2.56 5.7-5.7 5.7A5.71 5.71 0 0 1 1.3 8c0-3.14 2.56-5.7 5.7-5.7zM7 1C3.14 1 0 4.14 0 8s3.14 7 7 7 7-3.14 7-7-3.14-7-7-7zm1 3H6v5h2V4zm0 6H6v2h2v-2z"></path></svg></span>HTTPS</div><div class="admonitionContent_BuS1"><p>HTTP在网络上是明文传输的，也就是说客户端和服务器之间的每个网络节点，每个人都可以看到。这显然不方便隐私，所以人们发明了HTTPS，也就是把HTTP的正文加密了，HTTPS可以说是当今互联网的基石，有了HTTPS，我们才能放心地在网上输入密码，用银行卡付款等。</p></div></div>
<h2 class="anchor anchorWithStickyNavbar_LWe7" id="网页与html">网页与HTML<a href="https://developer.zsxyww.com/blog/Web%E7%9A%84%E5%8E%86%E5%8F%B21%EF%B8%8F%E2%83%A3-HTTP#%E7%BD%91%E9%A1%B5%E4%B8%8Ehtml" class="hash-link" aria-label="Direct link to 网页与HTML" title="Direct link to 网页与HTML">​</a></h2>
<p>随着网络的发展，人们发现互联网的潜力远不止于传输文件。特别是浏览器的普及，人们希望能直接在网页上展示丰富的信息，而不只是把浏览器当作下载工具。前面我们说过了，浏览器可以直接展示txt文件，但是最大的问题是，txt文件是没有样式的。</p>
<p>比如：txt无法设置字体大小和颜色,无法加粗、倾斜文字,无法创建表格和列表,无法插入图片和链接。这些都是txt的局限。</p>
<p>为了解决这个问题，人们发明了HTML(HyperText Markup Language),就是“超文本标记语言”，HTML的核心思想是：在普通文本中加入特殊的标记，告诉浏览器如何显示内容。</p>
<p>比如<code>&lt;i&gt;你好～&lt;/i&gt;</code>就是指示浏览器以斜体的方式显示<code>你好～</code>这段文字。你可以用系统自带的笔记本像打开txt文件一样打开HTML文件，只不过浏览器默认是加载渲染之后的界面而不是原始的HTML。</p>
<p>除HTML之外，人们还发明了CSS与HTML搭配使用，CSS可以对样式做更复杂高级精细的控制，这里就不细说了</p>
<p>回到我们的主题，不管使用的是什么方法，操作的是什么文件，HTTP协议传输的对象都是一些固定静态的文件，其内容在服务器上是固定不变的（除非手动修改），这样的网页称为静态网页。</p>
<p>静态网页中，所有用户看到的内容都相同，内容不会根据用户行为动态变化，服务器只负责传输文件，不进行复杂计算。</p>
<p>我们的wiki就是静态网页，在服务端上都对应着HTML页面，只不过加了非常多的样式显得很高级。</p>
<p>很多常见的网站（如企业官网、技术文档、个人博客等）都是静态网页，虽然看起来很精美，但本质上就是经过精心设计的HTML和CSS文件。</p>
<p><img decoding="async" loading="lazy" alt="网页的构成" src="https://developer.zsxyww.com/assets/images/fetching-a-page-d2a81d3ec067e988c412d33b300cf47d.svg" width="710" height="470" class="img_ev3q"></p>
<div class="theme-admonition theme-admonition-info admonition_xJq3 alert alert--info"><div class="admonitionHeading_Gvgb"><span class="admonitionIcon_Rf37"><svg viewBox="0 0 14 16"><path fill-rule="evenodd" d="M7 2.3c3.14 0 5.7 2.56 5.7 5.7s-2.56 5.7-5.7 5.7A5.71 5.71 0 0 1 1.3 8c0-3.14 2.56-5.7 5.7-5.7zM7 1C3.14 1 0 4.14 0 8s3.14 7 7 7 7-3.14 7-7-3.14-7-7-7zm1 3H6v5h2V4zm0 6H6v2h2v-2z"></path></svg></span>info</div><div class="admonitionContent_BuS1"><p>这是三篇系列文章中的第<strong>1</strong>篇</p><p>点击以跳转：</p><p><strong>HTTP</strong>(你在看的文章)</p><p><a href="https://developer.zsxyww.com/blog/Web%E7%9A%84%E5%8E%86%E5%8F%B22%EF%B8%8F%E2%83%A3-%E5%8A%A8%E6%80%81%E7%BD%91%E9%A1%B5">动态网页</a></p><p><a href="https://developer.zsxyww.com/blog/Web%E7%9A%84%E5%8E%86%E5%8F%B23%EF%B8%8F%E2%83%A3-Web%E5%BA%94%E7%94%A8">Web应用</a></p></div></div>]]></content:encoded>
</item>
<item>
<title><![CDATA[Web的历史2️⃣-动态网页]]></title>
<link>https://developer.zsxyww.com/blog/Web的历史2️⃣-动态网页</link>
<guid>https://developer.zsxyww.com/blog/Web的历史2️⃣-动态网页</guid>
<pubDate>Sun, 13 Jul 2025 03:23:58 GMT</pubDate>
<description><![CDATA[上篇文章我们已经了解了静态网页是如何工作的，但是这样的网页是不能满足大家对互联网的需求的。举例子来说：你访问b站首页bilibili.com,每次刷新，首页上显示给你的视频都不一样，不同的人访问这个首页，显示的也不一样，按理说大家都是访问一个网址，背后应该都是同一个文件，为什么每个人都不一样呢？这种功能是如何实现的？]]></description>
<content:encoded><![CDATA[<p>上篇文章我们已经了解了静态网页是如何工作的，但是这样的网页是不能满足大家对互联网的需求的。举例子来说：你访问b站首页<code>bilibili.com</code>,每次刷新，首页上显示给你的视频都不一样，不同的人访问这个首页，显示的也不一样，按理说大家都是访问一个网址，背后应该都是同一个文件，为什么每个人都不一样呢？这种功能是如何实现的？</p>
<p>淘宝上有数不清的商品在售卖，如果淘宝为每一个商品都在服务器目录下面创建一个html文件，好让大家通过访问<code>http://taobao.com/someproduct.html</code>来查看商品信息，那这个工作量就非常大了。而且，这样的网页，基本上没有交互的功能：我们希望用户可以点击按钮就能购买商品，商家在网页后台上操作就能上传商品。这种功能应该如何实现呢？</p>
<p>暂时先不考虑这些高级的问题，让我们先从最基础的讲起：</p>
<h2 class="anchor anchorWithStickyNavbar_LWe7" id="服务器端内嵌ssi">服务器端内嵌(SSI)<a href="https://developer.zsxyww.com/blog/Web%E7%9A%84%E5%8E%86%E5%8F%B22%EF%B8%8F%E2%83%A3-%E5%8A%A8%E6%80%81%E7%BD%91%E9%A1%B5#%E6%9C%8D%E5%8A%A1%E5%99%A8%E7%AB%AF%E5%86%85%E5%B5%8Cssi" class="hash-link" aria-label="Direct link to 服务器端内嵌(SSI)" title="Direct link to 服务器端内嵌(SSI)">​</a></h2>
<p>如果你想向网站中插入动态内容，SSI是最简单，最直接的办法，比如我们的wiki有许多页面，但是每个页面都有一些共同的元素：页面头部的导航栏，左侧的列表，页脚等。如果为每个页面都复制一份相同的HTML的话，那就太麻烦了，有没有什么办法，可以使HTML一次编写，到处渲染呢？</p>
<p>SSI(Server Side Includes)就是满足这种需求的一个HTML宏语言。它有点类似于C语言的<code># include</code>宏：</p>
<p>假设这是我们首页的HTML:</p>
<div class="language-html codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-html codeBlock_bY9V thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#393A34"><span class="token tag punctuation" style="color:#393A34">&lt;</span><span class="token tag" style="color:#00009f">h1</span><span class="token tag punctuation" style="color:#393A34">&gt;</span><span class="token plain">wiki</span><span class="token tag punctuation" style="color:#393A34">&lt;/</span><span class="token tag" style="color:#00009f">h1</span><span class="token tag punctuation" style="color:#393A34">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token comment" style="color:#999988;font-style:italic">&lt;!--#include file="navbar.html" --&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token tag punctuation" style="color:#393A34">&lt;</span><span class="token tag" style="color:#00009f">div</span><span class="token tag" style="color:#00009f"> </span><span class="token tag attr-name" style="color:#00a4db">class</span><span class="token tag attr-value punctuation attr-equals" style="color:#393A34">=</span><span class="token tag attr-value punctuation" style="color:#393A34">"</span><span class="token tag attr-value" style="color:#e3116c">article</span><span class="token tag attr-value punctuation" style="color:#393A34">"</span><span class="token tag punctuation" style="color:#393A34">&gt;</span><span class="token tag punctuation" style="color:#393A34">&lt;/</span><span class="token tag" style="color:#00009f">div</span><span class="token tag punctuation" style="color:#393A34">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span></code></pre><div class="buttonGroup__atx"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_eSgA" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<p>假如<code>navbar.html</code>的内容如下：</p>
<div class="language-html codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-html codeBlock_bY9V thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token tag punctuation" style="color:#393A34">&lt;</span><span class="token tag" style="color:#00009f">tr</span><span class="token tag punctuation" style="color:#393A34">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token tag punctuation" style="color:#393A34">&lt;</span><span class="token tag" style="color:#00009f">td</span><span class="token tag punctuation" style="color:#393A34">&gt;</span><span class="token plain">教程</span><span class="token tag punctuation" style="color:#393A34">&lt;/</span><span class="token tag" style="color:#00009f">td</span><span class="token tag punctuation" style="color:#393A34">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token tag punctuation" style="color:#393A34">&lt;</span><span class="token tag" style="color:#00009f">td</span><span class="token tag punctuation" style="color:#393A34">&gt;</span><span class="token plain">文档</span><span class="token tag punctuation" style="color:#393A34">&lt;/</span><span class="token tag" style="color:#00009f">td</span><span class="token tag punctuation" style="color:#393A34">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token tag punctuation" style="color:#393A34">&lt;</span><span class="token tag" style="color:#00009f">td</span><span class="token tag punctuation" style="color:#393A34">&gt;</span><span class="token plain">高级</span><span class="token tag punctuation" style="color:#393A34">&lt;/</span><span class="token tag" style="color:#00009f">td</span><span class="token tag punctuation" style="color:#393A34">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token tag punctuation" style="color:#393A34">&lt;</span><span class="token tag" style="color:#00009f">td</span><span class="token tag punctuation" style="color:#393A34">&gt;</span><span class="token tag punctuation" style="color:#393A34">&lt;</span><span class="token tag" style="color:#00009f">a</span><span class="token tag" style="color:#00009f"> </span><span class="token tag attr-name" style="color:#00a4db">href</span><span class="token tag attr-value punctuation attr-equals" style="color:#393A34">=</span><span class="token tag attr-value punctuation" style="color:#393A34">"</span><span class="token tag attr-value" style="color:#e3116c">github.com/zscnsd/website</span><span class="token tag attr-value punctuation" style="color:#393A34">"</span><span class="token tag punctuation" style="color:#393A34">&gt;</span><span class="token plain">Github</span><span class="token tag punctuation" style="color:#393A34">&lt;/</span><span class="token tag" style="color:#00009f">a</span><span class="token tag punctuation" style="color:#393A34">&gt;</span><span class="token tag punctuation" style="color:#393A34">&lt;/</span><span class="token tag" style="color:#00009f">td</span><span class="token tag punctuation" style="color:#393A34">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token tag punctuation" style="color:#393A34">&lt;/</span><span class="token tag" style="color:#00009f">tr</span><span class="token tag punctuation" style="color:#393A34">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span></code></pre><div class="buttonGroup__atx"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_eSgA" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<p>那么用户访问我们首页时就会看到：</p>
<div class="language-html codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-html codeBlock_bY9V thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token tag punctuation" style="color:#393A34">&lt;</span><span class="token tag" style="color:#00009f">h1</span><span class="token tag punctuation" style="color:#393A34">&gt;</span><span class="token plain">wiki</span><span class="token tag punctuation" style="color:#393A34">&lt;/</span><span class="token tag" style="color:#00009f">h1</span><span class="token tag punctuation" style="color:#393A34">&gt;</span><span class="token plain"></span><br></span><span class="token-line theme-code-block-highlighted-line" style="color:#393A34"><span class="token plain"></span><span class="token tag punctuation" style="color:#393A34">&lt;</span><span class="token tag" style="color:#00009f">tr</span><span class="token tag punctuation" style="color:#393A34">&gt;</span><span class="token plain"></span><br></span><span class="token-line theme-code-block-highlighted-line" style="color:#393A34"><span class="token plain"></span><span class="token tag punctuation" style="color:#393A34">&lt;</span><span class="token tag" style="color:#00009f">td</span><span class="token tag punctuation" style="color:#393A34">&gt;</span><span class="token plain">教程</span><span class="token tag punctuation" style="color:#393A34">&lt;/</span><span class="token tag" style="color:#00009f">td</span><span class="token tag punctuation" style="color:#393A34">&gt;</span><span class="token plain"></span><br></span><span class="token-line theme-code-block-highlighted-line" style="color:#393A34"><span class="token plain"></span><span class="token tag punctuation" style="color:#393A34">&lt;</span><span class="token tag" style="color:#00009f">td</span><span class="token tag punctuation" style="color:#393A34">&gt;</span><span class="token plain">文档</span><span class="token tag punctuation" style="color:#393A34">&lt;/</span><span class="token tag" style="color:#00009f">td</span><span class="token tag punctuation" style="color:#393A34">&gt;</span><span class="token plain"></span><br></span><span class="token-line theme-code-block-highlighted-line" style="color:#393A34"><span class="token plain"></span><span class="token tag punctuation" style="color:#393A34">&lt;</span><span class="token tag" style="color:#00009f">td</span><span class="token tag punctuation" style="color:#393A34">&gt;</span><span class="token plain">高级</span><span class="token tag punctuation" style="color:#393A34">&lt;/</span><span class="token tag" style="color:#00009f">td</span><span class="token tag punctuation" style="color:#393A34">&gt;</span><span class="token plain"></span><br></span><span class="token-line theme-code-block-highlighted-line" style="color:#393A34"><span class="token plain"></span><span class="token tag punctuation" style="color:#393A34">&lt;</span><span class="token tag" style="color:#00009f">td</span><span class="token tag punctuation" style="color:#393A34">&gt;</span><span class="token tag punctuation" style="color:#393A34">&lt;</span><span class="token tag" style="color:#00009f">a</span><span class="token tag" style="color:#00009f"> </span><span class="token tag attr-name" style="color:#00a4db">href</span><span class="token tag attr-value punctuation attr-equals" style="color:#393A34">=</span><span class="token tag attr-value punctuation" style="color:#393A34">"</span><span class="token tag attr-value" style="color:#e3116c">github.com/zscnsd/website</span><span class="token tag attr-value punctuation" style="color:#393A34">"</span><span class="token tag punctuation" style="color:#393A34">&gt;</span><span class="token plain">Github</span><span class="token tag punctuation" style="color:#393A34">&lt;/</span><span class="token tag" style="color:#00009f">a</span><span class="token tag punctuation" style="color:#393A34">&gt;</span><span class="token tag punctuation" style="color:#393A34">&lt;/</span><span class="token tag" style="color:#00009f">td</span><span class="token tag punctuation" style="color:#393A34">&gt;</span><span class="token plain"></span><br></span><span class="token-line theme-code-block-highlighted-line" style="color:#393A34"><span class="token plain"></span><span class="token tag punctuation" style="color:#393A34">&lt;/</span><span class="token tag" style="color:#00009f">tr</span><span class="token tag punctuation" style="color:#393A34">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token tag punctuation" style="color:#393A34">&lt;</span><span class="token tag" style="color:#00009f">div</span><span class="token tag" style="color:#00009f"> </span><span class="token tag attr-name" style="color:#00a4db">class</span><span class="token tag attr-value punctuation attr-equals" style="color:#393A34">=</span><span class="token tag attr-value punctuation" style="color:#393A34">"</span><span class="token tag attr-value" style="color:#e3116c">article</span><span class="token tag attr-value punctuation" style="color:#393A34">"</span><span class="token tag punctuation" style="color:#393A34">&gt;</span><span class="token tag punctuation" style="color:#393A34">&lt;/</span><span class="token tag" style="color:#00009f">div</span><span class="token tag punctuation" style="color:#393A34">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span></code></pre><div class="buttonGroup__atx"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_eSgA" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<p>如果导航栏的界面有变化，那么只需要修改<code>navbar.html</code>即可，不用修改网站中的每一个页面。</p>
<p>没错，SSI的功能就是简单地把指定的内容插入进HTML里。这对一些重复的元素(例如每个网页的页头，页脚，侧边栏)还有一些需要更新的内容很实用。</p>
<p>当然，SSI并没有解决动态网页的问题，它只是把需要手动更新的地方单独拿了出来，使维护静态网站更容易，所以程序员们又发明了CGI技术。</p>
<h2 class="anchor anchorWithStickyNavbar_LWe7" id="cgi">CGI<a href="https://developer.zsxyww.com/blog/Web%E7%9A%84%E5%8E%86%E5%8F%B22%EF%B8%8F%E2%83%A3-%E5%8A%A8%E6%80%81%E7%BD%91%E9%A1%B5#cgi" class="hash-link" aria-label="Direct link to CGI" title="Direct link to CGI">​</a></h2>
<p><strong>CGI(Common Gateway Interface)</strong> 是第一个真正实现动态网页的技术，它允许Web服务器执行外部程序来生成网页内容。</p>
<p>CGI的工作原理是：当用户访问特定URL时，服务器不是返回静态文件，而是执行一个程序，并将程序的输出作为HTTP响应返回给用户。</p>
<p>(举个天气预报的例子)：</p>
<p>Web服务器通常会把能执行的程序(除开静态文件)放在一个叫cgi-bin的特殊目录里。假设我们服务器的这个文件夹里有一个查询天气的Python程序<code>weather.py</code>,当用户访问<code>http://example.org/cgi-bin/weather.py?city=中山&amp;date=2025-06-25</code>时,我们的HTTP服务程序会自动<strong>执行</strong>放在路径中<code>/cgi-bin/weather.py</code>的这个Python脚本，并且将客户端的请求头和请求体传递给脚本；</p>
<p>脚本解析请求头中<code>city=中山&amp;date=2025-06-25</code>这个参数，在数据库中查询这个日期的天气，然后返回一个HTML给HTTP服务程序，再把这个HTML返回给客户端。</p>
<p>如果没有设置CGI,那么服务程序只会返回给客户端<code>TodayWeather.py</code>这个脚本文件的代码本身。</p>
<p>其实，CGI是一个接口格式，它定义了我们编写程序与HTTP服务程序之间如何交互。通常，HTTP服务程序给CGI程序的输入就是环境变量，输出就是标准输出。</p>
<p>CGI的巧妙之处在于，服务器不是用什么复杂的方式和脚本沟通，而是把请求信息（比如URL参数里的城市）变成程序很轻松就能读到的环境变量。而程序也不需要复杂的操作进行IO，它只需要把生成的HTML代码打印出来，服务器就会自动收集这些打印的内容，然后发回给用户的浏览器。</p>
<p>下面是一个例子：</p>
<div class="language-bash codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockTitle_Ktv7">/var/www/cgi-bin/system-info.sh</div><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-bash codeBlock_bY9V thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">#!/bin/bash</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"># HTTP响应头</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">echo "Content-type: text/html"</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">echo ""</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"># HTML内容</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">echo '&lt;html&gt;'</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">echo '&lt;head&gt;&lt;title&gt;系统信息&lt;/title&gt;&lt;/head&gt;'</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">echo '&lt;body&gt;'</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">echo '&lt;h1&gt;服务器系统信息&lt;/h1&gt;'</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">echo '&lt;p&gt;当前时间：'$(date)'&lt;/p&gt;'</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">echo '&lt;p&gt;内存使用情况：&lt;/p&gt;'</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">echo '&lt;pre&gt;'</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">free -h</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">echo '&lt;/pre&gt;'</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">echo '&lt;/body&gt;'</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">echo '&lt;/html&gt;'</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span></code></pre><div class="buttonGroup__atx"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_eSgA" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<p>每次用户访问这个页面，都会看到实时的系统信息，真正实现了动态内容。</p>
<p>虽然CGI现在很少见了，但它建立了一个重要概念：将URL请求映射到程序函数，而不是静态文件。这个思想成为了现代Web开发的基础。</p>
<h2 class="anchor anchorWithStickyNavbar_LWe7" id="嵌入式脚本">嵌入式脚本<a href="https://developer.zsxyww.com/blog/Web%E7%9A%84%E5%8E%86%E5%8F%B22%EF%B8%8F%E2%83%A3-%E5%8A%A8%E6%80%81%E7%BD%91%E9%A1%B5#%E5%B5%8C%E5%85%A5%E5%BC%8F%E8%84%9A%E6%9C%AC" class="hash-link" aria-label="Direct link to 嵌入式脚本" title="Direct link to 嵌入式脚本">​</a></h2>
<p>随着动态网页需求的增长，纯CGI编程变得复杂。程序员们希望能够在HTML中直接编程动态代码，这样既保持了HTML的可读性，又能实现动态功能。</p>
<p>这个就是嵌入式脚本，顾名思义就是把脚本和HTML混在一起，在HTML中嵌入脚本；</p>
<p>但是这种脚本和今天的前端JavaScript不同，它是由后端解释执行的，在返回HTML响应之前，HTTP服务程序会检查这个HTML里面有没有可以执行的脚本内容，有的话就执行这些脚本，并且把脚本的输出嵌入到HTML里面。任何有效的HTML也是有效的这类脚本语言。</p>
<p>从CGI到嵌入式脚本的另外一个关键驱动力是性能。CGI每来一个请求，服务器就得创建一个新进程去运行CGI程序，完成后再销毁，开销很大。而嵌入式脚本通常则是直接作为服务器的一部分运行，效率远高于CGI。</p>
<h3 class="anchor anchorWithStickyNavbar_LWe7" id="jsp">JSP<a href="https://developer.zsxyww.com/blog/Web%E7%9A%84%E5%8E%86%E5%8F%B22%EF%B8%8F%E2%83%A3-%E5%8A%A8%E6%80%81%E7%BD%91%E9%A1%B5#jsp" class="hash-link" aria-label="Direct link to JSP" title="Direct link to JSP">​</a></h3>
<p>举个例子吧，你可以轻松使用Java来创建动态网页，只需要把Java代码嵌入到HTML里面，使用<code>&lt;% %&gt;</code>包裹住代码：</p>
<div class="language-java codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-java codeBlock_bY9V thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">&lt;html&gt;</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">&lt;body&gt;</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> &lt;p&gt;当前时间：&lt;%= new java.util.Date() %&gt;&lt;/p&gt;</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">&lt;/body&gt;</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">&lt;/html&gt;</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span></code></pre><div class="buttonGroup__atx"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_eSgA" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<p>复杂一点的例子：</p>
<div class="language-java codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-java codeBlock_bY9V thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">&lt;html&gt;</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">&lt;body&gt;</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> &lt;h1&gt;欢迎访问我们的网站&lt;/h1&gt;</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> &lt;p&gt;当前服务器时间：&lt;%= new java.util.Date() %&gt;&lt;/p&gt;</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> &lt;p&gt;您是第 &lt;%= session.getAttribute("visitCount") %&gt; 位访客&lt;/p&gt;</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> &lt;%-- 这是JSP注释，不会出现在最终HTML中 --%&gt;</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> &lt;% </span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> // 这里可以写复杂的Java逻辑</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> String userName = request.getParameter("user");</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> if (userName != null) {</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> out.println("&lt;p&gt;欢迎您，" + userName + "！&lt;/p&gt;");</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> }</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> %&gt;</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">&lt;/body&gt;</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">&lt;/html&gt;</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span></code></pre><div class="buttonGroup__atx"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_eSgA" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<div class="theme-admonition theme-admonition-info admonition_xJq3 alert alert--info"><div class="admonitionHeading_Gvgb"><span class="admonitionIcon_Rf37"><svg viewBox="0 0 14 16"><path fill-rule="evenodd" d="M7 2.3c3.14 0 5.7 2.56 5.7 5.7s-2.56 5.7-5.7 5.7A5.71 5.71 0 0 1 1.3 8c0-3.14 2.56-5.7 5.7-5.7zM7 1C3.14 1 0 4.14 0 8s3.14 7 7 7 7-3.14 7-7-3.14-7-7-7zm1 3H6v5h2V4zm0 6H6v2h2v-2z"></path></svg></span>session和cookie</div><div class="admonitionContent_BuS1"><p>在这段JSP代码中有一个对象叫做<code>session</code>，这是什么呢？实际上，因为HTTP是无状态的协议，意味着两次请求之间是完全独立的，一次请求不应该依赖另一次请求。这显得有点不灵活，于是人们会在HTTP的请求体上夹带一些额外的参数，用于表明用户的身份信息，比如在用户登录网站之后，服务器会给客户端一个密钥，下一次客户端请求页面时带上这个密钥，服务器就知道这是某个用户的请求。在这种模式下，服务器需要为每个用户维护信息，比如最简单地需要维护密钥是对应哪个用户的，这些信息就叫做session。</p></div></div>
<p>类似于这样的脚本叫做JSP(JavaServer Pages),它在后端返回时被转换成Java Servlet代码来执行，本质上，JSP是Java Servlet的一种语法糖。至于JSP和Java Servlet都是什么，自行了解吧。</p>
<h3 class="anchor anchorWithStickyNavbar_LWe7" id="php">PHP<a href="https://developer.zsxyww.com/blog/Web%E7%9A%84%E5%8E%86%E5%8F%B22%EF%B8%8F%E2%83%A3-%E5%8A%A8%E6%80%81%E7%BD%91%E9%A1%B5#php" class="hash-link" aria-label="Direct link to PHP" title="Direct link to PHP">​</a></h3>
<p>比JSP更灵活的就是PHP,PHP就是一门纯正的脚本语言了，它的用法与JSP类似,使用<code>&lt;?php ?&gt;包裹代码</code>：</p>
<div class="language-php codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-php codeBlock_bY9V thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">&lt;html&gt;</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">&lt;body&gt;</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> &lt;h1&gt;欢迎来到我的网站&lt;/h1&gt;</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> &lt;?php</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> $time = date('Y-m-d H:i:s');</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> echo "&lt;p&gt;当前时间：$time&lt;/p&gt;";</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> ?&gt;</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">&lt;/body&gt;</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">&lt;/html&gt;</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span></code></pre><div class="buttonGroup__atx"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_eSgA" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<p>也可以这样写，这样就类似于CGI程序的写法了：</p>
<div class="language-php codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-php codeBlock_bY9V thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">&lt;?php</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">echo "&lt;html&gt;&lt;body&gt;";</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">echo "&lt;h1&gt;欢迎来到我的网站&lt;/h1&gt;";</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">$time = date('Y-m-d H:i:s');</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">echo "&lt;p&gt;当前时间：$time&lt;/p&gt;";</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">echo "&lt;/body&gt;&lt;/html&gt;";</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">?&gt;</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span></code></pre><div class="buttonGroup__atx"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_eSgA" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<h3 class="anchor anchorWithStickyNavbar_LWe7" id="lamp">LAMP<a href="https://developer.zsxyww.com/blog/Web%E7%9A%84%E5%8E%86%E5%8F%B22%EF%B8%8F%E2%83%A3-%E5%8A%A8%E6%80%81%E7%BD%91%E9%A1%B5#lamp" class="hash-link" aria-label="Direct link to LAMP" title="Direct link to LAMP">​</a></h3>
<p>这种动态网页的编写方法流行了很多年，形成了一个叫做"LAMP"的套路：Linux+Apache+MySQL+PHP;就是将电脑装上Linux系统，运行Apache这个HTTP服务端，使用PHP作为动态脚本语言,使用MySQL来存储和访问业务数据。</p>
<p>需要注意的是，这四个都是开源免费的软件，LAMP的兴起，是开源软件运动的标志之一。开源软件使得部署网站的成本极大地降低，推动了互联网的繁荣。如果你想建站，那时候互联网上到处都是"LAMP一键安装脚本"之类的东西，现在也能搜到不少。一个下午就能上线一个完备的网站。这些技术的出现，使得开网站不再局限于大企业才能办得到的事情，一时间互联网上到处都是个人或者小单位的网站，甚至后来出现了诸如Wordpress之类的方案，不会写代码也能开网站。繁荣的生态，网页上丰富的动态内容，形成了被我们称为“Web 2.0”的时代。</p>
<p>LAMP的一个典型反面是微软全家桶：Windows Server+IIS+SQL Server+ASP，这套技术方案需要给微软缴纳高额的授权费用，在当时基本上只限于追求稳定和售后服务的企业使用。我们的文章也没有怎么介绍这些技术。不过IIS对于个人用自己的电脑建站还是非常方便的。(当然国内没有公网IP那是另一回事了╮(￣▽￣)╭)</p>
<h2 class="anchor anchorWithStickyNavbar_LWe7" id="mvc架构">MVC架构<a href="https://developer.zsxyww.com/blog/Web%E7%9A%84%E5%8E%86%E5%8F%B22%EF%B8%8F%E2%83%A3-%E5%8A%A8%E6%80%81%E7%BD%91%E9%A1%B5#mvc%E6%9E%B6%E6%9E%84" class="hash-link" aria-label="Direct link to MVC架构" title="Direct link to MVC架构">​</a></h2>
<p>随着网页的不断发展，出现了复杂的业务逻辑，并且页面也越来越复杂；这时候，把页面和程序逻辑混在一起的嵌入式脚本在庞大的复杂代码情况下变得难以维护。</p>
<p>而且它们都有一个特点：依赖于具体的某个HTTP服务程序，PHP依赖于Apache的<code>mod_php</code>或Nginx的FastCGI支持，JSP依赖于Servlet容器例如Tomcat,这增加了开发与部署的耦合度，更使得项目难以管理。嵌入式脚本难以复用已有的代码，这些代码的测试也需要模拟HTTP环境，难以测试。</p>
<p>此时兴起了一种新的Web后端编程思想，它就是MVC(Model-View-Controller)</p>
<p>简单来说，根据大量的开发经验累积，人们发现一个动态网页的后端通常需要做到这3件事情：</p>
<ul>
<li>Model:使用面向对象的方法为业务建模，把数据对应到编程语言中的对象，把对数据的操作对应到对象的方法。负责对业务数据进行实际的操作。</li>
<li>View：输入数据，负责把数据变成用户可以直观看懂的HTML。</li>
<li>Controller：负责协调，调用上面两个部分。</li>
</ul>
<p><img decoding="async" loading="lazy" alt="MVC" src="https://developer.zsxyww.com/assets/images/model-view-controller-light-blue-b2e1bea6c4754589fec1ebf6f0e7d0d9.png" width="2000" height="1500" class="img_ev3q"></p>
<p>例如，当我们在报修系统中想要查询一个片区的全部报修时，首先我们访问<code>http://wwbx.zsxyww.com/QueryTickets.php?zone=朝晖&amp;status=pending</code></p>
<p>然后服务器根目录下的<code>QueryTickets.php</code>程序就会接受到我们的请求(在MVC时期的PHP程序已经不像嵌入式脚本那时混写HTML和PHP,整个文件就是以<code>&lt;?php</code>开头的一整个脚本，没有HTML)</p>
<p><code>QueryTickets.php</code>脚本就是MVC中的Controller,脚本解析到我们想寻找朝晖片区所有待解决的报修，于是它调用一个函数<code>Ticket.Query()</code>，但是Controller知道朝晖片区在数据库对应的编号是10,待解决状态的编号是0，于是他把URI参数中的<code>朝晖</code>和<code>pending</code>改成<code>10</code>和<code>0</code>传递给函数；</p>
<p>这个函数会去数据库（比如前面提到的MySQL）里查询数据，最终执行类似于<code>SELECT * FROM tickets WHERE zone=10 AND status=0;</code>这样的SQL语句，然后把查询的每一行都对应一个Ticket对象，返回一个Ticket的数组。这个函数，以及Ticket类的定义就是Model负责的部分。</p>
<div class="theme-admonition theme-admonition-info admonition_xJq3 alert alert--info"><div class="admonitionHeading_Gvgb"><span class="admonitionIcon_Rf37"><svg viewBox="0 0 14 16"><path fill-rule="evenodd" d="M7 2.3c3.14 0 5.7 2.56 5.7 5.7s-2.56 5.7-5.7 5.7A5.71 5.71 0 0 1 1.3 8c0-3.14 2.56-5.7 5.7-5.7zM7 1C3.14 1 0 4.14 0 8s3.14 7 7 7 7-3.14 7-7-3.14-7-7-7zm1 3H6v5h2V4zm0 6H6v2h2v-2z"></path></svg></span>info</div><div class="admonitionContent_BuS1"><p>SQL(Structured Query Language)是进行数据库操作的标准途径，你可以简单地把数据库理解成有更多功能和性能更高的Excel表格，即使这个表格有上亿行，数据库也能在不到几秒内精准执行复杂的数据读取或写入。</p><p>刚才的那个SQL语句，就是让数据库找到所有在10号片区(朝晖)未解决的工单，给出这些工单的所有信息。是不是非常直观方便？</p><p>数据库往往是后端的核心。许多后端系统，可以说就是SQL数据库的套壳，它们的业务逻辑不会超过"CRUD"，这也是为什么例如Supabase之类的产品能够如此的流行。</p></div></div>
<p>Model是程序的核心。它不关心页面长什么样，只负责处理和业务相关的数据。在我们报修系统的例子里，它定义了一张报修单应该包含哪些信息（如ID、地点、状态），并提供了操作这些数据的方法（如从数据库查询报修单、更新报修单状态等）。这是网站业务逻辑的体现。</p>
<p>当Controller获得Model返回的数据时，它就把这些数据移交View函数渲染，调用View函数。View首先把Ticket对象里面的<code>10</code>和<code>0</code>改成<code>朝晖</code>和<code>待解决</code>，然后检查客户端的UA,如果是电脑的话就在一行显示更多数据，如果是手机的话就返回紧凑的界面。根据不同的访问设备，预先在系统中存放了一些模板HTML文件，view读取这些文件，然后将数据放到里面，返回给用户；</p>
<p>这样用户访问<code>QueryTickets.php</code>时，就会看到一个根据后台数据实时更新的一个页面。这就是一个简单的MVC架构页面的例子。</p>
<div class="theme-admonition theme-admonition-tip admonition_xJq3 alert alert--success"><div class="admonitionHeading_Gvgb"><span class="admonitionIcon_Rf37"><svg viewBox="0 0 12 16"><path fill-rule="evenodd" d="M6.5 0C3.48 0 1 2.19 1 5c0 .92.55 2.25 1 3 1.34 2.25 1.78 2.78 2 4v1h5v-1c.22-1.22.66-1.75 2-4 .45-.75 1-2.08 1-3 0-2.81-2.48-5-5.5-5zm3.64 7.48c-.25.44-.47.8-.67 1.11-.86 1.41-1.25 2.06-1.45 3.23-.02.05-.02.11-.02.17H5c0-.06 0-.13-.02-.17-.2-1.17-.59-1.83-1.45-3.23-.2-.31-.42-.67-.67-1.11C2.44 6.78 2 5.65 2 5c0-2.2 2.02-4 4.5-4 1.22 0 2.36.42 3.22 1.19C10.55 2.94 11 3.94 11 5c0 .66-.44 1.78-.86 2.48zM4 14h5c-.23 1.14-1.3 2-2.5 2s-2.27-.86-2.5-2z"></path></svg></span>提示</div><div class="admonitionContent_BuS1"><p>哈哈，这个例子其实是骗你的，我们的报修系统既不是用的PHP,也不是用的MVC架构，甚至路由都是虚拟的。这个例子只是让你比较好懂～</p></div></div>
<h3 class="anchor anchorWithStickyNavbar_LWe7" id="虚拟路由">虚拟路由<a href="https://developer.zsxyww.com/blog/Web%E7%9A%84%E5%8E%86%E5%8F%B22%EF%B8%8F%E2%83%A3-%E5%8A%A8%E6%80%81%E7%BD%91%E9%A1%B5#%E8%99%9A%E6%8B%9F%E8%B7%AF%E7%94%B1" class="hash-link" aria-label="Direct link to 虚拟路由" title="Direct link to 虚拟路由">​</a></h3>
<p>实际上，程序员们认为基于传统服务器文件的路由架构严重阻碍了后端系统的灵活设计。也就是说，用户输入的URI,必须对应根目录里面一个实际存在的文件，比如上面的<code>QueryTickets.php</code>，在后端就是一个实际存在的脚本。由HTTP程序负责调用这个脚本，并且把脚本的输出发送过去。</p>
<p>MVC架构，包括更新的设计，都采用虚拟路由。也就是说，URI不再匹配根目录里的一个文件，什么URI匹配什么现在完全取决于程序员希望它匹配什么，比如匹配程序里的某个函数（不再一定是脚本语言，可以编译语言例如C语言的函数），把函数的输出传给用户。</p>
<p>通常的MVC设计下，在MVC之前程序还有一个路由层，客户端的HTTP请求首先到达这里，经过这里解析后，转交给不同的地方</p>
<p>举例来说明，当用户访问<code>http://wwbx.zsxyww.com/Tickets/朝晖/pending</code>的时候，程序员可以在路由层定义：所有以<code>/Tickets</code>开头的URI,全部转交<code>Query()</code>函数处理，<code>Query()</code>看到转交过来的请求头URI在<code>/Tickets</code>后面是<code>/朝晖/pending</code>，就去数据库查询朝晖的待解决工单，然后调用渲染函数返回HTML。在服务器根目录下面是没有<code>/Tickets/朝晖/pending</code>这个文件的。嗯...其实连根目录都不需要了，</p>
<p>发展到后来，连HTTP服务器也没有了：因为程序员们觉得每次都要配置一个独立的HTTP服务器（比如Apache）再来运行自己的程序有点麻烦。于是，很多现代的Web框架干脆自己内置了一个迷你的HTTP服务器功能。启动程序时，这个内置的服务器也一起启动了，让开发和部署变得更简单。</p>
<p>当然，这种模式下，URI也可以传统地绑定到某个文件上。例如，我们的官网<code>www.zsxyww.com</code>在接受到任何无效的URI时，都会将请求路由到文件<code>404.html</code>上，表示没有找到你请求的东西，比如，<code>www.zsxyww.com/hahaha</code>,和<code>www.zsxyww.com/aaa/bbb</code>都没有在程序路由中规定，一切超出规定的URI全部都路由到<code>404.html</code>文件上，返回一个静态的文件。</p>
<p><img decoding="async" loading="lazy" alt="现代Web后端" src="https://developer.zsxyww.com/assets/images/web_application_with_html_and_steps-9fdd7ab763104f2162880839d3666966.png" width="1173" height="501" class="img_ev3q"></p>
<h3 class="anchor anchorWithStickyNavbar_LWe7" id="mvc框架">MVC框架<a href="https://developer.zsxyww.com/blog/Web%E7%9A%84%E5%8E%86%E5%8F%B22%EF%B8%8F%E2%83%A3-%E5%8A%A8%E6%80%81%E7%BD%91%E9%A1%B5#mvc%E6%A1%86%E6%9E%B6" class="hash-link" aria-label="Direct link to MVC框架" title="Direct link to MVC框架">​</a></h3>
<p>MVC作为一种编程思想可以被程序员灵活地使用，不过也有一些在编程语言基础上编写的MVC框架，来约束程序员使用MVC的思想开发后端，也简化了开发；这种框架有很多，而且不少编程语言都有，我们介绍几个有代表性的：</p>
<ul>
<li>Ruby on Rails 约定大于配置</li>
<li>Django</li>
<li>Spring Boot</li>
</ul>
<div class="theme-admonition theme-admonition-info admonition_xJq3 alert alert--info"><div class="admonitionHeading_Gvgb"><span class="admonitionIcon_Rf37"><svg viewBox="0 0 14 16"><path fill-rule="evenodd" d="M7 2.3c3.14 0 5.7 2.56 5.7 5.7s-2.56 5.7-5.7 5.7A5.71 5.71 0 0 1 1.3 8c0-3.14 2.56-5.7 5.7-5.7zM7 1C3.14 1 0 4.14 0 8s3.14 7 7 7 7-3.14 7-7-3.14-7-7-7zm1 3H6v5h2V4zm0 6H6v2h2v-2z"></path></svg></span>info</div><div class="admonitionContent_BuS1"><p>这是三篇系列文章中的第<strong>2</strong>篇</p><p>点击以跳转：</p><p><a href="https://developer.zsxyww.com/blog/Web%E7%9A%84%E5%8E%86%E5%8F%B21%EF%B8%8F%E2%83%A3-HTTP">HTTP</a></p><p><strong>动态网页</strong>(你在看的文章)</p><p><a href="https://developer.zsxyww.com/blog/Web%E7%9A%84%E5%8E%86%E5%8F%B23%EF%B8%8F%E2%83%A3-Web%E5%BA%94%E7%94%A8">Web应用</a></p></div></div>]]></content:encoded>
</item>
<item>
<title><![CDATA[Web的历史3️⃣-Web应用]]></title>
<link>https://developer.zsxyww.com/blog/Web的历史3️⃣-Web应用</link>
<guid>https://developer.zsxyww.com/blog/Web的历史3️⃣-Web应用</guid>
<pubDate>Sun, 13 Jul 2025 03:23:58 GMT</pubDate>
<description><![CDATA[随着技术的不断发展，尤其是移动设备的普及和移动互联网的发展，使得动态网页对于日益复杂的需求力不从心。]]></description>
<content:encoded><![CDATA[<p>随着技术的不断发展，尤其是移动设备的普及和移动互联网的发展，使得动态网页对于日益复杂的需求力不从心。</p>
<p>具体地来说，业界开始需求Web的“应用化”，也就是要把网页变成一个应用程序：在以前，我们介绍的动态网页技术可以很好地支持博客，论坛，新闻网站，企业官网等；而现在，我们需要在浏览器上写文件(腾讯文档)，聊天(Discord),直播，点外卖,玩游戏(实际上，很多手机APP都是浏览器套壳，本质上就是向你展示一个网页；包括微信小程序，也是一个只可以使用微信内置浏览器打开的网站)</p>
<p>那些开发APP的程序员也很乐意把自己的项目搬到浏览器里，因为用HTML+CSS写GUI非常方便，而且Web😇具有跨平台的特性：你需要付出很多努力才能确保一个传统APP能在手机，电脑，MacOS,Windows,Linux上运行，但是你写网页只需要很轻松地写，不用考虑兼容，浏览器会确保你的网页在这些平台上都能运行。</p>
<p>包括我们的报修系统，也算是一个Web应用。Web应用相比传统的高级动态网页有如下特征：</p>
<ul>
<li>页面少：动态网页可能要有成千上百个页面，所以必须使用模板动态生成。而应用程序可能只有几个或者几十个界面。</li>
<li>高交互：动态网页的主要目的是供人观看，用户的交互（例如点击链接，按钮等）比较少且简单。而Web应用中，用户的交互非常频繁且复杂。前后端通信更加频繁。</li>
<li>部分更新：动态网页在不同页面之间也有不变的内容，比如页头页脚之类的，但是这些内容只占网页的少部分；在应用程序中，页面的绝大部分元素都没有怎么变化，只有少部分数据会发生变化，这时候，每更新一次数据就请求一次新页面就十分浪费了。</li>
</ul>
<p>Web应用程序的这些需求都是我们之前介绍的动态网页技术所不好满足的，于是Web开发进入了一个新时期：</p>
<h2 class="anchor anchorWithStickyNavbar_LWe7" id="ajax与前后端分离">AJAX与前后端分离<a href="https://developer.zsxyww.com/blog/Web%E7%9A%84%E5%8E%86%E5%8F%B23%EF%B8%8F%E2%83%A3-Web%E5%BA%94%E7%94%A8#ajax%E4%B8%8E%E5%89%8D%E5%90%8E%E7%AB%AF%E5%88%86%E7%A6%BB" class="hash-link" aria-label="Direct link to AJAX与前后端分离" title="Direct link to AJAX与前后端分离">​</a></h2>
<h3 class="anchor anchorWithStickyNavbar_LWe7" id="javascript">JavaScript<a href="https://developer.zsxyww.com/blog/Web%E7%9A%84%E5%8E%86%E5%8F%B23%EF%B8%8F%E2%83%A3-Web%E5%BA%94%E7%94%A8#javascript" class="hash-link" aria-label="Direct link to JavaScript" title="Direct link to JavaScript">​</a></h3>
<p>之前我们一直在介绍服务器的技术，而一直忽略了浏览器的发展。实际上，浏览器也慢慢变得复杂，也在慢慢进行技术演进。</p>
<p>在1995年，也就是差不多后端处于SSI和CGI的时代，网景公司的员工发明了一种编程语言，叫做"JavaScript",这是对当时新兴的Java Applet的回应。Java Applet可以让你在浏览器运行Java代码，和它同一生态位的一个技术大家应该很熟悉<!-- -->:Flash<!-- -->，不过它们后来都被淘汰了。</p>
<p>JavaScript作为Java Applet的竞争者，是专门设计出来在浏览器内运行的脚本语言。连名字都是在蹭Java的热度:)网景浏览器(也就是火狐浏览器的前身)为JavaScript提供了一个强大的能力：动态地改变当前页面HTML和CSS的内容。</p>
<p>另外，浏览器还为JavaScript提供了发起HTTP请求的接口，不只是GET请求。这本是非常强大的功能，不过，由于JavaScript早期语法混乱，再加上当时人们对于前端能力需求并不是太大，所以直到2010年左右，前端和JavaScript才被重视起来。也就是我们接下来的内容：</p>
<h3 class="anchor anchorWithStickyNavbar_LWe7" id="ajax">AJAX<a href="https://developer.zsxyww.com/blog/Web%E7%9A%84%E5%8E%86%E5%8F%B23%EF%B8%8F%E2%83%A3-Web%E5%BA%94%E7%94%A8#ajax" class="hash-link" aria-label="Direct link to AJAX" title="Direct link to AJAX">​</a></h3>
<p>传统的动态网页有一个不灵活的特性：每次只能返回一个完整的页面。也就是说，要么不更新网页，要么就全部更新，没办法更新现有网页的一部分。</p>
<p>比如我们有一个在文章下面评论的功能：用户需要在文本框里输入评论，然后点击"发布评论"的按钮。如果创建成功，那么我们应该让用户看到"评论成功"的提示并且在评论区显示用户最新评论的内容；如果失败也要提示有关的信息。</p>
<p>传统的动态网页只能这么做：返回一个完整的网页，这个网页和用户之前的网页的大部分内容没有区别，只是多了提示的信息和新的评论。但实际上，页面的有效信息只有那一部分。这极大地浪费了网络带宽和服务器性能(因为要重新渲染)。</p>
<p>AJAX(Asynchronous JavaScript and XML)就是解决这一痛点的技术，既然JavaScript可以动态地修改页面内容，发送HTTP请求，那么就直接让JavaScript程序发送带有评论内容的POST请求到服务器，然后服务器返回纯数据(通常使用JSON或XML的格式，把数据用格式包装起来有一个术语，叫做"序列化")而不是HTML，送给JavaScript程序而不是浏览器，JavaScript根据返回的操作HTML或CSS，实现网页部分更新的效果。</p>
<p>AJAX的核心在于"异步"，浏览器发送请求后，不会等待后端返回数据，而是允许用户继续浏览。即是指在发评论时，页面不会整个刷新一下的特性。</p>
<h3 class="anchor anchorWithStickyNavbar_LWe7" id="一个ajax报名系统的例子">一个AJAX报名系统的例子<a href="https://developer.zsxyww.com/blog/Web%E7%9A%84%E5%8E%86%E5%8F%B23%EF%B8%8F%E2%83%A3-Web%E5%BA%94%E7%94%A8#%E4%B8%80%E4%B8%AAajax%E6%8A%A5%E5%90%8D%E7%B3%BB%E7%BB%9F%E7%9A%84%E4%BE%8B%E5%AD%90" class="hash-link" aria-label="Direct link to 一个AJAX报名系统的例子" title="Direct link to 一个AJAX报名系统的例子">​</a></h3>
<p>下面举一个例子，来详细说明AJAX的工作原理：用户需要通过一个网页进行某项活动的报名，填写个人信息，然后点击网页上的提交按钮，服务端会返回报名的结果，成功还是失败，与传统的方法不同，服务器返回信息时不是重新返回一个HTML,而是让浏览器直接在原有的界面上（比如提交按钮的下面）显示报名的状态。</p>
<p>用户通过浏览器输入地址，使用<code>GET</code>方法发起对<code>http://example.org/submit</code>的请求，服务器程序获得请求后，在路由表中查得<code>/submit</code>这个路径匹配静态文件<code>/static/submit.html</code>，于是将文件发送给浏览器；</p>
<p>浏览器得到文件后开始解析渲染这个文件，发现这个html在头部又要求浏览器向服务器获取<code>submit.js</code>文件和<code>submit.css</code>文件，于是浏览器不需要用户处理自己又发送了两条<code>GET</code>的HTTP Request,在文件返回后，浏览器自动执行返回的脚本并应用CSS样式。脚本的内容是监听html文件中提交按钮的“点击”事件，当按钮被点击时，执行提交报名表函数。</p>
<p>返回的html文件包括了提示框，要求用户输入姓名，手机，空闲时间等信息，在这些输入栏的最下面有一个提交按钮，当点击这个按钮时，脚本中的指定函数就会被激活，这个函数将读取用户从上面输入进来的内容，做一些简单的认证（比如说手机号的格式等），如果检验失败则让用户重新填写信息。</p>
<p>如果检验成功，则将这些信息组织成一个JSON文件（虽然AJAX中的X就是XML，但是现在其实最常用JSON），向服务器发送一个<code>POST</code>请求，地址是<code>http://example.org/api/submit</code>,在请求体中包含刚才的JSON文件。</p>
<p>服务器在接收这个请求后，在路由模块中查得这个URL匹配<code>HandleTicket()</code>函数，于是这个请求的上下文全部转交给<code>HandleTicket()</code>这个函数，函数会创建一个<code>Ticket</code>类的实例，将数据做后端检验后赋给实例的成员，如果检验成功则调用方法<code>Ticket.Create()</code>录入数据库，并向客户端(在这里指JavaScript脚本，而不是用户)发送回应成功的状态码(200)；</p>
<p>检验的内容除了冗余检查格式是否合法之外，还要执行业务逻辑方面的检查：</p>
<ul>
<li>一个人只准报名一次，所以如果数据库中存在“姓名”字段相同的记录的话，检验则不通过(这个只是个例子，所以不考虑重名的情况)</li>
<li>如果我们活动的时间的范围没有包含在空闲时间的范围内，检验则不通过，因为用户的时间和我们活动的时间冲突</li>
<li>如果数据库中的记录(表示报名成功的用户)大于或等于我们设定的数字的话，检验则不通过，因为人够了</li>
</ul>
<p>如果检验没有成功，则回应失败的消息，除了依据失败的类型设置对应的错误码外，还要返回一个JSON文件来简述错误信息。</p>
<p>报名成功的消息的示例：</p>
<div class="language-JSON language-json codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockTitle_Ktv7">StatusCode:201 Created</div><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-json codeBlock_bY9V thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token property" style="color:#36acaa">"status"</span><span class="token operator" style="color:#393A34">:</span><span class="token string" style="color:#e3116c">"success"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token property" style="color:#36acaa">"submit"</span><span class="token operator" style="color:#393A34">:</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token property" style="color:#36acaa">"name"</span><span class="token operator" style="color:#393A34">:</span><span class="token string" style="color:#e3116c">"小明"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token property" style="color:#36acaa">"freeAt"</span><span class="token operator" style="color:#393A34">:</span><span class="token string" style="color:#e3116c">"2023-11-25_15:00~19:00"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token property" style="color:#36acaa">"phone"</span><span class="token operator" style="color:#393A34">:</span><span class="token number" style="color:#36acaa">12345678900</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token property" style="color:#36acaa">"createdAt"</span><span class="token operator" style="color:#393A34">:</span><span class="token string" style="color:#e3116c">"2023-11-23_9:23:22"</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token property" style="color:#36acaa">"message"</span><span class="token operator" style="color:#393A34">:</span><span class="token string" style="color:#e3116c">"恭喜！你已成功报名我们的活动"</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span></code></pre><div class="buttonGroup__atx"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_eSgA" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<p>报名失败的消息的示例：</p>
<div class="language-JSON language-json codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockTitle_Ktv7">StatusCode:400 Bad Request</div><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-json codeBlock_bY9V thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token property" style="color:#36acaa">"status"</span><span class="token operator" style="color:#393A34">:</span><span class="token string" style="color:#e3116c">"fail"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token property" style="color:#36acaa">"submit"</span><span class="token operator" style="color:#393A34">:</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token property" style="color:#36acaa">"name"</span><span class="token operator" style="color:#393A34">:</span><span class="token string" style="color:#e3116c">"小明"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token property" style="color:#36acaa">"freeAt"</span><span class="token operator" style="color:#393A34">:</span><span class="token string" style="color:#e3116c">"2023-11-25_9:00~15:00"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token property" style="color:#36acaa">"phone"</span><span class="token operator" style="color:#393A34">:</span><span class="token number" style="color:#36acaa">12345678900</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token property" style="color:#36acaa">"createdAt"</span><span class="token operator" style="color:#393A34">:</span><span class="token string" style="color:#e3116c">"2023-11-23_9:23:22"</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token property" style="color:#36acaa">"message"</span><span class="token operator" style="color:#393A34">:</span><span class="token string" style="color:#e3116c">"抱歉，你的空闲时间与我们的活动时间有冲突"</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span></code></pre><div class="buttonGroup__atx"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_eSgA" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<p>在JavaScript脚本接收到回应后，根据返回的内容，操作html文件的内容，在提交按钮的下面一行插入一个文本块：</p>
<p>报名成功时：</p>
<div class="language-HTML language-html codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-html codeBlock_bY9V thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token tag punctuation" style="color:#393A34">&lt;</span><span class="token tag" style="color:#00009f">div</span><span class="token tag" style="color:#00009f"> </span><span class="token tag attr-name" style="color:#00a4db">class</span><span class="token tag attr-value punctuation attr-equals" style="color:#393A34">=</span><span class="token tag attr-value punctuation" style="color:#393A34">"</span><span class="token tag attr-value" style="color:#e3116c">json_responses</span><span class="token tag attr-value punctuation" style="color:#393A34">"</span><span class="token tag punctuation" style="color:#393A34">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token tag punctuation" style="color:#393A34">&lt;</span><span class="token tag" style="color:#00009f">p</span><span class="token tag" style="color:#00009f"> </span><span class="token tag attr-name" style="color:#00a4db">class</span><span class="token tag attr-value punctuation attr-equals" style="color:#393A34">=</span><span class="token tag attr-value punctuation" style="color:#393A34">"</span><span class="token tag attr-value" style="color:#e3116c">json:message</span><span class="token tag attr-value punctuation" style="color:#393A34">"</span><span class="token tag punctuation" style="color:#393A34">&gt;</span><span class="token plain">恭喜！你已成功报名我们的活动</span><span class="token tag punctuation" style="color:#393A34">&lt;/</span><span class="token tag" style="color:#00009f">p</span><span class="token tag punctuation" style="color:#393A34">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token tag punctuation" style="color:#393A34">&lt;</span><span class="token tag" style="color:#00009f">p</span><span class="token tag punctuation" style="color:#393A34">&gt;</span><span class="token plain">请检查你的信息：</span><span class="token tag punctuation" style="color:#393A34">&lt;/</span><span class="token tag" style="color:#00009f">p</span><span class="token tag punctuation" style="color:#393A34">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token tag punctuation" style="color:#393A34">&lt;</span><span class="token tag" style="color:#00009f">p</span><span class="token tag" style="color:#00009f"> </span><span class="token tag attr-name" style="color:#00a4db">class</span><span class="token tag attr-value punctuation attr-equals" style="color:#393A34">=</span><span class="token tag attr-value punctuation" style="color:#393A34">"</span><span class="token tag attr-value" style="color:#e3116c">json:submit.name</span><span class="token tag attr-value punctuation" style="color:#393A34">"</span><span class="token tag punctuation" style="color:#393A34">&gt;</span><span class="token plain">姓名：小明</span><span class="token tag punctuation" style="color:#393A34">&lt;/</span><span class="token tag" style="color:#00009f">p</span><span class="token tag punctuation" style="color:#393A34">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token tag punctuation" style="color:#393A34">&lt;</span><span class="token tag" style="color:#00009f">p</span><span class="token tag" style="color:#00009f"> </span><span class="token tag attr-name" style="color:#00a4db">class</span><span class="token tag attr-value punctuation attr-equals" style="color:#393A34">=</span><span class="token tag attr-value punctuation" style="color:#393A34">"</span><span class="token tag attr-value" style="color:#e3116c">json:submit.freeAt</span><span class="token tag attr-value punctuation" style="color:#393A34">"</span><span class="token tag punctuation" style="color:#393A34">&gt;</span><span class="token plain">空闲时间：2023-11-25 15:00至19:00</span><span class="token tag punctuation" style="color:#393A34">&lt;/</span><span class="token tag" style="color:#00009f">p</span><span class="token tag punctuation" style="color:#393A34">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token tag punctuation" style="color:#393A34">&lt;</span><span class="token tag" style="color:#00009f">p</span><span class="token tag" style="color:#00009f"> </span><span class="token tag attr-name" style="color:#00a4db">class</span><span class="token tag attr-value punctuation attr-equals" style="color:#393A34">=</span><span class="token tag attr-value punctuation" style="color:#393A34">"</span><span class="token tag attr-value" style="color:#e3116c">json:submit.phone</span><span class="token tag attr-value punctuation" style="color:#393A34">"</span><span class="token tag punctuation" style="color:#393A34">&gt;</span><span class="token plain">手机号：12345678900</span><span class="token tag punctuation" style="color:#393A34">&lt;/</span><span class="token tag" style="color:#00009f">p</span><span class="token tag punctuation" style="color:#393A34">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token tag punctuation" style="color:#393A34">&lt;</span><span class="token tag" style="color:#00009f">p</span><span class="token tag" style="color:#00009f"> </span><span class="token tag attr-name" style="color:#00a4db">class</span><span class="token tag attr-value punctuation attr-equals" style="color:#393A34">=</span><span class="token tag attr-value punctuation" style="color:#393A34">"</span><span class="token tag attr-value" style="color:#e3116c">json:createdAt</span><span class="token tag attr-value punctuation" style="color:#393A34">"</span><span class="token tag punctuation" style="color:#393A34">&gt;</span><span class="token plain">服务端提交创建时间：2023-11-23 9:23:22</span><span class="token tag punctuation" style="color:#393A34">&lt;/</span><span class="token tag" style="color:#00009f">p</span><span class="token tag punctuation" style="color:#393A34">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token tag punctuation" style="color:#393A34">&lt;/</span><span class="token tag" style="color:#00009f">div</span><span class="token tag punctuation" style="color:#393A34">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span></code></pre><div class="buttonGroup__atx"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_eSgA" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<p>报名失败时：</p>
<div class="language-HTML language-html codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-html codeBlock_bY9V thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token tag punctuation" style="color:#393A34">&lt;</span><span class="token tag" style="color:#00009f">div</span><span class="token tag" style="color:#00009f"> </span><span class="token tag attr-name" style="color:#00a4db">class</span><span class="token tag attr-value punctuation attr-equals" style="color:#393A34">=</span><span class="token tag attr-value punctuation" style="color:#393A34">"</span><span class="token tag attr-value" style="color:#e3116c">json_responses</span><span class="token tag attr-value punctuation" style="color:#393A34">"</span><span class="token tag punctuation" style="color:#393A34">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token tag punctuation" style="color:#393A34">&lt;</span><span class="token tag" style="color:#00009f">p</span><span class="token tag" style="color:#00009f"> </span><span class="token tag attr-name" style="color:#00a4db">class</span><span class="token tag attr-value punctuation attr-equals" style="color:#393A34">=</span><span class="token tag attr-value punctuation" style="color:#393A34">"</span><span class="token tag attr-value" style="color:#e3116c">json:message</span><span class="token tag attr-value punctuation" style="color:#393A34">"</span><span class="token tag punctuation" style="color:#393A34">&gt;</span><span class="token plain">报名失败！抱歉，你的空闲时间与我们的活动时间有冲突</span><span class="token tag punctuation" style="color:#393A34">&lt;/</span><span class="token tag" style="color:#00009f">p</span><span class="token tag punctuation" style="color:#393A34">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token tag punctuation" style="color:#393A34">&lt;</span><span class="token tag" style="color:#00009f">p</span><span class="token tag punctuation" style="color:#393A34">&gt;</span><span class="token plain">请检查你的信息：</span><span class="token tag punctuation" style="color:#393A34">&lt;/</span><span class="token tag" style="color:#00009f">p</span><span class="token tag punctuation" style="color:#393A34">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token tag punctuation" style="color:#393A34">&lt;</span><span class="token tag" style="color:#00009f">p</span><span class="token tag" style="color:#00009f"> </span><span class="token tag attr-name" style="color:#00a4db">class</span><span class="token tag attr-value punctuation attr-equals" style="color:#393A34">=</span><span class="token tag attr-value punctuation" style="color:#393A34">"</span><span class="token tag attr-value" style="color:#e3116c">json:submit.name</span><span class="token tag attr-value punctuation" style="color:#393A34">"</span><span class="token tag punctuation" style="color:#393A34">&gt;</span><span class="token plain">姓名：小明</span><span class="token tag punctuation" style="color:#393A34">&lt;/</span><span class="token tag" style="color:#00009f">p</span><span class="token tag punctuation" style="color:#393A34">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token tag punctuation" style="color:#393A34">&lt;</span><span class="token tag" style="color:#00009f">p</span><span class="token tag" style="color:#00009f"> </span><span class="token tag attr-name" style="color:#00a4db">class</span><span class="token tag attr-value punctuation attr-equals" style="color:#393A34">=</span><span class="token tag attr-value punctuation" style="color:#393A34">"</span><span class="token tag attr-value" style="color:#e3116c">json:submit.freeAt</span><span class="token tag attr-value punctuation" style="color:#393A34">"</span><span class="token tag punctuation" style="color:#393A34">&gt;</span><span class="token plain">空闲时间：2023-11-25 9:00至15:00</span><span class="token tag punctuation" style="color:#393A34">&lt;/</span><span class="token tag" style="color:#00009f">p</span><span class="token tag punctuation" style="color:#393A34">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token tag punctuation" style="color:#393A34">&lt;</span><span class="token tag" style="color:#00009f">p</span><span class="token tag" style="color:#00009f"> </span><span class="token tag attr-name" style="color:#00a4db">class</span><span class="token tag attr-value punctuation attr-equals" style="color:#393A34">=</span><span class="token tag attr-value punctuation" style="color:#393A34">"</span><span class="token tag attr-value" style="color:#e3116c">json:submit.phone</span><span class="token tag attr-value punctuation" style="color:#393A34">"</span><span class="token tag punctuation" style="color:#393A34">&gt;</span><span class="token plain">手机号：12345678900</span><span class="token tag punctuation" style="color:#393A34">&lt;/</span><span class="token tag" style="color:#00009f">p</span><span class="token tag punctuation" style="color:#393A34">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token tag punctuation" style="color:#393A34">&lt;</span><span class="token tag" style="color:#00009f">p</span><span class="token tag" style="color:#00009f"> </span><span class="token tag attr-name" style="color:#00a4db">class</span><span class="token tag attr-value punctuation attr-equals" style="color:#393A34">=</span><span class="token tag attr-value punctuation" style="color:#393A34">"</span><span class="token tag attr-value" style="color:#e3116c">json:createdAt</span><span class="token tag attr-value punctuation" style="color:#393A34">"</span><span class="token tag punctuation" style="color:#393A34">&gt;</span><span class="token plain">服务端提交创建时间：2023-11-23 9:23:22</span><span class="token tag punctuation" style="color:#393A34">&lt;/</span><span class="token tag" style="color:#00009f">p</span><span class="token tag punctuation" style="color:#393A34">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token tag punctuation" style="color:#393A34">&lt;/</span><span class="token tag" style="color:#00009f">div</span><span class="token tag punctuation" style="color:#393A34">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span></code></pre><div class="buttonGroup__atx"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_eSgA" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<p>使用AJAX技术，用户会发现，在写完信息点击提交按钮后，页面没有变化，过了1秒，按钮下面出现了提示信息。这给用户的体验非常像传统的桌面APP。</p>
<p>如果不使用AJAX技术，那么用户会发现在按下按钮后，网页会白屏刷新一段时间，过了几秒，返回了一个新页面，提示了报名状态信息。这样的应用虽然不是不能用，但是用户体验总是不如AJAX来的无缝，自然。性能也不好。</p>
<h3 class="anchor anchorWithStickyNavbar_LWe7" id="api驱动与前后端分离">API驱动与前后端分离<a href="https://developer.zsxyww.com/blog/Web%E7%9A%84%E5%8E%86%E5%8F%B23%EF%B8%8F%E2%83%A3-Web%E5%BA%94%E7%94%A8#api%E9%A9%B1%E5%8A%A8%E4%B8%8E%E5%89%8D%E5%90%8E%E7%AB%AF%E5%88%86%E7%A6%BB" class="hash-link" aria-label="Direct link to API驱动与前后端分离" title="Direct link to API驱动与前后端分离">​</a></h3>
<p>在上面那个例子里，服务器并没有返回HTML，而是返回纯数据，交给前端渲染。既然浏览器自己就能根据数据渲染HTML，那么后端也就没必要返回成品HTML了。</p>
<p>可以发现，这实际上就是把MVC架构中的"Views"部分推给了前端，后端只需要通过HTTP传递数据给前端JavaScript,前端JavaScript再渲染成HTML。后端返回纯数据，由前端渲染的模式称之为<strong>前后端分离</strong>；</p>
<p>而这样返回数据的URL也不能称之为"网页"了，因为它从给人看变成了给JavaScript程序看，这样的URL实际上变成了前端程序和后端程序这两个程序之间交互的接口，所以这种URL我们称之为<strong>HTTP API</strong>，一个主要是API而不是HTML网页的网站，我们称之为"API驱动"的网站。</p>
<h4 class="anchor anchorWithStickyNavbar_LWe7" id="rest-api">REST API<a href="https://developer.zsxyww.com/blog/Web%E7%9A%84%E5%8E%86%E5%8F%B23%EF%B8%8F%E2%83%A3-Web%E5%BA%94%E7%94%A8#rest-api" class="hash-link" aria-label="Direct link to REST API" title="Direct link to REST API">​</a></h4>
<p>不知道你还记得前面说的“虚拟路由”吗？这被广泛地运用在如今的API设计下，比如说我要获取某篇文章下面的全部评论，评论获取API可能是这样的：<code>GET http://example.org/api/getComments?article_id=123123</code>。</p>
<p>这种设计模式把一个URL看作一个业务窗口，窗口的作用是办理一个业务，在这个例子里<code>getComments</code>办理的业务就是“获取评论区”，非常的直观。</p>
<p>这种面向业务的API设计对于小规模项目非常方便，如果你的API接口只有几十个的话那使用这种设计也无妨，不过如果你的业务多起来的的话，这种设计是非常难以管理的。</p>
<p>现代的API设计采用面向资源的设计模式，把一个URL看作一个资源，例如我们重写上面的获取评论API:<code>GET http://example.org/article/123123/comments</code></p>
<p>文章的评论是一项资源，一个URL就是获取这个资源，文章本身也是一项资源，如果我们要查看文章内容的话，我们可以这样写：<code>GET http://example.org/article/123123</code>,如果我们要上传评论的话，可以写<code>POST http://example.org/article/123123/comments</code>，在请求体里面带上评论。获取和上传评论，URL是一样的，只是方法不一样，这就利用了HTTP方法：例如，要删除评论区下的第15条评论的话，可以这样写：<code>DELETE http://example.org/article/123123/comments/15</code></p>
<p>如果我们要获取评论区下某个用户发过的其他评论的话，我们可以这么写:<code>GET http://example.org/user/456456/comments</code>，核心思想是，一个URL是一个资源，方法是对资源的操作。</p>
<p>你看，这有点像传统的文件系统路由，但是这是完全在后端程序里实现的虚拟的“文件资源系统”，在URL后对应的并不是文件，而是和数据库打交道的Model板块函数。这种方式，就是所谓的REST，以这种方式设计的API,就叫REST API。</p>
<p>GitHub的API设计可以说是REST风格的典范，你可以抽空看看。</p>
<h2 class="anchor anchorWithStickyNavbar_LWe7" id="单页应用spa">单页应用(SPA)<a href="https://developer.zsxyww.com/blog/Web%E7%9A%84%E5%8E%86%E5%8F%B23%EF%B8%8F%E2%83%A3-Web%E5%BA%94%E7%94%A8#%E5%8D%95%E9%A1%B5%E5%BA%94%E7%94%A8spa" class="hash-link" aria-label="Direct link to 单页应用(SPA)" title="Direct link to 单页应用(SPA)">​</a></h2>
<p>API驱动架构发展到极致就是所谓的"单页应用"，顾名思义，服务器只会在用户打开网页时加载一段html文件和一些JavaScript脚本(也就是一个页面)，后面的全部内容都是通过JavaScript动态更新的。JavaScript和服务器的后端接口交互主要就是采用AJAX。现代网站，或者说Web应用，通常流行这种单页应用架构。</p>
<p>单页应用的坏处就是打破了为静态网页文件设计的“收藏”功能和前进后退，也不利于SEO和无障碍，因为用户在网站上只打开一个网页，网页的内容根据用户操作由浏览器脚本动态更新，而生成的html也大多没有做语义化优化，难以被理解和解析。当然这些问题有解决方案，下面会讲到。</p>
<p>SPA的例子就是邮箱应用（比如Gmail）,通过浏览器访问你的邮箱，通过邮箱的主页面点某个邮件，你并没有进入一个新的页面，而是在原有的页面上，内容变成了邮件查看的界面，如果在主页面上点击发件的话，同样也没有一个发件页面，而是直接呈现发件的UI。</p>
<h3 class="anchor anchorWithStickyNavbar_LWe7" id="框架">框架<a href="https://developer.zsxyww.com/blog/Web%E7%9A%84%E5%8E%86%E5%8F%B23%EF%B8%8F%E2%83%A3-Web%E5%BA%94%E7%94%A8#%E6%A1%86%E6%9E%B6" class="hash-link" aria-label="Direct link to 框架" title="Direct link to 框架">​</a></h3>
<p>作为"应用"，SPA是很复杂的，我们开发桌面应用也不是从底层一路造轮子，而是用Qt,GTK这种框架，同样Web应用也有框架，其中最主要的两个就是<code>Vue.js</code>和<code>React.js</code>，这些框架提供了Web应用需要的种种功能，我们介绍其中主要的几个方面：</p>
<h3 class="anchor anchorWithStickyNavbar_LWe7" id="ui组件">UI组件<a href="https://developer.zsxyww.com/blog/Web%E7%9A%84%E5%8E%86%E5%8F%B23%EF%B8%8F%E2%83%A3-Web%E5%BA%94%E7%94%A8#ui%E7%BB%84%E4%BB%B6" class="hash-link" aria-label="Direct link to UI组件" title="Direct link to UI组件">​</a></h3>
<p>SPA框架通常把整个页面的UI分成许多的"组件"，当页面变得复杂时，手动管理DOM会变得非常繁琐且容易出错。组件则抽象了复杂的DOM，使其变成有组织，易维护，可复用的一个个单元。</p>
<p>更重要的是，主流框架提供了"声明式UI编程"的方法，这使得你像是在写UI的配置文件，而不是操纵这些UI的程序；你告诉框架"做什么"，而不是"怎么做"，框架会自动解析你的声明，随着数据的变化自动更新UI组件，你要做的就是告诉框架在某种数据状态下哪个组件需要是怎么样的。用行话讲这叫做"数据驱动视图"。</p>
<p>这样，就可以让开发者可以像搭积木一样构建用户界面，并且当数据变化时，框架会自动更新界面，极大地提高了开发效率。</p>
<h3 class="anchor anchorWithStickyNavbar_LWe7" id="虚拟dom">虚拟DOM<a href="https://developer.zsxyww.com/blog/Web%E7%9A%84%E5%8E%86%E5%8F%B23%EF%B8%8F%E2%83%A3-Web%E5%BA%94%E7%94%A8#%E8%99%9A%E6%8B%9Fdom" class="hash-link" aria-label="Direct link to 虚拟DOM" title="Direct link to 虚拟DOM">​</a></h3>
<p>尽管JavaScript可以动态修改DOM，但频繁地直接操作真实DOM是非常耗费性能的。每次DOM操作都需要浏览器重新渲染一遍全部内容。在复杂或数据频繁变化的界面中，这会导致页面卡顿，用户体验下降。</p>
<p>为了解决这个问题，许多SPA框架引入了虚拟DOM的概念。虚拟DOM是一个缓冲区：当数据发生变化时，框架不会直接修改真实DOM，而是先在内存中构建一个新的虚拟DOM树，等到积累到一定的改动，再一次性应用全部的DOM操作。</p>
<p>这种机制的目的是将真实的DOM操作次数降到最低。这显著优化了渲染性能，尤其是在数据频繁变化的复杂界面中，虚拟DOM能够提供更好的性能。另外虚拟DOM也有利于管理状态，增加清晰度：</p>
<h3 class="anchor anchorWithStickyNavbar_LWe7" id="状态管理">状态管理<a href="https://developer.zsxyww.com/blog/Web%E7%9A%84%E5%8E%86%E5%8F%B23%EF%B8%8F%E2%83%A3-Web%E5%BA%94%E7%94%A8#%E7%8A%B6%E6%80%81%E7%AE%A1%E7%90%86" class="hash-link" aria-label="Direct link to 状态管理" title="Direct link to 状态管理">​</a></h3>
<p>基于Web前端技术栈的单页应用和传统桌面应用程序有一个很大的不同：渲染Web应用界面所基于的数据有着异步获取，分散来源的特点。在流行的REST风格的API设计下，服务器不负责记录状态，所以整理数据，维持状态的重任就全部交由前端负责。</p>
<p>偏偏前端技术栈又不是为开发这种复杂应用而诞生的：HTML最初就是一个标记格式的简单机制，JavaScript最初被用来写简单的脚本，为了保持兼容性，现代框架必须在这种基础上开发，而不是重构。</p>
<p>作为前端开发核心的DOM对象，其本身就是一个巨大的全局状态，所以前端开发天生没有选择像传统桌面开发那样把状态放在各个对象中进行操作，而是维护一个全局的状态，任何操作都是对这个全局的对象进行操作。</p>
<p>这种不良的设计风格，加上RESTful API和HTTP协议的无状态特性,导致前端技术栈天生不适合开发复杂的应用程序：当应用逻辑变得复杂时，通过直接操作DOM来更新视图，就极易导致代码混乱，状态难以追踪，很容易把代码写成一坨浆糊。</p>
<p>正如前面提到的，我们又不能重构浏览器的底层技术栈，所以必须在这一屎山上构建我们的项目。由于在SPA下不再刷新页面，前端需要自己维护一个与UI保持同步的数据状态。这就要考虑如何解耦模块和数据一致性的问题了。</p>
<p>这本来可以通过OOP+设计模式解决，不过我们说过，DOM的存在使得程序员要迎合这一模式，将状态以全局的方式保存，由异步数据来异步操作DOM也容易引起数据竞争。这就极大限制了OOP的发挥，那还有什么办法呢？</p>
<p>于是函数式编程(FP)这个学院派的范式就进入了前端程序员的视野。FP对于前端的这一痛点提供了极佳的解决方案。现在我们不修改原状态，而是创建一个新的状态替代原状态(不可变数据)；我们的函数，现在除了输出数据外不进行任何类似于<code>console.log()</code>的其它操作(纯函数)。等等诸如此类的编程思想基本上成为了现代前端开发的基石。使得SPA更容易规范开发和调试。</p>
<p>手写FP框架自然不太好，本着不重复造轮子的精神，前端提供了许多践行着FP范式的状态管理库，帮助前端程序员进行复杂程序的状态管理；Vue和React的状态管理框架分别叫Vuex/Pinia(在Vue3)和Redux。状态管理是现代Web应用前端开发的重要部分。</p>
<div class="theme-admonition theme-admonition-info admonition_xJq3 alert alert--info"><div class="admonitionHeading_Gvgb"><span class="admonitionIcon_Rf37"><svg viewBox="0 0 14 16"><path fill-rule="evenodd" d="M7 2.3c3.14 0 5.7 2.56 5.7 5.7s-2.56 5.7-5.7 5.7A5.71 5.71 0 0 1 1.3 8c0-3.14 2.56-5.7 5.7-5.7zM7 1C3.14 1 0 4.14 0 8s3.14 7 7 7 7-3.14 7-7-3.14-7-7-7zm1 3H6v5h2V4zm0 6H6v2h2v-2z"></path></svg></span>info</div><div class="admonitionContent_BuS1"><p>这个部分的内容可能有点难以理解，不过理解这一部分对于成为一个优秀的前端程序员是非常重要的。你也可以在这之后了解关于FP范式的主要思想，这对开发现代和优秀的程序是很重要的，因为FP是编程界的下一个技术潮流，比如Rust，其设计就大量参考了FP思想，甚至Rust早期就是用OCaml开发的😃</p></div></div>
<h3 class="anchor anchorWithStickyNavbar_LWe7" id="前端路由和首屏优化">前端路由和首屏优化<a href="https://developer.zsxyww.com/blog/Web%E7%9A%84%E5%8E%86%E5%8F%B23%EF%B8%8F%E2%83%A3-Web%E5%BA%94%E7%94%A8#%E5%89%8D%E7%AB%AF%E8%B7%AF%E7%94%B1%E5%92%8C%E9%A6%96%E5%B1%8F%E4%BC%98%E5%8C%96" class="hash-link" aria-label="Direct link to 前端路由和首屏优化" title="Direct link to 前端路由和首屏优化">​</a></h3>
<p>前面提到SPA打破了浏览器UX和搜索引擎对网站的检测，这些框架提供了API来改变地址栏中的内容，对于不同的页面可以设置不同的URL，来使得逻辑更加清晰，收藏栏也可以正常地使用了。</p>
<p>SPA因为需要初始化大量JavaScript程序，对于网络连接或者设备性能不好的用户，他们会看到长时间的白屏，首屏优化就是在一开始的html中加入一些信息，比如给用户看一个<code>加载中...</code>的动画，让用户耐心等待。或者是在<code>head</code>栏里放一些信息，使得网站可以被搜索引擎更好地搜到。</p>
<h3 class="anchor anchorWithStickyNavbar_LWe7" id="构建系统">构建系统<a href="https://developer.zsxyww.com/blog/Web%E7%9A%84%E5%8E%86%E5%8F%B23%EF%B8%8F%E2%83%A3-Web%E5%BA%94%E7%94%A8#%E6%9E%84%E5%BB%BA%E7%B3%BB%E7%BB%9F" class="hash-link" aria-label="Direct link to 构建系统" title="Direct link to 构建系统">​</a></h3>
<p>浏览器其实并不能直接理解前端框架(Vue,React等)写的代码。因为它们并不是标准JavaScript，它们含有大量自定义的语法。因此，前端开发必须要把使用了框架的代码<strong>编译</strong>成浏览器可以理解的HTML,CSS,JavaScript。请注意，类似JQuery这样的库是不需要编译的，因为它们并没有超出原生的JavaScript功能和语法，而只是一个类库。你只需要在你的HTML里包含它们就可以。</p>
<p>构建系统是现代前端开发的重要一环，除了编译高级JavaScript代码外，构建系统通常还会做一些打包，压缩等杂活；这是现代前端开发必不可少的一环。常用的构建系统有Vite和Webpack</p>
<hr>
<p>JavaScript并不是天生开发复杂应用的语言，所以SPA框架提供了那么多的机制，来把这个为简单脚本设计的语言变成一个足够开发可靠Web应用的语言，尽管一层一层的嵌套拖慢了性能，但是Web的性能瓶颈通常不在于计算而是I/O,加上业界大环境的各种因素,导致了前端基本几天就要推出新技术，眼花缭乱层出不穷，但是这些技术底层都是差不多的。重要的是不要被各种宣传迷惑了认知，而要认清它们的本质。</p>
<p><img decoding="async" loading="lazy" alt="JavaScript fatigue" src="https://developer.zsxyww.com/assets/images/comic-301f3ee2297b346a30c21987f2cde629.png" width="1323" height="2425" class="img_ev3q"></p>
<blockquote>
<p>"JavaScript Fatigue"，图源<a href="https://auth0.com/blog/how-to-manage-javascript-fatigue/" target="_blank" rel="noopener noreferrer">Auth0博客</a></p>
</blockquote>
<h2 class="anchor anchorWithStickyNavbar_LWe7" id="javascript全栈">JavaScript全栈<a href="https://developer.zsxyww.com/blog/Web%E7%9A%84%E5%8E%86%E5%8F%B23%EF%B8%8F%E2%83%A3-Web%E5%BA%94%E7%94%A8#javascript%E5%85%A8%E6%A0%88" class="hash-link" aria-label="Direct link to JavaScript全栈" title="Direct link to JavaScript全栈">​</a></h2>
<h3 class="anchor anchorWithStickyNavbar_LWe7" id="nodejs">Node.js<a href="https://developer.zsxyww.com/blog/Web%E7%9A%84%E5%8E%86%E5%8F%B23%EF%B8%8F%E2%83%A3-Web%E5%BA%94%E7%94%A8#nodejs" class="hash-link" aria-label="Direct link to Node.js" title="Direct link to Node.js">​</a></h3>
<p>前面提到，JavaScript是专门设计运行在浏览器中的语言，也就是说，JavaScript的运行时就是浏览器，不过JavaScript也有浏览器之外的运行时，最出名的叫做<code>Node.js</code>；</p>
<p>简单来说，Node.js 让JavaScript走出了浏览器，可以直接在服务器上运行了。这意味着，开发者可以用同一种语言（JavaScript）来编写前端（用户在浏览器里看到的界面）和后端（服务器上处理数据的逻辑），这就是所谓的‘JavaScript全栈’开发。常见的JavaScript后端框架有Express.js Koa.js Nest.js。</p>
<h3 class="anchor anchorWithStickyNavbar_LWe7" id="web开发之外">Web开发之外<a href="https://developer.zsxyww.com/blog/Web%E7%9A%84%E5%8E%86%E5%8F%B23%EF%B8%8F%E2%83%A3-Web%E5%BA%94%E7%94%A8#web%E5%BC%80%E5%8F%91%E4%B9%8B%E5%A4%96" class="hash-link" aria-label="Direct link to Web开发之外" title="Direct link to Web开发之外">​</a></h3>
<p>Node.js能做的也不只是Web开发，传统编程语言可以做的Node.js都可以，在Web外最重要的领域就是桌面开发了，通常使用Electron框架，可以让你使用HTML,CSS来编写GUI界面，用JavaScript来操作界面。</p>
<p>因为依赖问题，通常每个Electron App 都打包了自己的Node.js运行时，每安装一个App，就相当于安装了一个浏览器内核。这严重浪费了电脑的内存和硬盘空间，但好处就是方便了开发。会写Web就能做桌面开发，降低了学习成本，也更方便跨平台。</p>
<h2 class="anchor anchorWithStickyNavbar_LWe7" id="最新技术">最新技术<a href="https://developer.zsxyww.com/blog/Web%E7%9A%84%E5%8E%86%E5%8F%B23%EF%B8%8F%E2%83%A3-Web%E5%BA%94%E7%94%A8#%E6%9C%80%E6%96%B0%E6%8A%80%E6%9C%AF" class="hash-link" aria-label="Direct link to 最新技术" title="Direct link to 最新技术">​</a></h2>
<h3 class="anchor anchorWithStickyNavbar_LWe7" id="websocket">WebSocket<a href="https://developer.zsxyww.com/blog/Web%E7%9A%84%E5%8E%86%E5%8F%B23%EF%B8%8F%E2%83%A3-Web%E5%BA%94%E7%94%A8#websocket" class="hash-link" aria-label="Direct link to WebSocket" title="Direct link to WebSocket">​</a></h3>
<p>HTTP已经很好了，但是协议本身有一个缺点:一个HTTP连接分为请求和响应，只能由客户端发起请求，服务端返回响应，如果客户端没有先发一点什么给服务端的话，服务端是没办法先给客户端发信息的，这就给一些更加复杂的要求增添了障碍：比如通过浏览器和别人聊天，需要接受来自服务器发给你的其他人的聊天的信息；或者是在浏览器上玩游戏，需要和服务器交换数据。这可以通过轮询来解决，但是这样还是不方便，效率也较低。</p>
<p>WebSocket是一个全新的协议，支持客户端和服务器的全双工通信，即客户端和服务器都可以主动地发消息，而且可以同时进行，而且是采用较小的数据帧格式，降低了网络开销，提高了数据传输速度。WebSocket在建立连接后保持长时间有效，不需要为每次消息发送重新建立连接，因此效率更高。</p>
<p>为了兼容HTTP协议，WebSocket也是监听80和443端口(HTTPS),握手采用了HTTP协议，通过升级协议来建立连接，如果可以升级，服务器会返回101状态码，升级连接.</p>
<h3 class="anchor anchorWithStickyNavbar_LWe7" id="webassembly">WebAssembly<a href="https://developer.zsxyww.com/blog/Web%E7%9A%84%E5%8E%86%E5%8F%B23%EF%B8%8F%E2%83%A3-Web%E5%BA%94%E7%94%A8#webassembly" class="hash-link" aria-label="Direct link to WebAssembly" title="Direct link to WebAssembly">​</a></h3>
<p>WebAssembly是最近新出现的技术，他允许开发者将C/C++ , Rust等原本的一些编译型语言编译成浏览器可以执行的字节码，使得在浏览器中也可以执行这些程序，目前也有一些使用WebAssembly的应用，可以去看看，最大的好处就是不会JavaScript也能开发前端，也可以复用以前为桌面写的代码。这还是一个非常新兴的领域，值得技术投资😄</p>
<h2 class="anchor anchorWithStickyNavbar_LWe7" id="总结与资源">总结与资源<a href="https://developer.zsxyww.com/blog/Web%E7%9A%84%E5%8E%86%E5%8F%B23%EF%B8%8F%E2%83%A3-Web%E5%BA%94%E7%94%A8#%E6%80%BB%E7%BB%93%E4%B8%8E%E8%B5%84%E6%BA%90" class="hash-link" aria-label="Direct link to 总结与资源" title="Direct link to 总结与资源">​</a></h2>
<p>Web的历史总共经历了三个阶段：首先为了传输基本文件而发明了HTTP，为了方便地预览文档而发明了HTML和CSS，这是Web的静态网页的时代；为了给静态网页增加动态内容，批量生成许多的网页，人们发明了动态网页技术，形成了后端程序的概念，这是动态网页的时代；为了让客户端浏览器更加强大，给后端减负，人们发明了JavaScript，又搭建了复杂的Web应用程序，形成了前端程序的概念，这是Web的应用程序时代。</p>
<p>虽然技术变得越来越复杂，但是发展的脉络是可以抓住的：Web由于其特性，被人们承载了越来越高的期望：从操作文件，到浏览信息，到成熟的应用程序平台。最重要的是知道Web的诸多名词，概念，技术并不是突然出现的，而是经历了半个世纪的历史沉淀，它们也不是为了创新而创新，每个技术能够出现并受到欢迎，一定是因为解决了某个痛点才有了价值。</p>
<h3 class="anchor anchorWithStickyNavbar_LWe7" id="编年史">编年史<a href="https://developer.zsxyww.com/blog/Web%E7%9A%84%E5%8E%86%E5%8F%B23%EF%B8%8F%E2%83%A3-Web%E5%BA%94%E7%94%A8#%E7%BC%96%E5%B9%B4%E5%8F%B2" class="hash-link" aria-label="Direct link to 编年史" title="Direct link to 编年史">​</a></h3>
<p>按照时间顺序总结对Web意义重大的技术：</p>
<details class="details_lb9f alert alert--info details_b_Ee" data-collapsed="true"><summary>编年史(AI写的，可能有点小错误)</summary><div><div class="collapsibleContent_i85q"><h3 id="-1966-1990-">早期 (1966-1990)</h3><ul><li><p>1966年</p><p> 互联网的前身“阿帕网” (ARPANET) 立项: 美国国防部高级研究计划局（ARPA）启动了阿帕网项目，旨在研究能够在部分网络遭到破坏后仍能维持通信的计算机网络。</p></li><li><p>1969年</p><p> 阿帕网首次成功通信: 10月29日，阿帕网上的第一条消息成功从加州大学洛杉矶分校（UCLA）发送到斯坦福研究院（SRI）。</p></li><li><p>1983年</p><p> TCP/IP协议成为阿帕网标准: 1月1日，TCP/IP协议取代了原有的网络控制协议（NCP），成为阿帕网的标准通信协议，这一事件被认为是互联网诞生的标志。</p></li><li><p>1989年</p><p> HTTP协议被发明: Tim Berners-Lee在欧洲核子研究中心（CERN）发明了超文本传输协议（HTTP），为万维网的诞生奠定了基础。</p></li><li><p>1990年</p><p> HTML被发明: Tim Berners-Lee开发了超文本标记语言（HTML），作为创建网页的标准化语言。</p><p> 世界上第一个网页浏览器和Web服务器诞生: Tim Berners-Lee编写了第一个网页浏览器WorldWideWeb（后改名为Nexus）和第一个Web服务器CERN httpd。</p></li></ul><h3 id="-1991-2004-">萌芽与成长 (1991-2004)</h3><ul><li><p>1991年</p><p> 互联网向公众开放: 8月6日，Tim Berners-Lee在公共新闻组上发布了万维网项目，标志着互联网开始向公众开放，并逐渐普及。</p></li><li><p>1993年</p><p> NCSA Mosaic浏览器发布: NCSA（美国国家超级计算应用中心）发布了Mosaic浏览器，这是第一个能够图文混排的浏览器，极大地推动了Web的普及。</p><p> CGI被发明: NCSA HTTPd服务器第一个实现了通用网关接口（CGI），使得Web服务器能够调用外部程序，从而实现动态网页。</p></li><li><p>1994年</p><p> HTTPS协议被发明: Netscape公司发明了HTTPS协议（安全的HTTP），并在其浏览器中实现。</p><p> Netscape浏览器发布: Netscape Navigator发布，迅速成为当时最流行的浏览器。</p><p> CSS被发明: Håkon Wium Lie首次提出了层叠样式表（CSS）的构想。</p></li><li><p>1995年</p><p> MySQL首次发布: MySQL数据库的第一个内部版本发布，之后逐渐发展成为Web领域最受欢迎的开源数据库之一。</p><p> Apache项目启动: Apache项目组接手了NCSA HTTPd的开发，并将其发展成为至今仍然非常流行的Apache HTTP Server。</p><p> JavaScript发布: Netscape公司发布了JavaScript（最初名为LiveScript），为网页添加了动态交互能力。</p><p> PHP发布: Rasmus Lerdorf发布了PHP（Personal Home Page Tools），一种用于创建动态网页的服务器端脚本语言。</p></li><li><p>1996年</p><p> HTTP/1.0发布: HTTP/1.0作为RFC 1945发布，对早期的HTTP协议进行了补充和规范。</p><p> CSS 1成为W3C推荐标准：CSS Level 1正式发布，为网页样式提供了标准化方案。</p><p> XML被发明: W3C开始制定可扩展标记语言（XML），旨在以结构化的方式传输和存储数据。</p></li><li><p>1997年</p><p> HTTP/1.1发布: HTTP/1.1作为RFC 2068发布，引入了持久连接、管道化和分块传输等重要改进，至今仍是广泛使用的协议版本。</p><p> Java Servlet发布: Sun Microsystems发布了Java Servlet技术，提供了一种在Web服务器上运行Java程序的方式。</p></li><li><p>1998年</p><p> XMLHttpRequest对象出现: 微软在Internet Explorer 5.0中首次引入了XMLHttpRequest对象，为日后AJAX的出现奠定了基础。</p></li><li><p>1999年</p><p> JSP发布: Sun Microsystems发布了JavaServer Pages（JSP），允许开发者将Java代码嵌入到HTML页面中。</p><p> HTML 4.01发布: HTML 4.01成为W3C推荐标准，是2000年代使用最广泛的HTML版本。</p></li><li><p>2000年</p><p> REST被提出: Roy Fielding在他的博士论文中提出了表述性状态转移（REST）的软件架构风格，为Web API的设计提供了重要的理论指导。</p><p> JSON被发明: Douglas Crockford提出了JavaScript对象表示法（JSON），作为一种轻量级的数据交换格式。</p></li><li><p>2002年</p><p> Firefox发布: Mozilla基金会发布了Firefox浏览器，作为Netscape的继任者，以其开源、可扩展和对Web标准的良好支持而受到欢迎。</p></li><li><p>2004年</p><p> Ruby On Rails发布: David Heinemeier Hansson发布了Ruby on Rails，这是一个全栈Web应用框架，以其“约定大于配置”的理念和快速开发能力而闻名。</p></li></ul><h3 id="-2005-">繁荣与变革 (2005至今)</h3><ul><li><p>2005年</p><p> MVC架构的流行: 模型-视图-控制器（MVC）架构模式大约在2000年代中期随着Ruby on Rails和Django等框架的兴起而在Web开发领域流行起来。</p><p> AJAX被广泛认知: Jesse James Garrett创造了AJAX（Asynchronous JavaScript and XML）这个术语，描述了一种使用现有技术创建更具动态性和交互性的Web应用的方法。</p><p> Django发布: Django，一个基于Python的高级Web框架，首次发布。</p></li><li><p>2006年</p><p> jQuery发布: John Resig发布了jQuery，这是一个快速、小巧且功能丰富的JavaScript库，极大地简化了HTML文档遍历、事件处理、动画和Ajax交互。</p></li><li><p>2008年</p><p> HTML5第一份公开草案发布: WHATWG发布了HTML5的第一份公开工作草案。</p></li><li><p>2009年</p><p> Node.js发布: Ryan Dahl发布了Node.js，这是一个基于Chrome V8引擎的JavaScript运行环境，使得JavaScript可以在服务器端运行。</p><p> ES5发布: ECMAScript 5（ES5）发布，为JavaScript语言带来了重要的改进，例如严格模式和对JSON的原生支持。</p><p> AngularJS发布: Google发布了AngularJS，这是第一个被广泛采用的现代前端框架，引入了数据绑定、依赖注入等概念。</p></li><li><p>2010年</p><p> Express.js发布: Express.js，一个基于Node.js平台的极简、灵活的web应用开发框架，首次发布。</p></li><li><p>2011年</p><p> WebSocket协议标准化: WebSocket协议被IETF标准化为RFC 6455，提供了浏览器与服务器之间全双工通信的能力。</p></li><li><p>2013年</p><p> 前后端分离架构的兴起: 大约在2013年左右，随着前端框架（如AngularJS, React）的成熟和RESTful API的普及，前后端分离的架构模式开始兴起。</p><p> React.js发布: Facebook发布了React.js，这是一个用于构建用户界面的JavaScript库，以其组件化和虚拟DOM的概念而受到欢迎。</p><p> Electron发布: GitHub发布了Electron（最初名为Atom Shell），这是一个使用Web技术构建跨平台桌面应用的框架。</p></li><li><p>2014年</p><p> HTML5正式发布: W3C正式发布了HTML5推荐标准。</p><p> Vue.js发布: 尤雨溪发布了Vue.js，这是一个渐进式JavaScript框架，以其易用性和灵活性而著称。</p><p> SPA架构的流行: 单页面应用（SPA）架构随着AJAX的出现和前端框架的发展而逐渐流行，大约在2010年代中期成为构建富交互Web应用的主流方式。</p></li><li><p>2015年</p><p> ES6发布: ECMAScript 2015（ES6）发布，为JavaScript带来了大量新特性，如类、模块、箭头函数、Promise等，是JavaScript语言的一次重大更新。</p><p> REST开始流行: 随着移动互联网和前后端分离架构的兴起，RESTful API成为Web服务的主流设计风格。</p><p> WebAssembly首次宣布: WebAssembly，一种新的、可移植的、大小和加载时间高效的格式，旨在为Web带来近乎原生的性能，首次被宣布。</p></li><li><p>2016年</p><p> Next.js发布: Vercel（当时名为ZEIT）发布了Next.js，这是一个基于React的服务端渲染框架，简化了React应用的开发。</p></li></ul><ul><li><p>2017年</p><p> WebAssembly MVP发布: WebAssembly的最小可行产品（MVP）在主流浏览器中得到支持。</p></li><li><p>2018年</p><p> WebAssembly首个公开工作草案发布: W3C发布了WebAssembly核心规范、JavaScript接口和Web API的第一个公开工作草案。</p></li><li><p>2019年</p><p> WebAssembly成为W3C推荐标准: WebAssembly核心规范成为W3C的官方推荐标准。</p></li></ul></div></div></details>
<h3 class="anchor anchorWithStickyNavbar_LWe7" id="资源">资源<a href="https://developer.zsxyww.com/blog/Web%E7%9A%84%E5%8E%86%E5%8F%B23%EF%B8%8F%E2%83%A3-Web%E5%BA%94%E7%94%A8#%E8%B5%84%E6%BA%90" class="hash-link" aria-label="Direct link to 资源" title="Direct link to 资源">​</a></h3>
<p><em>(MDN是一个非常好的网站，是开发FireFox的Mozilla公司写的，基本上是前端开发的圣经了，对于后端人，这个网站也有许多很好的内容)</em></p>
<ol>
<li><a href="https://developer.mozilla.org/zh-CN/docs/Web/HTTP" target="_blank" rel="noopener noreferrer">关于HTTP协议的详细解释</a></li>
<li><a href="https://developer.mozilla.org/zh-CN/docs/Learn_web_development" target="_blank" rel="noopener noreferrer">Web开发教程</a> <em>HTML,CSS,JavaScript都有，需要学什么就去看什么</em></li>
<li><a href="https://developer.mozilla.org/zh-CN/docs/Learn_web_development/Extensions/Server-side" target="_blank" rel="noopener noreferrer">后端开发教程</a></li>
</ol>
<div class="theme-admonition theme-admonition-info admonition_xJq3 alert alert--info"><div class="admonitionHeading_Gvgb"><span class="admonitionIcon_Rf37"><svg viewBox="0 0 14 16"><path fill-rule="evenodd" d="M7 2.3c3.14 0 5.7 2.56 5.7 5.7s-2.56 5.7-5.7 5.7A5.71 5.71 0 0 1 1.3 8c0-3.14 2.56-5.7 5.7-5.7zM7 1C3.14 1 0 4.14 0 8s3.14 7 7 7 7-3.14 7-7-3.14-7-7-7zm1 3H6v5h2V4zm0 6H6v2h2v-2z"></path></svg></span>info</div><div class="admonitionContent_BuS1"><p>这是三篇系列文章中的第<strong>3</strong>篇</p><p>点击以跳转：</p><p><a href="https://developer.zsxyww.com/blog/Web%E7%9A%84%E5%8E%86%E5%8F%B21%EF%B8%8F%E2%83%A3-HTTP">HTTP</a></p><p><a href="https://developer.zsxyww.com/blog/Web%E7%9A%84%E5%8E%86%E5%8F%B22%EF%B8%8F%E2%83%A3-%E5%8A%A8%E6%80%81%E7%BD%91%E9%A1%B5">动态网页</a></p><p><strong>Web应用</strong>(你在看的文章)</p></div></div>]]></content:encoded>
</item>
<item>
<title><![CDATA[女生宿舍的网络结构解释]]></title>
<link>https://developer.zsxyww.com/blog/2025/5/9/女生宿舍的网络结构解释</link>
<guid>https://developer.zsxyww.com/blog/2025/5/9/女生宿舍的网络结构解释</guid>
<pubDate>Fri, 09 May 2025 00:00:00 GMT</pubDate>
<description><![CDATA[这里有几张女生宿舍网络结构的图解]]></description>
<content:encoded><![CDATA[<p>这里有几张女生宿舍网络结构的图解</p>
<h2 class="anchor anchorWithStickyNavbar_LWe7" id="概述">概述<a href="https://developer.zsxyww.com/blog/2025/5/9/%E5%A5%B3%E7%94%9F%E5%AE%BF%E8%88%8D%E7%9A%84%E7%BD%91%E7%BB%9C%E7%BB%93%E6%9E%84%E8%A7%A3%E9%87%8A#%E6%A6%82%E8%BF%B0" class="hash-link" aria-label="Direct link to 概述" title="Direct link to 概述">​</a></h2>
<p>请观察这张图片：</p>
<p><img decoding="async" loading="lazy" alt="朝晖" src="https://developer.zsxyww.com/assets/images/%E5%A5%B3%E7%94%9F%E5%AE%BF%E8%88%8D%E7%9A%84%E7%BD%91%E7%BB%9C%E7%BB%93%E6%9E%84-e9820a7a1498a486805587f0457b72b8.webp" width="906" height="711" class="img_ev3q"></p>
<p>这是朝晖的网络结构，我们以它举例来说：</p>
<p>首先需要知道，用户的电脑通过自己的网线接到端口上，才可以连上网络</p>
<p>端口的后面，是被我们称为“墙线”的网线通路，顾名思义，它们是嵌在墙里的(这样说不准确，但是你可以这么认为)，我们没有办法对墙线做手脚，要是墙线坏了，就只能上报，墙线的另一端是楼层机房的配线架</p>
<p>配线架起到一个中继器的作用，配线架的背面有很多入口，正面有很多出口，配线架会把入口的信号原样输出给出口，入口连接的是墙线(也就是用户端口)，出口连接的是交换机</p>
<p>端口不直接连接到交换机，而是首先经过配线架，有很多好处，这样如果配线架到交换机的那一段网线出现了问题，就不用换掉整个墙线，而是直接把出口的线直接换掉；这样也方便我们换线(比如用户用的是电信，毕业了之后新生办的是移动宽带)；另外，配线架还有避免信号衰减的功能</p>
<p>端口首先连接到配线架，配线架再连接到楼层交换机；楼层交换机还会连接到楼栋交换机和核心交换机，不过就不是我们网维需要负责的了。</p>
<p>朝晖片区的配线架和交换机放在同一个机柜，但是香晖片区的就不是了，香晖片区的机房结构类似如下：
<img decoding="async" loading="lazy" alt="香晖" src="https://developer.zsxyww.com/assets/images/%E6%9C%BA%E6%9F%9C-b749c85b7dd2463e53909a30db6ee657.jpg" width="904" height="466" class="img_ev3q"></p>
<div class="theme-admonition theme-admonition-tip admonition_xJq3 alert alert--success"><div class="admonitionHeading_Gvgb"><span class="admonitionIcon_Rf37"><svg viewBox="0 0 12 16"><path fill-rule="evenodd" d="M6.5 0C3.48 0 1 2.19 1 5c0 .92.55 2.25 1 3 1.34 2.25 1.78 2.78 2 4v1h5v-1c.22-1.22.66-1.75 2-4 .45-.75 1-2.08 1-3 0-2.81-2.48-5-5.5-5zm3.64 7.48c-.25.44-.47.8-.67 1.11-.86 1.41-1.25 2.06-1.45 3.23-.02.05-.02.11-.02.17H5c0-.06 0-.13-.02-.17-.2-1.17-.59-1.83-1.45-3.23-.2-.31-.42-.67-.67-1.11C2.44 6.78 2 5.65 2 5c0-2.2 2.02-4 4.5-4 1.22 0 2.36.42 3.22 1.19C10.55 2.94 11 3.94 11 5c0 .66-.44 1.78-.86 2.48zM4 14h5c-.23 1.14-1.3 2-2.5 2s-2.27-.86-2.5-2z"></path></svg></span>提示</div><div class="admonitionContent_BuS1"><p>本文持续更新中</p></div></div>]]></content:encoded>
</item>
<item>
<title><![CDATA[给纯新手的网维快速入门指南]]></title>
<link>https://developer.zsxyww.com/blog/2024/09/27/给纯新手的网维快速入门指南</link>
<guid>https://developer.zsxyww.com/blog/2024/09/27/给纯新手的网维快速入门指南</guid>
<pubDate>Fri, 27 Sep 2024 00:00:00 GMT</pubDate>
<description><![CDATA[许多新进网维的小伙伴们都可能对我们的日常工作一脸懵：网维是干什么的，我们到底在修什么？其他人说的交换机，主线到底是什么？]]></description>
<content:encoded><![CDATA[<p>许多新进网维的小伙伴们都可能对我们的日常工作一脸懵：网维是干什么的，我们到底在修什么？其他人说的交换机，主线到底是什么？</p>
<p>甚至有很多正式成员都搞不明白这个问题，为了提升大家的业务水平和网络技术，我们特意编写了这份指南，希望能对你有些许的用处。</p>
<h2 class="anchor anchorWithStickyNavbar_LWe7" id="网络">网络<a href="https://developer.zsxyww.com/blog/2024/09/27/%E7%BB%99%E7%BA%AF%E6%96%B0%E6%89%8B%E7%9A%84%E7%BD%91%E7%BB%B4%E5%BF%AB%E9%80%9F%E5%85%A5%E9%97%A8%E6%8C%87%E5%8D%97#%E7%BD%91%E7%BB%9C" class="hash-link" aria-label="Direct link to 网络" title="Direct link to 网络">​</a></h2>
<p>网维，那不就是修网络的吗？但是，网络是什么？他究竟是什么样的？为什么我可以访问到遥远彼方的内容（网页，游戏，等）？</p>
<p>首先，我们需要知道，计算机中的一切数据，都是一串二进制数字，也就是许多的01010101101010.........,网络的本质，就是在计算机之间传输这些数字，如何进行传输呢？通常是使用物理现实的两种状态来表示0和1这两个数字。</p>
<p>比如，一个电路（简单点说，有一个电灯），电路闭合，电灯亮，我们定义这样的状态是1,反之，电路断开，电灯暗，我们定义这样的状态为0,我们让计算机监听这个电路的状态，通过电路断开闭合状态不断的超高速的变化，就可以传递01010101这些数字来进行信息的传递。</p>
<div class="theme-admonition theme-admonition-info admonition_xJq3 alert alert--info"><div class="admonitionHeading_Gvgb"><span class="admonitionIcon_Rf37"><svg viewBox="0 0 14 16"><path fill-rule="evenodd" d="M7 2.3c3.14 0 5.7 2.56 5.7 5.7s-2.56 5.7-5.7 5.7A5.71 5.71 0 0 1 1.3 8c0-3.14 2.56-5.7 5.7-5.7zM7 1C3.14 1 0 4.14 0 8s3.14 7 7 7 7-3.14 7-7-3.14-7-7-7zm1 3H6v5h2V4zm0 6H6v2h2v-2z"></path></svg></span>信息</div><div class="admonitionContent_BuS1"><p>这里有我们写的一篇科普文章，介绍了网线的一些概念：<a href="https://developer.zsxyww.com/docs/wiki/%E5%9F%BA%E7%A1%80%E7%9F%A5%E8%AF%86/%E7%A7%91%E6%99%AE/%E7%BD%91%E7%BA%BF%E6%98%AF%E4%BB%80%E4%B9%88">Click Me</a></p></div></div>
<p>不一定需要电路这种介质，还可以是无线电波，例如，定义电波幅度大于某个值为1,小于某个值为0，或者大于某个频率为0,小于某个频率为1,让计算机接受这样的电波并解读，也可以传递信息。</p>
<p>其实，简单地说，前者就是以太网（有线网）本质，网线本质上就是电线，里面是以高频率断断续续的电流，把电线接到计算机里，计算机就可以依据电路的变化情况来获取信息.而后者则是无线网(Wi-Fi,移动通信技术等)本质，他们通过调制电磁波来传递信息。</p>
<h3 class="anchor anchorWithStickyNavbar_LWe7" id="网维">网维<a href="https://developer.zsxyww.com/blog/2024/09/27/%E7%BB%99%E7%BA%AF%E6%96%B0%E6%89%8B%E7%9A%84%E7%BD%91%E7%BB%B4%E5%BF%AB%E9%80%9F%E5%85%A5%E9%97%A8%E6%8C%87%E5%8D%97#%E7%BD%91%E7%BB%B4" class="hash-link" aria-label="Direct link to 网维" title="Direct link to 网维">​</a></h3>
<p>网维主要修的是学生宿舍的以太网，在每个宿舍的每个人的桌子前，都有一个网线端口，用户将网线插入端口和计算机，即可连接到宿舍的楼层线路，端口后面是墙线，意思是它是埋在墙里的，我们一般情况下没法动他</p>
<p>依据宿舍片区的不同，墙线可能直接通去了机房，也有可能是连接到了宿舍的路由器（交换机/光猫），经过这一层转发，再前往机房。</p>
<div class="theme-admonition theme-admonition-tip admonition_xJq3 alert alert--success"><div class="admonitionHeading_Gvgb"><span class="admonitionIcon_Rf37"><svg viewBox="0 0 12 16"><path fill-rule="evenodd" d="M6.5 0C3.48 0 1 2.19 1 5c0 .92.55 2.25 1 3 1.34 2.25 1.78 2.78 2 4v1h5v-1c.22-1.22.66-1.75 2-4 .45-.75 1-2.08 1-3 0-2.81-2.48-5-5.5-5zm3.64 7.48c-.25.44-.47.8-.67 1.11-.86 1.41-1.25 2.06-1.45 3.23-.02.05-.02.11-.02.17H5c0-.06 0-.13-.02-.17-.2-1.17-.59-1.83-1.45-3.23-.2-.31-.42-.67-.67-1.11C2.44 6.78 2 5.65 2 5c0-2.2 2.02-4 4.5-4 1.22 0 2.36.42 3.22 1.19C10.55 2.94 11 3.94 11 5c0 .66-.44 1.78-.86 2.48zM4 14h5c-.23 1.14-1.3 2-2.5 2s-2.27-.86-2.5-2z"></path></svg></span>提示</div><div class="admonitionContent_BuS1"><p>你可以在片区信息中查看各个片区的具体结构</p></div></div>
<p>路由器是什么？交换机和光猫又是什么？这个问题如果专业地展开来讲有点难懂，对于新手来说，你可以简单的理解为他们都是中转站，电线在这里经过出去的电线继续信息的传递，而不是直接一根线连到网络上去</p>
<p>无线路由器（或者有路由功能的光猫）还可以让用户通过无线方式接入线路，比如，如果你想坐高铁，从中山坐到广州南，然后再从广州南做到其他地方，但是没必要全程坐高铁，你可以打车，坐地铁到广州南，然后再坐高铁。这里一样的，不管有线还是无线的接入，在网关（我们对这些设备的统称）都是转换成有线再出去，</p>
<p>出去是去哪里呢？在宿舍的结构中，是去了机房（或者说，弱电井），宿舍去机房的线就叫做主线（只有通过网关中继的地方才会有主线的概念，直连机房的就直接是墙线）</p>
<p>线路到了机房，一般会接入一个叫做配线架的设备，这个也是一个中继器，方便我们维修（如果是线路坏了的话），配线架的端口总是成对的，有一个进口就会有出口，一般进口都是不用我们去管的，线路经过出口出来，连接到交换机上，我们网维的工作一般追踪到这里，再往后的问题就不是我们的职责了，</p>
<p>交换机有运营商的区别，用户需要接到他宽带开通的运营商对应的交换机上，通过一类叫做“拨号”的协议来进行认证，向运营商用自己的账号请求登录，请求运营商允许联网，这样也方便运营商计费（和学校监控!）,交换机通常都是集成了光纤功能，在这里将电路的信号调制成光的信号（这也是一种传输0101010的方式！），然后接入运营商的网络，访问全国，和全球的互联网</p>
<h2 class="anchor anchorWithStickyNavbar_LWe7" id="维修">维修<a href="https://developer.zsxyww.com/blog/2024/09/27/%E7%BB%99%E7%BA%AF%E6%96%B0%E6%89%8B%E7%9A%84%E7%BD%91%E7%BB%B4%E5%BF%AB%E9%80%9F%E5%85%A5%E9%97%A8%E6%8C%87%E5%8D%97#%E7%BB%B4%E4%BF%AE" class="hash-link" aria-label="Direct link to 维修" title="Direct link to 维修">​</a></h2>
<p>上面就是我们学校宿舍网络的结构了，网维的工作，本质就是维护这样的结构正常运行，在这些环节中，每一个都有可能出错，一般来说，我们最常见的有两种错误：硬件(物理层)错误(651)和软件错误(691).</p>
<h3 class="anchor anchorWithStickyNavbar_LWe7" id="651错误">651错误<a href="https://developer.zsxyww.com/blog/2024/09/27/%E7%BB%99%E7%BA%AF%E6%96%B0%E6%89%8B%E7%9A%84%E7%BD%91%E7%BB%B4%E5%BF%AB%E9%80%9F%E5%85%A5%E9%97%A8%E6%8C%87%E5%8D%97#651%E9%94%99%E8%AF%AF" class="hash-link" aria-label="Direct link to 651错误" title="Direct link to 651错误">​</a></h3>
<p>硬件错误，通常在拨号时会给出<code>651</code>错误，本质上，这种错误就是物理连接出现了问题，要么是墙线老化接触不良了，要么是主线出现了问题，要么是交换机，配线架没有接好，要么是网线问题，对于这种问题，我们通常通过寻线对线器来解决，排查问题</p>
<p>排查问题一般都是调试可能出错的因素，例如，你用一根确定了的是好的网线直连端口对线没问题，但是用户的线连接端口就有问题，那么就是用户的线有问题</p>
<div class="theme-admonition theme-admonition-info admonition_xJq3 alert alert--info"><div class="admonitionHeading_Gvgb"><span class="admonitionIcon_Rf37"><svg viewBox="0 0 14 16"><path fill-rule="evenodd" d="M7 2.3c3.14 0 5.7 2.56 5.7 5.7s-2.56 5.7-5.7 5.7A5.71 5.71 0 0 1 1.3 8c0-3.14 2.56-5.7 5.7-5.7zM7 1C3.14 1 0 4.14 0 8s3.14 7 7 7 7-3.14 7-7-3.14-7-7-7zm1 3H6v5h2V4zm0 6H6v2h2v-2z"></path></svg></span>信息</div><div class="admonitionContent_BuS1"><p>关于更多651错误，请查阅wiki相关页面，也请查阅<code>技能</code>板块中<code>对线</code>和<code>寻线</code>的条目</p></div></div>
<h3 class="anchor anchorWithStickyNavbar_LWe7" id="691错误">691错误<a href="https://developer.zsxyww.com/blog/2024/09/27/%E7%BB%99%E7%BA%AF%E6%96%B0%E6%89%8B%E7%9A%84%E7%BD%91%E7%BB%B4%E5%BF%AB%E9%80%9F%E5%85%A5%E9%97%A8%E6%8C%87%E5%8D%97#691%E9%94%99%E8%AF%AF" class="hash-link" aria-label="Direct link to 691错误" title="Direct link to 691错误">​</a></h3>
<p>软件错误，通常会在拨号时给出<code>691</code>错误，本质上，这意味着物理连接是通的，但是运营商那边拒绝的用户的登录，有几种可能：</p>
<ol>
<li>交换机接错了，用户是某个运营商，你接到了其他的运营商的交换机，当然报错喽～</li>
<li>短时间内过多的登录，被运营商拉黑了，需要稍等一会子</li>
<li>宽带欠费，停机</li>
<li>账号密码错误</li>
<li>运营商会绑定MAC地址来限制多设备，在更换电脑或者转接器等设备时会遇到这样的情况，可以打电话给运营商要求所谓的“解绑刷新”，也可以组长</li>
</ol>
<div class="theme-admonition theme-admonition-info admonition_xJq3 alert alert--info"><div class="admonitionHeading_Gvgb"><span class="admonitionIcon_Rf37"><svg viewBox="0 0 14 16"><path fill-rule="evenodd" d="M7 2.3c3.14 0 5.7 2.56 5.7 5.7s-2.56 5.7-5.7 5.7A5.71 5.71 0 0 1 1.3 8c0-3.14 2.56-5.7 5.7-5.7zM7 1C3.14 1 0 4.14 0 8s3.14 7 7 7 7-3.14 7-7-3.14-7-7-7zm1 3H6v5h2V4zm0 6H6v2h2v-2z"></path></svg></span>信息</div><div class="admonitionContent_BuS1"><p>关于更多691错误，请查阅wiki的相关页面，和相应的文章</p></div></div>
<h2 class="anchor anchorWithStickyNavbar_LWe7" id="总结">总结<a href="https://developer.zsxyww.com/blog/2024/09/27/%E7%BB%99%E7%BA%AF%E6%96%B0%E6%89%8B%E7%9A%84%E7%BD%91%E7%BB%B4%E5%BF%AB%E9%80%9F%E5%85%A5%E9%97%A8%E6%8C%87%E5%8D%97#%E6%80%BB%E7%BB%93" class="hash-link" aria-label="Direct link to 总结" title="Direct link to 总结">​</a></h2>
<p>这里只是一篇简要的指南，我们在这里介绍了网络的基本概念，让你对你所要维修的系统有一个大概的了解，你可以继续去看wiki中的相关条目，来进一步扩充你的知识，希望你在网维的时光过得愉快！</p>]]></content:encoded>
</item>
<item>
<title><![CDATA[ComIntRep的使用教程]]></title>
<link>https://developer.zsxyww.com/blog/2024/08/19/ComIntRep的使用教程</link>
<guid>https://developer.zsxyww.com/blog/2024/08/19/ComIntRep的使用教程</guid>
<pubDate>Mon, 19 Aug 2024 00:00:00 GMT</pubDate>
<description><![CDATA[介绍]]></description>
<content:encoded><![CDATA[<h2 class="anchor anchorWithStickyNavbar_LWe7" id="介绍">介绍<a href="https://developer.zsxyww.com/blog/2024/08/19/ComIntRep%E7%9A%84%E4%BD%BF%E7%94%A8%E6%95%99%E7%A8%8B#%E4%BB%8B%E7%BB%8D" class="hash-link" aria-label="Direct link to 介绍" title="Direct link to 介绍">​</a></h2>
<p>如果是操作系统本身的问题导致了用户没法上网的话，传统的办法是先确定故障出现在哪里，然后去修理对应的地方，在这个过程中，难免要接触到修改注册表，协议栈，hosts这类复杂的名词..</p>
<p>而ComIntRep就是一款一键修复windows网络的神器，全称<code>"Complete Internet Repair"</code>,他的功能有：</p>
<ul>
<li>重置 Internet 协议（TCP/ IP 协议）</li>
<li>修复 Winsock</li>
<li>更新互联网连接</li>
<li>刷新 DNS 解析器缓存</li>
<li>刷新 ARP 缓存</li>
<li>修复 Internet Explorer</li>
<li>清除 Windows 更新历史记录</li>
<li>修复 Windows 自动更新</li>
<li>修复的 SSL / HTTPS 加密</li>
<li>重置代理服务器配置</li>
<li>重置 Windows 防火墙配置</li>
<li>恢复默认的 hosts 文件</li>
<li>修复查看工作组计算机<br>
<!-- -->这款软件可以帮我们很大程度上节省修网的时间，非常推荐使用</li>
</ul>
<h2 class="anchor anchorWithStickyNavbar_LWe7" id="使用">使用<a href="https://developer.zsxyww.com/blog/2024/08/19/ComIntRep%E7%9A%84%E4%BD%BF%E7%94%A8%E6%95%99%E7%A8%8B#%E4%BD%BF%E7%94%A8" class="hash-link" aria-label="Direct link to 使用" title="Direct link to 使用">​</a></h2>
<p>勾选你要修复的部分，然后点击<code>Go!</code>,就可以了，系统会自动重置你选择那部分的网络配置，修复完毕后，重启电脑即可<br>
<!-- -->官方推荐在修复前备份操作系统，点击<code>Maintennace</code>-&gt;<code>System_Restore</code>,然后点击“配置”，“启用系统保护”，然后为C盘创建一个还原点，就可以修复了</p>
<h2 class="anchor anchorWithStickyNavbar_LWe7" id="参考">参考<a href="https://developer.zsxyww.com/blog/2024/08/19/ComIntRep%E7%9A%84%E4%BD%BF%E7%94%A8%E6%95%99%E7%A8%8B#%E5%8F%82%E8%80%83" class="hash-link" aria-label="Direct link to 参考" title="Direct link to 参考">​</a></h2>
<p><a href="https://zhuanlan.zhihu.com/p/27196344" target="_blank" rel="noopener noreferrer">https://zhuanlan.zhihu.com/p/27196344</a> \</p>]]></content:encoded>
</item>
<item>
<title><![CDATA[你可以在哪里找到开发组？]]></title>
<link>https://developer.zsxyww.com/blog/2024/08/18/网维联系方式</link>
<guid>https://developer.zsxyww.com/blog/2024/08/18/网维联系方式</guid>
<pubDate>Sun, 18 Aug 2024 00:00:00 GMT</pubDate>
<description><![CDATA[目前，开发组成员可以通过如下的方式联系：]]></description>
<content:encoded><![CDATA[<p>目前，开发组成员可以通过如下的方式联系：</p>
<ul>
<li>开发组成员可以通过github上的<a href="https://github.com/ZSCNetSupportDept/forum/discussions" target="_blank" rel="noopener noreferrer">论坛</a>交流(仅限内部访问)</li>
<li>开发组有一个QQ群：961797864</li>
<li>可以联系组长,QQ:2597760847</li>
</ul>]]></content:encoded>
</item>
<item>
<title><![CDATA[Hello World!]]></title>
<link>https://developer.zsxyww.com/blog/2024/06/27/Hello_World</link>
<guid>https://developer.zsxyww.com/blog/2024/06/27/Hello_World</guid>
<pubDate>Thu, 27 Jun 2024 00:00:00 GMT</pubDate>
<description><![CDATA[This is a Test post]]></description>
<content:encoded><![CDATA[<p><strong>This is a Test post</strong></p>]]></content:encoded>
</item>
</channel>
</rss>
View Git Blame Copy Permalink