1
0
mirror of https://github.com/ZSCNetSupportDept/website.git synced 2025-10-28 17:05:03 +08:00

Web后端教程:优化了语言,让他对新手更加友好

This commit is contained in:
2024-11-03 14:38:48 +08:00
parent c249213cc6
commit afc432298e

View File

@@ -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协议
HTTPHyperText Transfer Protocol即超文本传输协议是一个网络客户端比如浏览器和服务端之间沟通的协议让浏览器可以对服务器上的某个文件进行操作最常见也是大家最熟悉的用途就是获取这个文件我们上面举的例子包括我们日常浏览网站就是在获取服务器上面的内容(实际上HTTP协议可以做的不止这些下面会讲到)
HTTPHyperText 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
<div id="json_responses">
<p id="json:status">提交成功</p>
<p id="json:status">提交成功!你提交了:</p>
<p id="json:submit.name">姓名:小明</p>
<p id="json:submit.freeday">空闲时间2023-11-25</p>
<p id="json:submit.phone">手机号10000000000</p>