From 19ebcc67d48516478fe633fb1623724a45e74a1e Mon Sep 17 00:00:00 2001 From: govolokatliai Date: Fri, 1 Nov 2024 18:56:26 +0800 Subject: [PATCH] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E4=BA=86=E7=B3=BB=E5=88=97?= =?UTF-8?q?=E6=96=87=E7=AB=A0-Web=E5=90=8E=E7=AB=AF=E5=9F=B9=E8=AE=AD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../02-Web后端/01-Web后端的简单介绍.md | 98 +++++++++++++++++++ .../02-Web后端/02-基于HTTP的Web后端的组成.md | 77 +++++++++++++++ 2 files changed, 175 insertions(+) create mode 100644 docs/devdocs/09-培训/02-Web后端/01-Web后端的简单介绍.md create mode 100644 docs/devdocs/09-培训/02-Web后端/02-基于HTTP的Web后端的组成.md diff --git a/docs/devdocs/09-培训/02-Web后端/01-Web后端的简单介绍.md b/docs/devdocs/09-培训/02-Web后端/01-Web后端的简单介绍.md new file mode 100644 index 0000000..96273de --- /dev/null +++ b/docs/devdocs/09-培训/02-Web后端/01-Web后端的简单介绍.md @@ -0,0 +1,98 @@ +# Web后端的简单介绍 +这篇文章将带你学习构建一个Web后端的简单知识;作为一篇基础的教程，我们在教程里不会太多涉及诸如缓存，消息队列等高级内容，而是专注于基础的部分;我们也不会在一开始就涉及到具体的编程语言代码，而是将这篇文章作为一个理论性的介绍.你可能至少需要了解一些计算机的基础知识，比如html等，才可以了解文章中的一些概念. + +## Web的历史 + +### 静态网页 +互联网最开始只有静态网页，所谓“静态”，指的是网页中的内容是完全固定的，在服务器端存储了内容固定的html,css，或者是其他的什么文件，用户访问网页，就是通过互联网查看这些固定的文件。在这种情况下，Web服务本质上更像是远程访问计算机上的某个文件夹，这种访问通过HTTP协议来进行。 + +例如，如果要建立一个网站，那就在你的电脑上安装一个HTTP服务器（比如apache,nginx），在设置里指定`root`为你电脑上的某个文件夹，然后去买一个域名，把域名的DNS绑定到你电脑的IP地址上，那么其他人在浏览器上输入你的域名，就可以访问`root`文件夹下面的内容了。在下面放一个`index.html`,那浏览器就会默认显示这个文件的内容，在下面放一些图片，比如文件夹下面有： +`$ROOT/foo.jpg`和`$ROOT/subfolder/bar.jpg`，那么别人在浏览器上面输入`http://yourdomain.com/foo.jpg`和`http://yourdomain.com/subfolder/bar.jpg`就可以访问到对应的文件。 + +HTTP协议不仅可以获取一个文件，他也可以上传，删除一个服务器上面的文件，这通过所谓"HTTP方法"来进行，`GET`方法从服务器获得一个资源，我们在浏览器的地址栏输入一个地址时，就是在对这个URI做`GET`请求，前面的例子也是通过`GET`方法来进行的。 + +`POST`方法向服务器上传一个资源，例如使用某个客户端发送`POST http://example.org/someprogram.exe`，在request body里面带上你的这个文件，那么`example.org`网站的根目录下就会多出一个叫做`someprogram.exe`的文件 + +除了上面介绍的这些方法，还有`DELETE`,`PATCH`等方法，分别对应了删除，修改一个资源，你可以在你的电脑上通过`curl`等程序，或者通过浏览器控制台来进行常规的`GET`之外的方法请求 + +:::tip 提示 + +httpbin.org 这个网站可以让你试验HTTP协议的方法 + +::: + +不管使用的是什么方法，这些操作都在对一些固定静态的文件在操作，这些文件的内容是什么就是什么，不会变化，这样的网页就叫做静态网页。 + +### 动态网页 +这样的网页是不能满足大家对互联网的需求的，举例子来说：淘宝上有数不清的商品在售卖，如果淘宝为每一个商品都在服务器目录下面创建一个html文件，好让大家通过访问`http://taobao.com/someproduct.html`来查看商品信息，那这个工作量就非常大了，还有一些更重要的问题：作为服务器的管理员，你如何从商家那里获取他们要卖什么？如何通过网页来让顾客点击按钮就可以下单？ + +#### CGI +这些都是静态互联网无法解决的问题，所以程序员们开发了一个叫CGI(Common Gateway Interface,通用网关接口)的技术，这种技术在用户请求网站的内容时，让一个脚本劫持用户的请求，返回给用户一个脚本动态生成的html文件，比如，如果用户想知道这台计算机目前的内存和硬盘占用情况，发送`GET http://example.org/status.html`，CGI程序发现给本机请求status.html这个文件，并且代码里写了如果是这个文件的话，就执行系统的相关操作，并将返回结果插入到一个模板html文件中，返回这个文件，于是，用户就受到了CGI程序动态产生的html. + +虽然CGI现在很少见了，但是将一个发送到服务器的地址请求劫持到脚本（函数）上是现代动态网站的常用思路。 + +#### JavaScript +除了服务器，浏览器也在为适配动态网站而更新。在1995年，网景公司的员工发明了一种编程语言，叫做"JavaScript",这是对当时新兴的Java和Java Applet的回应，这种语言最大的特点就是它被设计在浏览器中运行，并且可以调用相关接口来操作页面html，css内容和进行HTTP请求，他们让自己家的网景浏览器率先支持了这种编程语言(这个浏览器就是火狐浏览器的前身)，这极大的提高了浏览器对于动态网页的支持。 + +#### AJAX(Asynchronous JavaScript and XML) +尽管是在浏览器里的语言，但是作为一个完整编程语言的JavaScript还是非常强大的，在有了操作DOM,发起HTTP请求的能力后，JavaScript不仅可以做到传统动态页面的功能（即动态生成html,但是这个html生成之后到用户的手里还是不会变化的），还可以部分改变用户收到的文件（尤指HTML,CSS等文件），只需要浏览器重新渲染一遍就行了，这种技术就叫做AJAX,Asynchronous JavaScript and XML + +##### 一个AJAX报名系统的例子 +下面举一个例子，来详细说明AJAX的工作原理：用户需要通过一个网页进行某项活动的报名，填写个人信息，然后点击网页上的提交按钮，服务端会返回报名的结果，成功还是失败，与传统的方法不同，服务器返回信息时不是重新返回一个HTML,而是让浏览器直接在原有的界面上（比如提交按钮的下面）显示报名的状态 + +用户通过浏览器输入地址，使用`GET`方法发起对`http://example.org/submit.html`的请求，服务器获得请求后，在root目录下面找到submit.html文件,浏览器得到文件后开始解析渲染这个文件，发现这个html在头部又要求浏览器向服务器获取`submit.js`文件，于是浏览器不需要用户处理自己又发送了一条`GET`的HTTP Request,并且执行返回的脚本，这个脚本的内容是监听html文件中提交按钮的“点击”事件，当按钮被点击时，执行某个函数。 + +返回的html文件包括了提示框，要求用户输入姓名，手机，空闲时间等信息，在这些输入栏的最下面有一个提交按钮，当点击这个按钮时，脚本就会被激活，脚本执行的函数将读取用户从上面输入进来的内容，做一些简单的认证（比如说手机号的格式等），然后将这些信息组织成一个XML文件（当然,AJAX中的X就是XML咯，现在其实也可以用其他的方法序列化，比如JSON什么的），向服务器发送一个`POST`请求，地址是`http://example.org/api/submit/submit.php`,在请求体中包含刚才的XML文件。 + +服务器在接收这个请求后，就会将，这个请求的上下文全部转交给`submit.php`这个脚本，脚本再做一些工作，录入数据库，如果一切都成功了，就向客户端发送回应成功，反之则回应失败的消息，回应的内容可以是一个纯文本，或者直接是状态码。 + +在JavaScript脚本接收到回应后，根据返回的内容，操作html文件的内容，在提交按钮的下面一行插入一个文本块：`

