From afc432298e1f51f55369be6bd21a47c3bb4153bb Mon Sep 17 00:00:00 2001 From: govolokatliai Date: Sun, 3 Nov 2024 14:38:48 +0800 Subject: [PATCH] =?UTF-8?q?Web=E5=90=8E=E7=AB=AF=E6=95=99=E7=A8=8B?= =?UTF-8?q?=EF=BC=9A=E4=BC=98=E5=8C=96=E4=BA=86=E8=AF=AD=E8=A8=80=EF=BC=8C?= =?UTF-8?q?=E8=AE=A9=E4=BB=96=E5=AF=B9=E6=96=B0=E6=89=8B=E6=9B=B4=E5=8A=A0?= =?UTF-8?q?=E5=8F=8B=E5=A5=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../02-Web后端/01-Web后端的简单介绍.md | 27 ++++++++++--------- 1 file changed, 15 insertions(+), 12 deletions(-) diff --git a/docs/devdocs/09-培训/02-Web后端/01-Web后端的简单介绍.md b/docs/devdocs/09-培训/02-Web后端/01-Web后端的简单介绍.md index dbfdd66..f903059 100644 --- a/docs/devdocs/09-培训/02-Web后端/01-Web后端的简单介绍.md +++ b/docs/devdocs/09-培训/02-Web后端/01-Web后端的简单介绍.md @@ -5,30 +5,32 @@ 进行Web后端开发，首先需要知道Web的一些概念，实际上，“后端”这个概念不是一开始就存在的，随着人们对互联网需求的不断复杂化，后端的概念才出现了，我们首先来了解Web的发展历史 ### 静态网页 -互联网最开始只有静态网页，所谓“静态”，指的是网页中的内容是完全固定的，在服务器端存储了内容固定的html,css，或者是其他的什么文件，用户访问网页，就是通过互联网查看这些固定的文件。在这种情况下，Web服务本质上更像是远程访问计算机上的某个文件夹. +互联网最开始只有静态网页，所谓“静态”，指的是网页中的内容是完全固定的，在服务器端存储了内容固定的html,css，或者是其他的什么文件，用户访问网页，就是通过互联网查看这些固定的文件。在这种情况下，你访问一个网站，从本质上更像是访问远端计算机上的某个文件夹 -例如，如果要建立一个网站，那就在你的电脑上安装一个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服务器（比如apache,nginx），在软件的设置里指定你电脑上的某个文件夹为网站的根文件夹，然后去买一个域名（网址的意思），把域名的DNS绑定到你电脑的IP地址上，那么其他人在浏览器上输入你的域名，就可以访问根文件夹下面的内容了。比如，在根文件夹下面放一个`index.html`,那访问域名时，浏览器就会默认显示这个文件的内容，可以在下面放一些图片，比如根文件夹下面有： +`/foo.jpg`和`/subfolder/bar.jpg`，那么别人在浏览器上面输入`http://yourdomain.com/foo.jpg`和`http://yourdomain.com/subfolder/bar.jpg`就可以访问到对应的文件。 + +这种方法很原始，但是如果需求不是很大的话，你也可以使用这种静态网页，你现在正在看的文章，其实就是一个静态的网页 这些访问都是通过HTTP协议来进行的，在这里，我们需要详细介绍HTTP协议，以及HTTP协议的方法： #### HTTP协议 -HTTP（HyperText Transfer Protocol，即超文本传输协议）是一个网络客户端（比如浏览器）和服务端之间沟通的协议，让浏览器可以对服务器上的某个文件进行操作（最常见，也是大家最熟悉的用途就是获取这个文件），我们上面举的例子，包括我们日常浏览网站，就是在获取服务器上面的内容(实际上HTTP协议可以做的不止这些，下面会讲到) +HTTP（HyperText Transfer Protocol，即超文本传输协议）是一个网络客户端（比如浏览器）和服务端（比如服务器，当然普通的电脑也可以）之间沟通的协议，让浏览器可以对服务器上的某个文件进行操作（最常见，也是大家最熟悉的用途就是获取这个文件，然后显示出来～），我们上面举的例子，包括我们日常浏览网站的本质，就是在获取服务器上面的内容(实际上HTTP协议可以做的不止这些，下面会讲到) 一个完整的HTTP通信包含了请求和回应,请求有客户端发起，回应是服务端返回给客户端 -###### HTTP的请求 +##### HTTP的请求 严谨地说，一个HTTP请求包含请求头(HTTP Request Header)和请求体(Request Body)，一个HTTP的请求头主要包含了： - 目标网站:资源存在的网站，例如`example.org` - URL,用于指定需要操作的是哪一个文件，例如`example.org/hahaha.txt` -- 方法，用于指定对URL指定的资源进行什么操作，比如访问这个文件 -- 自定义参数：前面说的URL和方法都是通过键值对的形式存在于请求头上的，作为请求头的参数（键值对就是形如`a=b`的表达式）你也可以自定义一些键值对在请求头里，这表现为附加在URL之后的一系列键值对，通过?开头，&分割，例如`example.org/hello.html?locale=zh-CN&custom=wuwuwu`,这就告诉服务器:两个参数：`locale=zh-CN,custom=wuwuwu`，这些参数是可选的，自定义的参数可以用于被后端解析，关于URL参数的话题我们在之后谈 -- cookie:cookie是服务器放在浏览器里的一些临时缓存，可以干一些事情，当然如果有的话也会上传的 +- 方法，用于指定操作，即对URL指定的资源进行什么操作，比如访问这个文件 +- 自定义参数：前面说的URL和方法都是通过键值对的形式存在于请求头上的，作为请求头的参数（键值对就是形如`a=b`的表达式）你也可以自定义一些键值对在请求头里，这表现为附加在URL之后的一系列键值对，通过?开头，&分割，例如`example.org/hello.html?locale=zh-CN&custom=wuwuwu`,这就告诉服务器:两个参数：`locale=zh-CN,custom=wuwuwu`，这些参数是可选的，自定义的参数可以用于被后端解析，现在不理解也没关系，关于URL参数的话题我们在之后谈 +- cookie:cookie是服务器放在浏览器里的一些临时缓存，可以干一些事情，当然需要有这个东西才会在请求头里带着，我们也以后再谈 -某些方法需要向服务器上传一些东西，请求体就是装载这些东西的 +对于某些方法，需要在请求时向服务器夹带一些东西，请求体就是装载这些东西的 -##### HTTP方法 +###### HTTP方法 HTTP方法定义了这个请求具体要对指定的文件做什么，其中： - GET:获取指定的资源 - POST:上传指定的资源 @@ -82,12 +84,13 @@ httpbin.org 这个网站可以让你试验HTTP协议的方法 AJAX与传统动态页面的不同点是：在获取新数据时，不是刷新全部的页面，而是让JavaScript操作页面的部分内容。同时，后端也不是返回html，而是返回一些可以被JavaScript理解的序列化数据（例如纯文本、XML,JSON等），前端的脚本根据这些数据，来操作用户的html + ##### 例子 比如，在浏览我们的wiki网站时（虽然我们的wiki是静态网页），你会发现页面的大部分元素都是重叠的，比如页面最上面的导航栏，sidebar,页脚等，样式也是一样的，在切换不同的页面时，每次获取html都要重新获取这些重复的部分，这样就造成了一些浪费，如果使用AJAX技术，那么只需要第一次打开网站的时候加载这些框架性的元素，然后再加载一个JavaScript脚本，点击sidebar的时候，就将那个文章的内容本身拿过来，然后替换掉原有的页面内容，这样就更加节省，这种部分更新页面内容，而不重新加载整个页面的技术，就叫做AJAX 再举一个例子,比如我们的报名系统有一个查询功能，如果输入的用户在数据库存在的话，返回这个用户的全部信息，如果不存在，那么要给用户显示一条错误信息，这种信息如果要单独给用户发送一个新页面的话，是很麻烦的，用户端的体验也不好，我们希望在按下查询按钮之后直接在原来的页面旁边显示服务器返回的结果，如果没有AJAX技术，那么我们只能把用户的当前页面重新发过去，但是把查询结果也放里面，因为传统没有JavaScript的网页没有办法对数据进行一些简单的操作，只是被动的渲染html.css文件，而AJAX技术就允许我们直接把返回的数据本身发送到客户端，而且发送的数据也不止局限于HTML,CSS,而可以是一个XML,JSON,或是直接返回状态码，让客户端脚本负责解析这些数据，并将这些数据变成浏览器其他部分可以直接渲染的文件 -当一个URL不是返回一个HTML数据，而是返回一些不是给用户本人准备的数据时，当这些路径不至于接受GET请求时，这些路径就和我们传统静态网站的URL代表一个文件时所表现的路径有所不同了 +当一个URL不是返回一个HTML数据，而是返回一些不是给用户本人准备的数据时，当这些路径不止于接受GET请求时，这些路径就和我们传统静态网站的URL，代表一个文件时所表现的路径有所不同了 这些后端路径不是给用户设计的，通过浏览器直接访问这些地方大概会返回一些用户难以读懂的代码，他们是给JavaScript,或者另一种程序设计的，这种路径就叫做web API，他们是两个程序通过HTTP交互的地方，而不是人机交互的界面，我们先举一个例子，再解释这个问题 @@ -125,7 +128,7 @@ AJAX技术在今天已经非常常用了，以至于很多人都意识不到他 ```HTML
-

提交成功

+

提交成功！你提交了：

姓名：小明

空闲时间：2023-11-25

手机号：10000000000