提交成功！

`或者其他的信息 + +#### URI在现代的意义 +从刚才的这个例子中，我们可以看到网站的URI,其实慢慢的不止可以指代一个文件了，他更多的是指代一个资源，或者一个业务,向`submit.php`提交一个`POST`请求，难道是在远端创建一个`submit.php`程序？其实在这里更多是指将客户端的数据上传到这个`/api/submit/submit.php`的业务窗口,我们的后端开发，也是建立在这种对虚拟的路径的请求下的。 + +### Web应用 +#### WebSocket +HTTP的动态网站已经很好了，但是协议本身有一个缺点:一个HTTP连接分为请求和响应，只能由客户端发起请求，服务端返回响应，如果客户端没有先发一点什么给服务端的话，服务端是没办法先给客户端发信息的，这就给一些更加复杂的要求增添了障碍：比如通过浏览器和别人聊天，需要接受来自服务器发给你的其他人的聊天的信息；或者是在浏览器上玩游戏，需要和服务器交换数据。这可以通过轮询来解决，但是这样还是不方便。 + +WebSocket是一个全新的协议，支持客户端和服务器的全双工通信，即客户端和服务器都可以主动地发消息，而且可以同时进行，而且是采用较小的数据帧格式，降低了网络开销，提高了数据传输速度。WebSocket在建立连接后保持长时间有效，不需要为每次消息发送重新建立连接，因此效率更高。 + +为了兼容HTTP协议，WebSocket也是监听80和443端口(HTTPS),握手采用了HTTP协议，通过升级协议来建立连接，如果可以升级，服务器会返回101状态码，升级连接. + +:::info 信息 + +对于WebSocket过于详细的介绍超出了本篇文章的内容，可以自行了解 + +::: + +##### Server-Sent Events +WebSocket是一个全新的协议，兼容性可能不是那么好，如果要求比较低的话，可以看一看Server-Sent Events,这个协议基于HTTP,允许服务器主动给客户端发送信息，当然也请自行了解。 + +#### 在Web上运行应用 +传统观念里，一个应用程序是在计算机上直接运行的，但是在介绍了上面的技术之后，我们可以想到，在Web上也是可以运行应用程序的，技术的难关已经扫除了，通过现代的高性能JavaScript运行时，可以提供类似于原生的运行速度，通过WebSocket,可以快速的更新内容，现在的HTML和CSS也足够强大，用户的机器性能也越来越强了，而且，开发Web应用可以直接使用成熟的Web技术栈，在浏览器中运行也更安全，以至于现在很多本地的应用也开始使用Web技术了(electron) + +##### WebAssembly +WebAssembly是最近新出现的技术，他允许开发者将C/C++ , Rust等原本的一些编译型语言编译成浏览器可以执行的字节码，使得在浏览器中也可以执行这些程序，目前也有一些使用WebAssembly的应用，可以去看看 + +## Web后端-是干什么的？ +前面用非常长的一段文字来介绍Web的发展历史，就是为了说明Web后端是干什么的，或者说，编写一个Web后端需要干什么？ + +如果你想写一个静态网站，那么简单的http服务器就可以满足你，不需要你手动写什么代码；如果你想写一个基于AJAX的服务（比如我们网维现在的报修系统），那么你需要设计好API,和前端沟通好序列化相关事项，或者是返回JSON信息什么的让前端处理，还是返回html让浏览器渲染;如果你想写一个WebSocket的Web应用那就要难一些了，可能需要掌握一些并发编程的知识才可以写出一个可以使用的服务 + +我们接下来的教程，将注重开发一个现代的AJAX后端服务，同时辅助提供一些静态文件托管的功能。 + + +### Web后端的组成 +一个Web后端主要由以下部分组成： +- 路由(router) +- 处理(handler) +- 数据库/ORM +- 鉴权 +- 模板(如果需要) + +详细的信息，请阅读下一篇文章：[Click Me](./基于HTTP的Web后端的组成) + +## 参考 +在读完这篇文章后，你可以去详细阅读这篇文档：https://developer.mozilla.org/zh-CN/docs/Learn/Server-side/First_steps/Introduction + +这里是关于HTTP协议的详细介绍：https://developer.mozilla.org/zh-CN/docs/Web/HTTP diff --git a/docs/devdocs/09-培训/02-Web后端/02-基于HTTP的Web后端的组成.md b/docs/devdocs/09-培训/02-Web后端/02-基于HTTP的Web后端的组成.md new file mode 100644 index 0000000..6df0b88 --- /dev/null +++ b/docs/devdocs/09-培训/02-Web后端/02-基于HTTP的Web后端的组成.md @@ -0,0 +1,77 @@ +# 基于HTTP的Web后端的组成 +一个基于HTTP的Web后端通常有以下部分组成: + +--- +- 路由系统(router) + +路由系统负责处理用户访问网页时的请求路径/方法，并转交给对应的处理者 + +--- + +- 处理者(handler) + +处理者负责处理用户的请求，读取用户在URI中的参数，和请求体中的内容（如果有）等，统称为上下文(Context),负责返回请求所对应的回应 + +有的系统还会继续细分，将业务层和接口层分开(这种情况下通常接口层是和路由功能合并的) + +--- + +_最低要求是这个，另外，通常一个后端系统还需要连接一个数据库:_ + +--- + +- 数据库 + +通常是兼容SQL协议的关系型数据库，负责存储后端所需要用到和产生的信息 + +_其实很多后端系统无非就是对数据库的增删改查(所谓的CRUD),可以说这些系统就是数据库的一层方便wrapper_ + +--- + +- 鉴权系统 + +通常，我们系统的内容不打算对互联网上的任何一个人开放，所以我们需要一些方法来验证访问者的身份 + +--- + +- 模板系统（optional） + +如果你打算通过后端渲染HTML返回到用户浏览器，那你需要一套模板来方便地将动态内容插入到模板里面返回给用户，如果是一个纯粹API的站点，还是想直接把工作甩给前端，你就可以不用配置模板 + +--- + +此外，还有一些外围的工作： + +- 反向代理 + +通常我们的Web后端服务不是直接暴露对外访问的，而是经过一层代理的转发，这样更加的安全，配置也更加简单，服务只需要监听本地端口 + +- 配置系统 + +你的系统需要读取配置，比如监听端口，数据库连接，还有其他服务的密钥等 + +- CI/CD + +自动化配置构建，部署，测试等工作，让你专注代码工作，而不用把心思过多地放在部署构建这些工作上面 + +## 路由 +### API设计 +#### 传统 +#### REST +#### GraphQL + +## handler +### 面向对象与模型 + +## 数据库 +### SQLite +### Postgre +### 选择数据库的各种考量 + +## 鉴权 +### Session +### JWT +### OAuth2.0 + +## 模板 +### Jinja2