mirror of
https://github.com/ZSCNetSupportDept/website.git
synced 2025-10-29 01:15:04 +08:00
Compare commits
129 Commits
build
...
505b5497c8
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
505b5497c8 | ||
|
|
59ae1bc18d | ||
|
|
745101a2c7 | ||
|
|
7b686abdb1 | ||
|
|
a877c1f646 | ||
|
|
e1b15adfa7 | ||
|
|
edfdc0845a | ||
|
|
8c00ae728a | ||
|
|
3f07c7efef | ||
|
|
35a60440c6 | ||
|
|
722ad2cef9 | ||
|
|
755322847f | ||
|
|
8136fab29e | ||
|
|
22271802e6 | ||
|
|
cd16809e7c | ||
|
|
44c1f68731 | ||
|
|
84e00aadf7 | ||
|
|
b7edc55f49 | ||
|
|
c34ca74f0f | ||
|
|
ce0ea699d6 | ||
|
|
5647e89b97 | ||
|
|
36b8b7eee5 | ||
|
|
18b6e3f474 | ||
|
|
9ec62ff431 | ||
|
|
ca1fc3a39c | ||
|
|
87635a59cd | ||
|
|
77680208b7 | ||
|
|
2308c75b4d | ||
|
|
92ae4a93d0 | ||
|
|
91b2352507 | ||
|
|
66d7e045b7 | ||
|
|
266a2976bb | ||
|
|
c80789134c | ||
|
|
a220cdeb19 | ||
|
|
a83651c6d1 | ||
|
|
fdcf2c95b1 | ||
|
|
855ac896d2 | ||
|
|
98c776306a | ||
|
|
a7b41cfdef | ||
|
|
bf34d1e8a7 | ||
|
|
c6a20958d8 | ||
|
|
b03bc3d5cf | ||
|
|
a3bf27d594 | ||
|
|
e1ac7d912b | ||
|
|
2a93fcba30 | ||
|
|
6dfa9dd9d5 | ||
|
|
6cbf6b7069 | ||
|
|
5db6d75710 | ||
|
|
94ef585baa | ||
|
|
813351c1c8 | ||
|
|
c61c133d7d | ||
|
|
ff217a3f34 | ||
|
|
cad1dc76c8 | ||
|
|
712307d43a | ||
|
|
0a3992fbf4 | ||
|
|
284e791494 | ||
|
|
50ea7aa5d6 | ||
|
|
f0af38c247 | ||
|
|
b27b2b7b2a | ||
|
|
afc432298e | ||
|
|
c249213cc6 | ||
|
|
af35ada10e | ||
|
|
124b80857b | ||
|
|
19ebcc67d4 | ||
|
|
1faabe5bc1 | ||
|
|
3f4bff2f66 | ||
|
|
755a0cd758 | ||
|
|
7a5d8a7ff0 | ||
|
|
325f5b906f | ||
|
|
48c28f77ba | ||
|
|
c1f35228c4 | ||
|
|
ff04048f76 | ||
|
|
1c114c9e85 | ||
|
|
84456e5555 | ||
|
|
473f6acaff | ||
|
|
f714652131 | ||
|
|
47468abf0b | ||
|
|
a64c802670 | ||
|
|
1b52179f48 | ||
|
|
816f1881f2 | ||
|
|
aa2c2e8048 | ||
|
|
6fc857408d | ||
|
|
44c49dc12d | ||
|
|
fe61443aeb | ||
|
|
0028075638 | ||
|
|
17fa5c0ef7 | ||
|
|
d7d37aae82 | ||
|
|
7dca52c7c3 | ||
|
|
c39062bd5b | ||
|
|
c46c0e2557 | ||
|
|
c5ac642a07 | ||
|
|
e73ba9a033 | ||
|
|
423389ba3a | ||
|
|
84ab795d91 | ||
|
|
417f379d40 | ||
|
|
b118d864e4 | ||
|
|
aef93ef489 | ||
|
|
305d7eeacc | ||
|
|
310bba836e | ||
|
|
86f0417974 | ||
|
|
5d4696a694 | ||
|
|
41168644a3 | ||
|
|
d540cb5e69 | ||
|
|
663b862518 | ||
|
|
21fd313a8f | ||
|
|
2acc8dd857 | ||
|
|
7c30251999 | ||
|
|
df46fdc697 | ||
|
|
efb40b9457 | ||
|
|
9984d64cd1 | ||
|
|
1bc4251a84 | ||
|
|
871ef8fc4d | ||
|
|
825ee2a9cb | ||
|
|
0abee86f13 | ||
|
|
e94a6d324a | ||
|
|
3982a1d033 | ||
|
|
ea2e26e58a | ||
|
|
9f5f53fa2e | ||
|
|
6ebb478433 | ||
|
|
c612403bc9 | ||
|
|
da83244cd1 | ||
|
|
0d12b107a8 | ||
|
|
8e6e04755e | ||
|
|
322c652fa6 | ||
|
|
1048acd656 | ||
|
|
fe06ca7255 | ||
|
|
33ac26100f | ||
|
|
4f6851119a | ||
|
|
a4b4229ecf |
5
.gitignore
vendored
5
.gitignore
vendored
@@ -18,3 +18,8 @@
|
|||||||
npm-debug.log*
|
npm-debug.log*
|
||||||
yarn-debug.log*
|
yarn-debug.log*
|
||||||
yarn-error.log*
|
yarn-error.log*
|
||||||
|
|
||||||
|
/docs/wiki/gitignore
|
||||||
|
|
||||||
|
|
||||||
|
/draft
|
||||||
|
|||||||
29
README.md
29
README.md
@@ -1,8 +1,29 @@
|
|||||||
# zsc网维开发组网站
|
# zsc网维开发组网站
|
||||||
|
|
||||||
这里是开发组的网站源代码仓库,采用Docusaurus框架,欢迎issue和PR
|
这里是开发组的网站源代码仓库,采用Docusaurus框架,欢迎issue和PR
|
||||||
|
|
||||||
|
目前,网站主要托管新wiki和开发组文档,还可以发布一些文章。如果想编写内容的话请联系开发组组长。
|
||||||
|
## 依赖
|
||||||
|
`nodejs >= 18.0`
|
||||||
## 构建
|
## 构建
|
||||||
不同于传统的静态网页生成器,本项目不需要额外加装构建工具,生成器和内容本身加起来就是一个单独的react.js应用,所以理论上你只需要把这个repo pull到本地,再用npm构建即可,运行`npm run docusaurus`来运行框架本身提供的一些脚本
|
|
||||||
## 内容发布
|
在终端输入以下命令:
|
||||||
参见文档
|
|
||||||
|
``` shell
|
||||||
|
|
||||||
|
git clone https://github.com/ZSCNetSupportDept/website
|
||||||
|
|
||||||
|
cd website
|
||||||
|
|
||||||
|
npm install
|
||||||
|
|
||||||
|
npm run docusaurus build
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
然后在`build`文件夹下就出现了编译过后的结果,可以进行下一步的部署
|
||||||
|
|
||||||
|
如果你有直接push本仓库的权限,你可以运行`npm run docusaurus deploy`自动构建并部署静态网站;在构建之后,还会自动将结果推送到仓库的`build`分支上,服务器部署了脚本自动抓取这个分支的内容来更新网站\
|
||||||
|
https://zscdev-demo.pages.dev 是本仓库的一个demo网站,基于master构建而不是build
|
||||||
## 关于
|
## 关于
|
||||||
若有问题,可以联系开发组组长
|
任何问题,请联系开发组组长~^_^~
|
||||||
|
|||||||
@@ -1,2 +1,3 @@
|
|||||||
# Hello World!
|
# Hello World!
|
||||||
|
<!--truncate-->
|
||||||
**This is a Test post**
|
**This is a Test post**
|
||||||
|
|||||||
6
blog/2024-08-18-网维联系方式.md
Normal file
6
blog/2024-08-18-网维联系方式.md
Normal file
@@ -0,0 +1,6 @@
|
|||||||
|
# 你可以在哪里找到开发组?
|
||||||
|
<!--truncate-->
|
||||||
|
目前,开发组成员可以通过如下的方式联系:
|
||||||
|
- 开发组成员可以通过github上的[论坛](https://github.com/ZSCNetSupportDept/forum/discussions)交流(仅限内部访问)
|
||||||
|
- 开发组有一个QQ群:961797864
|
||||||
|
- 可以联系组长,QQ:2597760847
|
||||||
28
blog/2024-08-19-ComIntRep的使用教程.md
Normal file
28
blog/2024-08-19-ComIntRep的使用教程.md
Normal file
@@ -0,0 +1,28 @@
|
|||||||
|
# ComIntRep的使用教程
|
||||||
|
|
||||||
|
## 介绍
|
||||||
|
如果是操作系统本身的问题导致了用户没法上网的话,传统的办法是先确定故障出现在哪里,然后去修理对应的地方,在这个过程中,难免要接触到修改注册表,协议栈,hosts这类复杂的名词..
|
||||||
|
<!--truncate-->
|
||||||
|
而ComIntRep就是一款一键修复windows网络的神器,全称`"Complete Internet Repair"`,他的功能有:
|
||||||
|
- 重置 Internet 协议(TCP/ IP 协议)
|
||||||
|
- 修复 Winsock
|
||||||
|
- 更新互联网连接
|
||||||
|
- 刷新 DNS 解析器缓存
|
||||||
|
- 刷新 ARP 缓存
|
||||||
|
- 修复 Internet Explorer
|
||||||
|
- 清除 Windows 更新历史记录
|
||||||
|
- 修复 Windows 自动更新
|
||||||
|
- 修复的 SSL / HTTPS 加密
|
||||||
|
- 重置代理服务器配置
|
||||||
|
- 重置 Windows 防火墙配置
|
||||||
|
- 恢复默认的 hosts 文件
|
||||||
|
- 修复查看工作组计算机\
|
||||||
|
这款软件可以帮我们很大程度上节省修网的时间,非常推荐使用
|
||||||
|
## 使用
|
||||||
|
勾选你要修复的部分,然后点击`Go!`,就可以了,系统会自动重置你选择那部分的网络配置,修复完毕后,重启电脑即可\
|
||||||
|
官方推荐在修复前备份操作系统,点击`Maintennace`->`System_Restore`,然后点击“配置”,“启用系统保护”,然后为C盘创建一个还原点,就可以修复了
|
||||||
|
## 参考
|
||||||
|
https://zhuanlan.zhihu.com/p/27196344 \
|
||||||
|
<!-- https://rizonesoft.com/downloads/complete-internet-repair/ \ -->
|
||||||
|
|
||||||
|
|
||||||
78
blog/2024-09-27给纯新手的网维快速入门指南.md
Normal file
78
blog/2024-09-27给纯新手的网维快速入门指南.md
Normal file
@@ -0,0 +1,78 @@
|
|||||||
|
# 给纯新手的网维快速入门指南
|
||||||
|
许多新进网维的小伙伴们都可能对我们的日常工作一脸懵:网维是干什么的,我们到底在修什么?其他人说的交换机,主线到底是什么?
|
||||||
|
|
||||||
|
甚至有很多正式成员都搞不明白这个问题,为了提升大家的业务水平和网络技术,我们特意编写了这份指南,希望能对你有些许的用处。
|
||||||
|
|
||||||
|
<!--truncate-->
|
||||||
|
|
||||||
|
## 网络
|
||||||
|
|
||||||
|
网维,那不就是修网络的吗?但是,网络是什么?他究竟是什么样的?为什么我可以访问到遥远彼方的内容(网页,游戏,等)?
|
||||||
|
|
||||||
|
首先,我们需要知道,计算机中的一切数据,都是一串二进制数字,也就是许多的01010101101010.........,网络的本质,就是在计算机之间传输这些数字,如何进行传输呢?通常是使用物理现实的两种状态来表示0和1这两个数字。
|
||||||
|
|
||||||
|
比如,一个电路(简单点说,有一个电灯),电路闭合,电灯亮,我们定义这样的状态是1,反之,电路断开,电灯暗,我们定义这样的状态为0,我们让计算机监听这个电路的状态,通过电路断开闭合状态不断的超高速的变化,就可以传递01010101这些数字来进行信息的传递。
|
||||||
|
|
||||||
|
:::info 信息
|
||||||
|
|
||||||
|
这里有我们写的一篇科普文章,介绍了网线的一些概念:[Click Me](/docs/wiki/基础知识/科普/网线是什么)
|
||||||
|
|
||||||
|
:::
|
||||||
|
|
||||||
|
不一定需要电路这种介质,还可以是无线电波,例如,定义电波幅度大于某个值为1,小于某个值为0,或者大于某个频率为0,小于某个频率为1,让计算机接受这样的电波并解读,也可以传递信息。
|
||||||
|
|
||||||
|
其实,简单地说,前者就是以太网(有线网)本质,网线本质上就是电线,里面是以高频率断断续续的电流,把电线接到计算机里,计算机就可以依据电路的变化情况来获取信息.而后者则是无线网(Wi-Fi,移动通信技术等)本质,他们通过调制电磁波来传递信息。
|
||||||
|
|
||||||
|
### 网维
|
||||||
|
|
||||||
|
网维主要修的是学生宿舍的以太网,在每个宿舍的每个人的桌子前,都有一个网线端口,用户将网线插入端口和计算机,即可连接到宿舍的楼层线路,端口后面是墙线,意思是它是埋在墙里的,我们一般情况下没法动他
|
||||||
|
|
||||||
|
依据宿舍片区的不同,墙线可能直接通去了机房,也有可能是连接到了宿舍的路由器(交换机/光猫),经过这一层转发,再前往机房。
|
||||||
|
|
||||||
|
:::tip 提示
|
||||||
|
|
||||||
|
你可以在片区信息中查看各个片区的具体结构
|
||||||
|
|
||||||
|
:::
|
||||||
|
|
||||||
|
路由器是什么?交换机和光猫又是什么?这个问题如果专业地展开来讲有点难懂,对于新手来说,你可以简单的理解为他们都是中转站,电线在这里经过出去的电线继续信息的传递,而不是直接一根线连到网络上去
|
||||||
|
|
||||||
|
无线路由器(或者有路由功能的光猫)还可以让用户通过无线方式接入线路,比如,如果你想坐高铁,从中山坐到广州南,然后再从广州南做到其他地方,但是没必要全程坐高铁,你可以打车,坐地铁到广州南,然后再坐高铁。这里一样的,不管有线还是无线的接入,在网关(我们对这些设备的统称)都是转换成有线再出去,
|
||||||
|
|
||||||
|
出去是去哪里呢?在宿舍的结构中,是去了机房(或者说,弱电井),宿舍去机房的线就叫做主线(只有通过网关中继的地方才会有主线的概念,直连机房的就直接是墙线)
|
||||||
|
|
||||||
|
线路到了机房,一般会接入一个叫做配线架的设备,这个也是一个中继器,方便我们维修(如果是线路坏了的话),配线架的端口总是成对的,有一个进口就会有出口,一般进口都是不用我们去管的,线路经过出口出来,连接到交换机上,我们网维的工作一般追踪到这里,再往后的问题就不是我们的职责了,
|
||||||
|
|
||||||
|
交换机有运营商的区别,用户需要接到他宽带开通的运营商对应的交换机上,通过一类叫做“拨号”的协议来进行认证,向运营商用自己的账号请求登录,请求运营商允许联网,这样也方便运营商计费(和学校监控!),交换机通常都是集成了光纤功能,在这里将电路的信号调制成光的信号(这也是一种传输0101010的方式!),然后接入运营商的网络,访问全国,和全球的互联网
|
||||||
|
|
||||||
|
## 维修
|
||||||
|
|
||||||
|
上面就是我们学校宿舍网络的结构了,网维的工作,本质就是维护这样的结构正常运行,在这些环节中,每一个都有可能出错,一般来说,我们最常见的有两种错误:硬件(物理层)错误(651)和软件错误(691).
|
||||||
|
### 651错误
|
||||||
|
硬件错误,通常在拨号时会给出`651`错误,本质上,这种错误就是物理连接出现了问题,要么是墙线老化接触不良了,要么是主线出现了问题,要么是交换机,配线架没有接好,要么是网线问题,对于这种问题,我们通常通过寻线对线器来解决,排查问题
|
||||||
|
|
||||||
|
排查问题一般都是调试可能出错的因素,例如,你用一根确定了的是好的网线直连端口对线没问题,但是用户的线连接端口就有问题,那么就是用户的线有问题
|
||||||
|
|
||||||
|
:::info 信息
|
||||||
|
|
||||||
|
关于更多651错误,请查阅wiki相关页面,也请查阅`技能`板块中`对线`和`寻线`的条目
|
||||||
|
|
||||||
|
:::
|
||||||
|
|
||||||
|
### 691错误
|
||||||
|
软件错误,通常会在拨号时给出`691`错误,本质上,这意味着物理连接是通的,但是运营商那边拒绝的用户的登录,有几种可能:
|
||||||
|
1. 交换机接错了,用户是某个运营商,你接到了其他的运营商的交换机,当然报错喽~
|
||||||
|
2. 短时间内过多的登录,被运营商拉黑了,需要稍等一会子
|
||||||
|
3. 宽带欠费,停机
|
||||||
|
4. 账号密码错误
|
||||||
|
5. 运营商会绑定MAC地址来限制多设备,在更换电脑或者转接器等设备时会遇到这样的情况,可以打电话给运营商要求所谓的“解绑刷新”,也可以组长
|
||||||
|
|
||||||
|
:::info 信息
|
||||||
|
|
||||||
|
关于更多691错误,请查阅wiki的相关页面,和相应的文章
|
||||||
|
|
||||||
|
:::
|
||||||
|
|
||||||
|
## 总结
|
||||||
|
|
||||||
|
这里只是一篇简要的指南,我们在这里介绍了网络的基本概念,让你对你所要维修的系统有一个大概的了解,你可以继续去看wiki中的相关条目,来进一步扩充你的知识,希望你在网维的时光过得愉快!
|
||||||
27
blog/2025-5-9-女生宿舍的网络结构解释.md
Normal file
27
blog/2025-5-9-女生宿舍的网络结构解释.md
Normal file
@@ -0,0 +1,27 @@
|
|||||||
|
# 女生宿舍的网络结构解释
|
||||||
|
这里有几张女生宿舍网络结构的图解
|
||||||
|
<!--truncate-->
|
||||||
|
## 概述
|
||||||
|
请观察这张图片:
|
||||||
|
|
||||||
|

|
||||||
|
|
||||||
|
这是朝晖的网络结构,我们以它举例来说:
|
||||||
|
|
||||||
|
首先需要知道,用户的电脑通过自己的网线接到端口上,才可以连上网络
|
||||||
|
|
||||||
|
端口的后面,是被我们称为“墙线”的网线通路,顾名思义,它们是嵌在墙里的(这样说不准确,但是你可以这么认为),我们没有办法对墙线做手脚,要是墙线坏了,就只能上报,墙线的另一端是楼层机房的配线架
|
||||||
|
|
||||||
|
配线架起到一个中继器的作用,配线架的背面有很多入口,正面有很多出口,配线架会把入口的信号原样输出给出口,入口连接的是墙线(也就是用户端口),出口连接的是交换机
|
||||||
|
|
||||||
|
端口不直接连接到交换机,而是首先经过配线架,有很多好处,这样如果配线架到交换机的那一段网线出现了问题,就不用换掉整个墙线,而是直接把出口的线直接换掉;这样也方便我们换线(比如用户用的是电信,毕业了之后新生办的是移动宽带);另外,配线架还有避免信号衰减的功能
|
||||||
|
|
||||||
|
端口首先连接到配线架,配线架再连接到楼层交换机;楼层交换机还会连接到楼栋交换机和核心交换机,不过就不是我们网维需要负责的了。
|
||||||
|
|
||||||
|
朝晖片区的配线架和交换机放在同一个机柜,但是香晖片区的就不是了,香晖片区的机房结构类似如下:
|
||||||
|

|
||||||
|
:::tip 提示
|
||||||
|
|
||||||
|
本文持续更新中
|
||||||
|
|
||||||
|
:::
|
||||||
167
blog/Web的历史1️⃣-HTTP.md
Normal file
167
blog/Web的历史1️⃣-HTTP.md
Normal file
@@ -0,0 +1,167 @@
|
|||||||
|
# Web的历史1️⃣-HTTP
|
||||||
|
<!-- truncate -->
|
||||||
|
|
||||||
|
*注:这些文章本来是打算作为开发组后端培训文本的开篇而写的,但是我发现文章的内容过于复杂且有点离题,所以稍微修改了一下单独作为3篇独立的文章发布。*
|
||||||
|
|
||||||
|
*本文章的许多图片都直接来自 [MDN](https://developer.mozilla.org),在这里先感谢图片的创作者。*
|
||||||
|
|
||||||
|
## 网络的起源
|
||||||
|
人们最初发明网络的目的很简单:在不同的电脑之间传输文件。那个时候没有U盘,也没有蓝牙,计算机领域的前辈们必须从头设计一个高效的传输文件的办法。
|
||||||
|
|
||||||
|
假如我们的电脑上有一个文件`example.docx`,放在我们电脑的文件夹`documents`里面,我们如何使用最原始的方法把它传递给另外一台电脑呢?
|
||||||
|
|
||||||
|
早期的程序员编写了一类叫做"HTTP服务器"的程序,程序的功能是选择电脑上的一个文件夹,将这个文件夹暴露在互联网上让所有人操作。这个文件夹叫做HTTP服务的“根目录”。
|
||||||
|
|
||||||
|
要使用这个程序,我们还要先给电脑分配一个IP地址,IP地址是一台电脑在互联网上的唯一标识,假如我们电脑的的IP地址是`123.45.67.89`。我们在这台电脑上启动一个HTTP服务程序。在程序的设置里指定根目录是我们存放文件的文件夹`documents`。
|
||||||
|
|
||||||
|
前面说过,这个HTTP服务程序的作用是把你电脑上一个指定的文件夹(我们称为“根目录”)暴露在互联网上,所有人都可以下载这个文件夹下的文件。于是这个时候,我们打开随便另一台电脑(前提是有网),在浏览器地址栏中输入`http://123.45.67.89/example.docx`,这时候就会发生神奇的事情:浏览器会提示你下载`example.docx`,这样,文件就从一台电脑传输到了另一台电脑。
|
||||||
|
|
||||||
|
假如`documents`文件夹下面还有另外一个文件`hi.txt`,那么当你在浏览器地址栏中输入`http://123.45.67.89/hi.txt`时,你就会发现浏览器显示了`hi.txt`这份文件的内容,因为浏览器可以直接显示`txt`文件,而不能直接显示`docx`文件。
|
||||||
|
|
||||||
|

|
||||||
|
> *IIS是Windows官方的HTTP服务器,有着图形化的配置界面,其它大部分HTTP服务器都需要通过命令行和配置文件进行配置。*
|
||||||
|
|
||||||
|
## HTTP协议
|
||||||
|
|
||||||
|
等等,刚才所讲的操作为什么能发生呢?当我在浏览器中输入网址并按下回车键的时候,这一切的背后到底发生了什么?
|
||||||
|
|
||||||
|
我们之前提到了,要把电脑中的一个文件夹暴露在网络上供所有人访问,就需要启动一个"HTTP服务程序",这个HTTP是什么呢?
|
||||||
|
|
||||||
|
HTTP协议,是`HyperText Transfer Protocol`的缩写,即"超文本传输协议"。是通过网络在电脑之间进行文件传输的默认协议。进行HTTP文件传输的双方,一个称之为”客户端“(Client),一个称之为"服务端"(Server)。
|
||||||
|
|
||||||
|
我们刚才就是在我们的电脑上部署了HTTP服务端,而浏览器就是我们通信中的客户端。浏览器首先对服务器发送信息(行话叫做"请求"),要求获取某个文件;然后服务器返回这个文件(行话叫做“响应”)。
|
||||||
|
|
||||||
|
一次完整的HTTP通信总是由客户端请求(Request)和服务端响应(Response)组成。在HTTP协议中,总是由客户端先发起一次HTTP请求,然后由服务端返回这次请求的响应,这样才是一次完整的HTTP通信。
|
||||||
|
|
||||||
|
实际上,HTTP协议中的“客户端”不仅仅是指浏览器,但我们通常用的浏览器确实就是最常见的HTTP客户端。但其实像curl这样的命令行工具,或者手机APP,或者是浏览器里的JavaScript代码,当它们向服务器请求数据时,也可以被称作客户端。
|
||||||
|
|
||||||
|

|
||||||
|
|
||||||
|
|
||||||
|
实际上,HTTP协议不仅可以获取一个文件(就像我们所做的),也可以向服务端上传一个文件,或是修改某个文件的内容...
|
||||||
|
|
||||||
|
一次HTTP通信要进行什么操作(获取or上传等),由HTTP请求中的“方法”指定,方法是"请求头"的一部分。
|
||||||
|
|
||||||
|
"请求头"是什么?别着急,下面我们介绍HTTP协议的具体内容:
|
||||||
|
|
||||||
|
### 请求
|
||||||
|
前面说了,HTTP通信总是以客户端发送请求开始,服务端是没法主动给客户端发信息的。
|
||||||
|
|
||||||
|
一个HTTP请求包含请求头(HTTP Request Header)和请求体(Request Body),请求头主要包含了:
|
||||||
|
|
||||||
|
- 协议版本:告诉服务器,这次交流,要使用哪个版本的HTTP协议
|
||||||
|
- 目标:要访问哪个电脑,例如刚才的`123.45.67.89`
|
||||||
|
- URI:要操作哪个文件,例如`example.docx`,IP地址或者网址后面的内容就是URI了
|
||||||
|
- 方法:要对这个文件做什么,比如获取这个文件的内容,还是在服务器上创建这个文件
|
||||||
|
- 自定义参数:除了上面的信息,客户端还可以发送一些额外的内容给服务端,这些内容总是以`Key=Value`的形式存在。在正常的URI后有一个`?`,表示参数的开始,`&`表示不同参数之间的分隔。
|
||||||
|
|
||||||
|
例如:`http://123.45.67.89/example.docx?compressed=true&method=gzip`
|
||||||
|
|
||||||
|
这就是让服务器压缩发来的文件,使用gzip压缩。
|
||||||
|
|
||||||
|
|
||||||
|
参数的内容不是HTTP标准,也就是服务端如何理解参数,完全靠程序员写的代码。如果程序员没有设置,那么参数就毫无用处。
|
||||||
|
|
||||||
|
#### HTTP方法
|
||||||
|
HTTP方法定义了这个请求具体要对指定的文件做什么,其中:
|
||||||
|
- `GET`:获取指定文件的内容。
|
||||||
|
- `POST`:上传一个文件,内容放在请求体(下面会讲到)。
|
||||||
|
- `DELETE`:删除某个文件。
|
||||||
|
|
||||||
|
其实这里还有一些方法的,我们以后讲。
|
||||||
|
|
||||||
|
我们日常使用浏览器,比如在地址栏中输入`baidu.com`,其实就是在对这个地址做GET请求,浏览器会把你的输入内容自动补全成 `GET http://www.baidu.com/` 这一HTTP请求
|
||||||
|
|
||||||
|
:::tip 提示
|
||||||
|
|
||||||
|
打开浏览器的F12开发者菜单,选择"Network",可以看到你在访问这个网站时与服务器所进行的所有HTTP请求
|
||||||
|
|
||||||
|
:::
|
||||||
|
|
||||||
|
在浏览器地址栏里直接输入网址,默认就是发送GET请求。你可能会好奇,POST这些请求是怎么发出去的呢?这通常是由网页中的JavaScript代码在背后发送的。我们在之后的内容会讲到这一点。
|
||||||
|
|
||||||
|
|
||||||
|

|
||||||
|
|
||||||
|
#### 请求体
|
||||||
|
|
||||||
|
对于某些方法,需要在请求时向服务器夹带一些东西(比如POST需要你带上新文件的内容),请求体就是装载这些东西的.
|
||||||
|
|
||||||
|
像GET请求就没有请求体,因为GET请求不需要夹带信息.
|
||||||
|
|
||||||
|
:::tip[提示]
|
||||||
|
|
||||||
|
正常地使用浏览器,是没法做出GET外的请求的,但是浏览器在控制台里可以自定义请求,以`Firefox`为例,在F12的`Network`一栏中点`New Request`(有一个加号)就可以发送自定义请求。`curl`等HTTP命令行工具也可以发送请求.
|
||||||
|
|
||||||
|
:::
|
||||||
|
|
||||||
|
### 响应
|
||||||
|
回应也分为回应头和回应体,回应头主要包含:
|
||||||
|
- 状态码:针对请求的回应有对应的状态,比如,如果GET请求没有问题,成功返回的话就返回`200 OK`状态码,如果找不到请求里对应的文件就会返回`404 Not Found`
|
||||||
|
- 内容格式:向浏览器说明回应体(若有)是什么格式的,文本文件的编码设置等,比如html文件?图片?docx文档?有没有被压缩?如果有,压缩格式?这决定了浏览器如何对待这些文件
|
||||||
|
- 内容的大小:返回所请求资源的大小(若有)
|
||||||
|
|
||||||
|
回应体就是包含了回应的主体内容了,如果是GET请求的话,那么就回应了所GET文件的内容,如果是其他请求的话,可能也会没有回应体,具体看使用的方法
|
||||||
|
|
||||||
|

|
||||||
|
|
||||||
|
### 例子
|
||||||
|
`GET`方法从服务器获得一个资源,我们在浏览器的地址栏输入一个地址时,就是在对这个URI做`GET`请求,前面的例子也是通过`GET`方法来进行的。
|
||||||
|
|
||||||
|
比如,发送`GET http://developer.zsxyww.com/test/test.txt`,那么就会把我们服务器根目录上`test`文件夹里面的`test.txt`这个文件发过来
|
||||||
|
|
||||||
|
`POST`方法向服务器上传一个资源,例如使用某个客户端发送`POST http://example.org/sheet.xlsx`,在request body里面带上你的这个文件,那么`example.org`网站的根目录下就会多出一个叫做`sheet.xlsx`的文件
|
||||||
|
|
||||||
|
|
||||||
|
除了上面介绍的这些方法,还有`DELETE`,`PATCH`等方法,分别对应了删除,修改一个资源,你可以在你的电脑上通过`curl`等程序,或者通过浏览器控制台来进行常规的`GET`之外的方法请求
|
||||||
|
|
||||||
|
:::tip[提示]
|
||||||
|
|
||||||
|
httpbin.org 这个网站可以让你试验HTTP协议的方法
|
||||||
|
|
||||||
|
:::
|
||||||
|
|
||||||
|
:::info[HTTPS]
|
||||||
|
|
||||||
|
HTTP在网络上是明文传输的,也就是说客户端和服务器之间的每个网络节点,每个人都可以看到。这显然不方便隐私,所以人们发明了HTTPS,也就是把HTTP的正文加密了,HTTPS可以说是当今互联网的基石,有了HTTPS,我们才能放心地在网上输入密码,用银行卡付款等。
|
||||||
|
|
||||||
|
:::
|
||||||
|
|
||||||
|
## 网页与HTML
|
||||||
|
|
||||||
|
随着网络的发展,人们发现互联网的潜力远不止于传输文件。特别是浏览器的普及,人们希望能直接在网页上展示丰富的信息,而不只是把浏览器当作下载工具。前面我们说过了,浏览器可以直接展示txt文件,但是最大的问题是,txt文件是没有样式的。
|
||||||
|
|
||||||
|
比如:txt无法设置字体大小和颜色,无法加粗、倾斜文字,无法创建表格和列表,无法插入图片和链接。这些都是txt的局限。
|
||||||
|
|
||||||
|
为了解决这个问题,人们发明了HTML(HyperText Markup Language),就是“超文本标记语言”,HTML的核心思想是:在普通文本中加入特殊的标记,告诉浏览器如何显示内容。
|
||||||
|
|
||||||
|
比如`<i>你好~</i>`就是指示浏览器以斜体的方式显示`你好~`这段文字。你可以用系统自带的笔记本像打开txt文件一样打开HTML文件,只不过浏览器默认是加载渲染之后的界面而不是原始的HTML。
|
||||||
|
|
||||||
|
除HTML之外,人们还发明了CSS与HTML搭配使用,CSS可以对样式做更复杂高级精细的控制,这里就不细说了
|
||||||
|
|
||||||
|
回到我们的主题,不管使用的是什么方法,操作的是什么文件,HTTP协议传输的对象都是一些固定静态的文件,其内容在服务器上是固定不变的(除非手动修改),这样的网页称为静态网页。
|
||||||
|
|
||||||
|
静态网页中,所有用户看到的内容都相同,内容不会根据用户行为动态变化,服务器只负责传输文件,不进行复杂计算。
|
||||||
|
|
||||||
|
我们的wiki就是静态网页,在服务端上都对应着HTML页面,只不过加了非常多的样式显得很高级。
|
||||||
|
|
||||||
|
很多常见的网站(如企业官网、技术文档、个人博客等)都是静态网页,虽然看起来很精美,但本质上就是经过精心设计的HTML和CSS文件。
|
||||||
|
|
||||||
|

|
||||||
|
|
||||||
|
:::info
|
||||||
|
|
||||||
|
这是三篇系列文章中的第**1**篇
|
||||||
|
|
||||||
|
点击以跳转:
|
||||||
|
|
||||||
|
**HTTP**(你在看的文章)
|
||||||
|
|
||||||
|
[动态网页](/blog/Web的历史2️⃣-动态网页)
|
||||||
|
|
||||||
|
[Web应用](/blog/Web的历史3️⃣-Web应用)
|
||||||
|
|
||||||
|
:::
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
286
blog/Web的历史2️⃣-动态网页.md
Normal file
286
blog/Web的历史2️⃣-动态网页.md
Normal file
@@ -0,0 +1,286 @@
|
|||||||
|
# Web的历史2️⃣-动态网页
|
||||||
|
<!-- truncate -->
|
||||||
|
|
||||||
|
上篇文章我们已经了解了静态网页是如何工作的,但是这样的网页是不能满足大家对互联网的需求的。举例子来说:你访问b站首页`bilibili.com`,每次刷新,首页上显示给你的视频都不一样,不同的人访问这个首页,显示的也不一样,按理说大家都是访问一个网址,背后应该都是同一个文件,为什么每个人都不一样呢?这种功能是如何实现的?
|
||||||
|
|
||||||
|
淘宝上有数不清的商品在售卖,如果淘宝为每一个商品都在服务器目录下面创建一个html文件,好让大家通过访问`http://taobao.com/someproduct.html`来查看商品信息,那这个工作量就非常大了。而且,这样的网页,基本上没有交互的功能:我们希望用户可以点击按钮就能购买商品,商家在网页后台上操作就能上传商品。这种功能应该如何实现呢?
|
||||||
|
|
||||||
|
暂时先不考虑这些高级的问题,让我们先从最基础的讲起:
|
||||||
|
|
||||||
|
## 服务器端内嵌(SSI)
|
||||||
|
|
||||||
|
如果你想向网站中插入动态内容,SSI是最简单,最直接的办法,比如我们的wiki有许多页面,但是每个页面都有一些共同的元素:页面头部的导航栏,左侧的列表,页脚等。如果为每个页面都复制一份相同的HTML的话,那就太麻烦了,有没有什么办法,可以使HTML一次编写,到处渲染呢?
|
||||||
|
|
||||||
|
SSI(Server Side Includes)就是满足这种需求的一个HTML宏语言。它有点类似于C语言的`# include`宏:
|
||||||
|
|
||||||
|
假设这是我们首页的HTML:
|
||||||
|
|
||||||
|
```html
|
||||||
|
<h1>wiki</h1>
|
||||||
|
<!--#include file="navbar.html" -->
|
||||||
|
<div class="article"></div>
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
假如`navbar.html`的内容如下:
|
||||||
|
|
||||||
|
```html
|
||||||
|
|
||||||
|
<tr>
|
||||||
|
<td>教程</td>
|
||||||
|
<td>文档</td>
|
||||||
|
<td>高级</td>
|
||||||
|
<td><a href="github.com/zscnsd/website">Github</a></td>
|
||||||
|
</tr>
|
||||||
|
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
那么用户访问我们首页时就会看到:
|
||||||
|
|
||||||
|
```html
|
||||||
|
|
||||||
|
<h1>wiki</h1>
|
||||||
|
// highlight-start
|
||||||
|
<tr>
|
||||||
|
<td>教程</td>
|
||||||
|
<td>文档</td>
|
||||||
|
<td>高级</td>
|
||||||
|
<td><a href="github.com/zscnsd/website">Github</a></td>
|
||||||
|
</tr>
|
||||||
|
// highlight-end
|
||||||
|
<div class="article"></div>
|
||||||
|
|
||||||
|
|
||||||
|
```
|
||||||
|
如果导航栏的界面有变化,那么只需要修改`navbar.html`即可,不用修改网站中的每一个页面。
|
||||||
|
|
||||||
|
没错,SSI的功能就是简单地把指定的内容插入进HTML里。这对一些重复的元素(例如每个网页的页头,页脚,侧边栏)还有一些需要更新的内容很实用。
|
||||||
|
|
||||||
|
当然,SSI并没有解决动态网页的问题,它只是把需要手动更新的地方单独拿了出来,使维护静态网站更容易,所以程序员们又发明了CGI技术。
|
||||||
|
|
||||||
|
## CGI
|
||||||
|
**CGI(Common Gateway Interface)** 是第一个真正实现动态网页的技术,它允许Web服务器执行外部程序来生成网页内容。
|
||||||
|
|
||||||
|
CGI的工作原理是:当用户访问特定URL时,服务器不是返回静态文件,而是执行一个程序,并将程序的输出作为HTTP响应返回给用户。
|
||||||
|
|
||||||
|
(举个天气预报的例子):
|
||||||
|
|
||||||
|
Web服务器通常会把能执行的程序(除开静态文件)放在一个叫cgi-bin的特殊目录里。假设我们服务器的这个文件夹里有一个查询天气的Python程序`weather.py`,当用户访问`http://example.org/cgi-bin/weather.py?city=中山&date=2025-06-25`时,我们的HTTP服务程序会自动**执行**放在路径中`/cgi-bin/weather.py`的这个Python脚本,并且将客户端的请求头和请求体传递给脚本;
|
||||||
|
|
||||||
|
脚本解析请求头中`city=中山&date=2025-06-25`这个参数,在数据库中查询这个日期的天气,然后返回一个HTML给HTTP服务程序,再把这个HTML返回给客户端。
|
||||||
|
|
||||||
|
如果没有设置CGI,那么服务程序只会返回给客户端`TodayWeather.py`这个脚本文件的代码本身。
|
||||||
|
|
||||||
|
其实,CGI是一个接口格式,它定义了我们编写程序与HTTP服务程序之间如何交互。通常,HTTP服务程序给CGI程序的输入就是环境变量,输出就是标准输出。
|
||||||
|
|
||||||
|
CGI的巧妙之处在于,服务器不是用什么复杂的方式和脚本沟通,而是把请求信息(比如URL参数里的城市)变成程序很轻松就能读到的环境变量。而程序也不需要复杂的操作进行IO,它只需要把生成的HTML代码打印出来,服务器就会自动收集这些打印的内容,然后发回给用户的浏览器。
|
||||||
|
|
||||||
|
|
||||||
|
下面是一个例子:
|
||||||
|
|
||||||
|
|
||||||
|
```bash title="/var/www/cgi-bin/system-info.sh"
|
||||||
|
|
||||||
|
#!/bin/bash
|
||||||
|
|
||||||
|
# HTTP响应头
|
||||||
|
echo "Content-type: text/html"
|
||||||
|
echo ""
|
||||||
|
|
||||||
|
# HTML内容
|
||||||
|
echo '<html>'
|
||||||
|
echo '<head><title>系统信息</title></head>'
|
||||||
|
echo '<body>'
|
||||||
|
echo '<h1>服务器系统信息</h1>'
|
||||||
|
echo '<p>当前时间:'$(date)'</p>'
|
||||||
|
echo '<p>内存使用情况:</p>'
|
||||||
|
echo '<pre>'
|
||||||
|
free -h
|
||||||
|
echo '</pre>'
|
||||||
|
echo '</body>'
|
||||||
|
echo '</html>'
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
每次用户访问这个页面,都会看到实时的系统信息,真正实现了动态内容。
|
||||||
|
|
||||||
|
虽然CGI现在很少见了,但它建立了一个重要概念:将URL请求映射到程序函数,而不是静态文件。这个思想成为了现代Web开发的基础。
|
||||||
|
|
||||||
|
## 嵌入式脚本
|
||||||
|
随着动态网页需求的增长,纯CGI编程变得复杂。程序员们希望能够在HTML中直接编程动态代码,这样既保持了HTML的可读性,又能实现动态功能。
|
||||||
|
|
||||||
|
|
||||||
|
这个就是嵌入式脚本,顾名思义就是把脚本和HTML混在一起,在HTML中嵌入脚本;
|
||||||
|
|
||||||
|
但是这种脚本和今天的前端JavaScript不同,它是由后端解释执行的,在返回HTML响应之前,HTTP服务程序会检查这个HTML里面有没有可以执行的脚本内容,有的话就执行这些脚本,并且把脚本的输出嵌入到HTML里面。任何有效的HTML也是有效的这类脚本语言。
|
||||||
|
|
||||||
|
从CGI到嵌入式脚本的另外一个关键驱动力是性能。CGI每来一个请求,服务器就得创建一个新进程去运行CGI程序,完成后再销毁,开销很大。而嵌入式脚本通常则是直接作为服务器的一部分运行,效率远高于CGI。
|
||||||
|
|
||||||
|
### JSP
|
||||||
|
|
||||||
|
举个例子吧,你可以轻松使用Java来创建动态网页,只需要把Java代码嵌入到HTML里面,使用`<% %>`包裹住代码:
|
||||||
|
|
||||||
|
```java
|
||||||
|
|
||||||
|
<html>
|
||||||
|
<body>
|
||||||
|
<p>当前时间:<%= new java.util.Date() %></p>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
复杂一点的例子:
|
||||||
|
|
||||||
|
```java
|
||||||
|
|
||||||
|
<html>
|
||||||
|
<body>
|
||||||
|
<h1>欢迎访问我们的网站</h1>
|
||||||
|
<p>当前服务器时间:<%= new java.util.Date() %></p>
|
||||||
|
<p>您是第 <%= session.getAttribute("visitCount") %> 位访客</p>
|
||||||
|
|
||||||
|
<%-- 这是JSP注释,不会出现在最终HTML中 --%>
|
||||||
|
<%
|
||||||
|
// 这里可以写复杂的Java逻辑
|
||||||
|
String userName = request.getParameter("user");
|
||||||
|
if (userName != null) {
|
||||||
|
out.println("<p>欢迎您," + userName + "!</p>");
|
||||||
|
}
|
||||||
|
%>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
:::info[session和cookie]
|
||||||
|
|
||||||
|
在这段JSP代码中有一个对象叫做`session`,这是什么呢?实际上,因为HTTP是无状态的协议,意味着两次请求之间是完全独立的,一次请求不应该依赖另一次请求。这显得有点不灵活,于是人们会在HTTP的请求体上夹带一些额外的参数,用于表明用户的身份信息,比如在用户登录网站之后,服务器会给客户端一个密钥,下一次客户端请求页面时带上这个密钥,服务器就知道这是某个用户的请求。在这种模式下,服务器需要为每个用户维护信息,比如最简单地需要维护密钥是对应哪个用户的,这些信息就叫做session。
|
||||||
|
|
||||||
|
:::
|
||||||
|
|
||||||
|
类似于这样的脚本叫做JSP(JavaServer Pages),它在后端返回时被转换成Java Servlet代码来执行,本质上,JSP是Java Servlet的一种语法糖。至于JSP和Java Servlet都是什么,自行了解吧。
|
||||||
|
|
||||||
|
### PHP
|
||||||
|
比JSP更灵活的就是PHP,PHP就是一门纯正的脚本语言了,它的用法与JSP类似,使用`<?php ?>包裹代码`:
|
||||||
|
|
||||||
|
```php
|
||||||
|
|
||||||
|
<html>
|
||||||
|
<body>
|
||||||
|
<h1>欢迎来到我的网站</h1>
|
||||||
|
<?php
|
||||||
|
$time = date('Y-m-d H:i:s');
|
||||||
|
echo "<p>当前时间:$time</p>";
|
||||||
|
?>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
也可以这样写,这样就类似于CGI程序的写法了:
|
||||||
|
|
||||||
|
|
||||||
|
```php
|
||||||
|
|
||||||
|
<?php
|
||||||
|
echo "<html><body>";
|
||||||
|
echo "<h1>欢迎来到我的网站</h1>";
|
||||||
|
$time = date('Y-m-d H:i:s');
|
||||||
|
echo "<p>当前时间:$time</p>";
|
||||||
|
echo "</body></html>";
|
||||||
|
?>
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
### LAMP
|
||||||
|
这种动态网页的编写方法流行了很多年,形成了一个叫做"LAMP"的套路:Linux+Apache+MySQL+PHP;就是将电脑装上Linux系统,运行Apache这个HTTP服务端,使用PHP作为动态脚本语言,使用MySQL来存储和访问业务数据。
|
||||||
|
|
||||||
|
需要注意的是,这四个都是开源免费的软件,LAMP的兴起,是开源软件运动的标志之一。开源软件使得部署网站的成本极大地降低,推动了互联网的繁荣。如果你想建站,那时候互联网上到处都是"LAMP一键安装脚本"之类的东西,现在也能搜到不少。一个下午就能上线一个完备的网站。这些技术的出现,使得开网站不再局限于大企业才能办得到的事情,一时间互联网上到处都是个人或者小单位的网站,甚至后来出现了诸如Wordpress之类的方案,不会写代码也能开网站。繁荣的生态,网页上丰富的动态内容,形成了被我们称为“Web 2.0”的时代。
|
||||||
|
|
||||||
|
LAMP的一个典型反面是微软全家桶:Windows Server+IIS+SQL Server+ASP,这套技术方案需要给微软缴纳高额的授权费用,在当时基本上只限于追求稳定和售后服务的企业使用。我们的文章也没有怎么介绍这些技术。不过IIS对于个人用自己的电脑建站还是非常方便的。(当然国内没有公网IP那是另一回事了╮( ̄▽ ̄)╭)
|
||||||
|
|
||||||
|
## MVC架构
|
||||||
|
随着网页的不断发展,出现了复杂的业务逻辑,并且页面也越来越复杂;这时候,把页面和程序逻辑混在一起的嵌入式脚本在庞大的复杂代码情况下变得难以维护。
|
||||||
|
|
||||||
|
而且它们都有一个特点:依赖于具体的某个HTTP服务程序,PHP依赖于Apache的`mod_php`或Nginx的FastCGI支持,JSP依赖于Servlet容器例如Tomcat,这增加了开发与部署的耦合度,更使得项目难以管理。嵌入式脚本难以复用已有的代码,这些代码的测试也需要模拟HTTP环境,难以测试。
|
||||||
|
|
||||||
|
此时兴起了一种新的Web后端编程思想,它就是MVC(Model-View-Controller)
|
||||||
|
|
||||||
|
简单来说,根据大量的开发经验累积,人们发现一个动态网页的后端通常需要做到这3件事情:
|
||||||
|
- Model:使用面向对象的方法为业务建模,把数据对应到编程语言中的对象,把对数据的操作对应到对象的方法。负责对业务数据进行实际的操作。
|
||||||
|
- View:输入数据,负责把数据变成用户可以直观看懂的HTML。
|
||||||
|
- Controller:负责协调,调用上面两个部分。
|
||||||
|
|
||||||
|

|
||||||
|
|
||||||
|
例如,当我们在报修系统中想要查询一个片区的全部报修时,首先我们访问`http://wwbx.zsxyww.com/QueryTickets.php?zone=朝晖&status=pending`
|
||||||
|
|
||||||
|
然后服务器根目录下的`QueryTickets.php`程序就会接受到我们的请求(在MVC时期的PHP程序已经不像嵌入式脚本那时混写HTML和PHP,整个文件就是以`<?php`开头的一整个脚本,没有HTML)
|
||||||
|
|
||||||
|
`QueryTickets.php`脚本就是MVC中的Controller,脚本解析到我们想寻找朝晖片区所有待解决的报修,于是它调用一个函数`Ticket.Query()`,但是Controller知道朝晖片区在数据库对应的编号是10,待解决状态的编号是0,于是他把URI参数中的`朝晖`和`pending`改成`10`和`0`传递给函数;
|
||||||
|
|
||||||
|
这个函数会去数据库(比如前面提到的MySQL)里查询数据,最终执行类似于`SELECT * FROM tickets WHERE zone=10 AND status=0;`这样的SQL语句,然后把查询的每一行都对应一个Ticket对象,返回一个Ticket的数组。这个函数,以及Ticket类的定义就是Model负责的部分。
|
||||||
|
|
||||||
|
:::info
|
||||||
|
|
||||||
|
SQL(Structured Query Language)是进行数据库操作的标准途径,你可以简单地把数据库理解成有更多功能和性能更高的Excel表格,即使这个表格有上亿行,数据库也能在不到几秒内精准执行复杂的数据读取或写入。
|
||||||
|
|
||||||
|
刚才的那个SQL语句,就是让数据库找到所有在10号片区(朝晖)未解决的工单,给出这些工单的所有信息。是不是非常直观方便?
|
||||||
|
|
||||||
|
数据库往往是后端的核心。许多后端系统,可以说就是SQL数据库的套壳,它们的业务逻辑不会超过"CRUD",这也是为什么例如Supabase之类的产品能够如此的流行。
|
||||||
|
|
||||||
|
:::
|
||||||
|
|
||||||
|
Model是程序的核心。它不关心页面长什么样,只负责处理和业务相关的数据。在我们报修系统的例子里,它定义了一张报修单应该包含哪些信息(如ID、地点、状态),并提供了操作这些数据的方法(如从数据库查询报修单、更新报修单状态等)。这是网站业务逻辑的体现。
|
||||||
|
|
||||||
|
当Controller获得Model返回的数据时,它就把这些数据移交View函数渲染,调用View函数。View首先把Ticket对象里面的`10`和`0`改成`朝晖`和`待解决`,然后检查客户端的UA,如果是电脑的话就在一行显示更多数据,如果是手机的话就返回紧凑的界面。根据不同的访问设备,预先在系统中存放了一些模板HTML文件,view读取这些文件,然后将数据放到里面,返回给用户;
|
||||||
|
|
||||||
|
这样用户访问`QueryTickets.php`时,就会看到一个根据后台数据实时更新的一个页面。这就是一个简单的MVC架构页面的例子。
|
||||||
|
|
||||||
|
:::tip[提示]
|
||||||
|
|
||||||
|
哈哈,这个例子其实是骗你的,我们的报修系统既不是用的PHP,也不是用的MVC架构,甚至路由都是虚拟的。这个例子只是让你比较好懂~
|
||||||
|
|
||||||
|
:::
|
||||||
|
|
||||||
|
### 虚拟路由
|
||||||
|
实际上,程序员们认为基于传统服务器文件的路由架构严重阻碍了后端系统的灵活设计。也就是说,用户输入的URI,必须对应根目录里面一个实际存在的文件,比如上面的`QueryTickets.php`,在后端就是一个实际存在的脚本。由HTTP程序负责调用这个脚本,并且把脚本的输出发送过去。
|
||||||
|
|
||||||
|
MVC架构,包括更新的设计,都采用虚拟路由。也就是说,URI不再匹配根目录里的一个文件,什么URI匹配什么现在完全取决于程序员希望它匹配什么,比如匹配程序里的某个函数(不再一定是脚本语言,可以编译语言例如C语言的函数),把函数的输出传给用户。
|
||||||
|
|
||||||
|
通常的MVC设计下,在MVC之前程序还有一个路由层,客户端的HTTP请求首先到达这里,经过这里解析后,转交给不同的地方
|
||||||
|
|
||||||
|
举例来说明,当用户访问`http://wwbx.zsxyww.com/Tickets/朝晖/pending`的时候,程序员可以在路由层定义:所有以`/Tickets`开头的URI,全部转交`Query()`函数处理,`Query()`看到转交过来的请求头URI在`/Tickets`后面是`/朝晖/pending`,就去数据库查询朝晖的待解决工单,然后调用渲染函数返回HTML。在服务器根目录下面是没有`/Tickets/朝晖/pending`这个文件的。嗯...其实连根目录都不需要了,
|
||||||
|
|
||||||
|
发展到后来,连HTTP服务器也没有了:因为程序员们觉得每次都要配置一个独立的HTTP服务器(比如Apache)再来运行自己的程序有点麻烦。于是,很多现代的Web框架干脆自己内置了一个迷你的HTTP服务器功能。启动程序时,这个内置的服务器也一起启动了,让开发和部署变得更简单。
|
||||||
|
|
||||||
|
当然,这种模式下,URI也可以传统地绑定到某个文件上。例如,我们的官网`www.zsxyww.com`在接受到任何无效的URI时,都会将请求路由到文件`404.html`上,表示没有找到你请求的东西,比如,`www.zsxyww.com/hahaha`,和`www.zsxyww.com/aaa/bbb`都没有在程序路由中规定,一切超出规定的URI全部都路由到`404.html`文件上,返回一个静态的文件。
|
||||||
|
|
||||||
|

|
||||||
|
|
||||||
|
### MVC框架
|
||||||
|
MVC作为一种编程思想可以被程序员灵活地使用,不过也有一些在编程语言基础上编写的MVC框架,来约束程序员使用MVC的思想开发后端,也简化了开发;这种框架有很多,而且不少编程语言都有,我们介绍几个有代表性的:
|
||||||
|
|
||||||
|
- Ruby on Rails 约定大于配置
|
||||||
|
- Django
|
||||||
|
- Spring Boot
|
||||||
|
|
||||||
|
|
||||||
|
:::info
|
||||||
|
|
||||||
|
这是三篇系列文章中的第**2**篇
|
||||||
|
|
||||||
|
点击以跳转:
|
||||||
|
|
||||||
|
[HTTP](/blog/Web的历史1️⃣-HTTP)
|
||||||
|
|
||||||
|
**动态网页**(你在看的文章)
|
||||||
|
|
||||||
|
[Web应用](/blog/Web的历史3️⃣-Web应用)
|
||||||
|
|
||||||
|
:::
|
||||||
|
|
||||||
|
|
||||||
286
blog/Web的历史3️⃣-Web应用.md
Normal file
286
blog/Web的历史3️⃣-Web应用.md
Normal file
File diff suppressed because one or more lines are too long
1
blog/_2025-8-11-给纯新手的快速入门指南v2.md
Normal file
1
blog/_2025-8-11-给纯新手的快速入门指南v2.md
Normal file
@@ -0,0 +1 @@
|
|||||||
|
# 给纯新手的网维快速入门指南-v2
|
||||||
2
blog/_archive_/README.md
Normal file
2
blog/_archive_/README.md
Normal file
@@ -0,0 +1,2 @@
|
|||||||
|
# index
|
||||||
|
This is post archive center,move legacy posts here~
|
||||||
@@ -1,22 +1,14 @@
|
|||||||
# 开发组首页
|
# ZSCNSD-DEV Documents
|
||||||
**欢迎来到中山学院网络维护科开发组!**\
|
这里是ZSC网维开发组的文档中心。
|
||||||
**开发组是一个相对独立的小组,负责维护网维日常所用的系统,**\
|
|
||||||
**这里是开发组所维护系统的文档**
|
|
||||||
## 项目清单
|
|
||||||
我们手头上的项目
|
|
||||||
### 网站
|
|
||||||
zsxyww.com,网维的官网
|
|
||||||
### 网维报修系统
|
|
||||||
负责受理用户的故障保修,允许网维成员跟踪问题的解决情况,并管理工单\
|
|
||||||
目前所使用的是上一届开发组成员所开发的系统,目前我们不熟悉其架构和细节,计划开发新的报修系统
|
|
||||||
### 招新系统
|
|
||||||
招新的系统
|
|
||||||
### 基础设施
|
|
||||||
开发组所持有的基础设施,包括云服务器,域名等
|
|
||||||
## 你应该知道......
|
|
||||||
### 项目托管
|
|
||||||
我们的项目托管在github上,私聊组长来获得进入organization的权限
|
|
||||||
### 文档编写
|
|
||||||
为了项目的持续维护,对于我们的每一个项目都应该留有详尽的文档,文档以markdown格式编写,可以自动构建成静态网页,详见**网站/如何修改开发组网站内容**
|
|
||||||
|
|
||||||
|
## 链接
|
||||||
|
|
||||||
|
- 我们的GitHub主页:[Click Me](https://github.com/ZSCNetSupportDept)
|
||||||
|
- 我们的自建Gitea服务:[Click Me](https://gitea.zsxyww.com)
|
||||||
|
|
||||||
|
- 开发组QQ:`995011093`
|
||||||
|
|
||||||
|
## 关于
|
||||||
|
|
||||||
|
如果对文档有任何问题,请在GitHub页面提交Issue或者PR,或联系组长
|
||||||
|
|
||||||
|
|||||||
@@ -1,22 +0,0 @@
|
|||||||
# 开发组网站-内容发布
|
|
||||||
**本篇文章将教你如何为开发组网站贡献内容,修改内容,以及内容的维护**
|
|
||||||
## Edit This Page
|
|
||||||
页面最下面有一个Edit This Page的超链接,点击就可以进入github里这个页面的源代码,可以提交PR,有权限的也可以直接修改
|
|
||||||
## 增加内容
|
|
||||||
docusaurus按照一定的文件层次将markdown文档转换成静态页面,在仓库里,docs文件夹下的是网站的文档,blog文件夹下的为公告,src/pages下的为独立页面(如首页),如果要增添新的内容,记得把内容放在正确的地方里
|
|
||||||
### 前缀
|
|
||||||
所有文件都要加入一个数字前缀,用来指示构建系统按照序号生成文章在sidebar中的顺序,按照`order-filename.md`的格式命名
|
|
||||||
|
|
||||||
btw,docusaurus不会将以"_"开头的文件加入完成的网页中,所以可以在暂时不想要展现在最终网站的里的的文章前面加上一个下划线
|
|
||||||
### Markdown 文档
|
|
||||||
Markdown 是一个标记文本格式的语言,轻便简单快捷,markdown最基本的语法如下:[markdown语法](https://commonmark.org/) ,我们用Markdown来编写文档,需要注意的是,文档只能有一个h1,系统用它来产生sidebar条目
|
|
||||||
|
|
||||||
另外docusaurus好像支持mdx格式的文档,可以把一些动态元素插入到文本中,
|
|
||||||
### 媒体资源引用
|
|
||||||
将所有媒体资源放在static目录内,然后在文档中调用
|
|
||||||
|
|
||||||
## 公告
|
|
||||||
docusaurus自带一个blog插件,需要按照`yyyy-mm-dd-filename.md`的格式发布
|
|
||||||
|
|
||||||
## 文档的维护
|
|
||||||
如果发现了文档有错误的地方,请提交PR修改,或者告知开发组成员,
|
|
||||||
@@ -1 +0,0 @@
|
|||||||
# 旧版wiki
|
|
||||||
7
docs/devdocs/02-网维报修系统/01-概述.md
Normal file
7
docs/devdocs/02-网维报修系统/01-概述.md
Normal file
@@ -0,0 +1,7 @@
|
|||||||
|
---
|
||||||
|
|
||||||
|
description: 项目的概述
|
||||||
|
|
||||||
|
---
|
||||||
|
# 概述
|
||||||
|
网维原来的老报修系统从13年开始开发,16年完成的第二版一直用到了现在2025年,确实有必要更新了 ,
|
||||||
3
docs/devdocs/02-网维报修系统/_category_.json
Normal file
3
docs/devdocs/02-网维报修系统/_category_.json
Normal file
@@ -0,0 +1,3 @@
|
|||||||
|
{
|
||||||
|
"description": "..."
|
||||||
|
}
|
||||||
8
docs/devdocs/02-网维报修系统/index.md
Normal file
8
docs/devdocs/02-网维报修系统/index.md
Normal file
@@ -0,0 +1,8 @@
|
|||||||
|
# 网维报修系统
|
||||||
|
网维的新报修系统
|
||||||
|
|
||||||
|
|
||||||
|
import DocCardList from '@theme/DocCardList';
|
||||||
|
|
||||||
|
<DocCardList className="docs-card" />
|
||||||
|
|
||||||
24
docs/devdocs/03-开发组网站/01-概述.md
Normal file
24
docs/devdocs/03-开发组网站/01-概述.md
Normal file
@@ -0,0 +1,24 @@
|
|||||||
|
---
|
||||||
|
|
||||||
|
description: 项目的概述
|
||||||
|
|
||||||
|
---
|
||||||
|
# 概述
|
||||||
|
项目的概述
|
||||||
|
## 介绍
|
||||||
|
本站采用Docusaurus框架,Docusaurus是一个静态网页生成器,也就是说,项目的构建目标是一堆静态网页文件,拿去给HTTP服务器部署;
|
||||||
|
|
||||||
|
要想为网站写内容,只需要把写好的Markdown丢进项目特定的路径里,Docusaurus生成器会自动把文件变成成品网站;这样我们可以专注内容写作,不用担心其它的;
|
||||||
|
|
||||||
|
框架本身使用React,本地构建时需要对应的前端工具链;官方要求的运行时为`Node.js >= 18.0`,至于包管理器,就看个人喜好了,我们以`npm`举例;
|
||||||
|
## 结构
|
||||||
|
从项目根目录下开始看起:
|
||||||
|
- `docs`:存放wiki和开发组文档的内容
|
||||||
|
- `blog`:存放文章的内容
|
||||||
|
- `src`:存放其它不是Markdown,但是又属于网站内容的部分;例如独立页面(如首页),自定义CSS和React Component等
|
||||||
|
- `static`:存放静态文件,内容会被原样拷贝到构建目标的根目录下
|
||||||
|
- `docusaurus.config.js`:主配置文件
|
||||||
|
- `sidebars.js`:Sidebar(就是访问`docs`下文档时出现在左边的栏目)配置文件
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
3
docs/devdocs/03-开发组网站/_category_.json
Normal file
3
docs/devdocs/03-开发组网站/_category_.json
Normal file
@@ -0,0 +1,3 @@
|
|||||||
|
{
|
||||||
|
"description": "..."
|
||||||
|
}
|
||||||
24
docs/devdocs/03-开发组网站/index.md
Normal file
24
docs/devdocs/03-开发组网站/index.md
Normal file
@@ -0,0 +1,24 @@
|
|||||||
|
# 开发组网站
|
||||||
|
就是你所看到的网站;这个网站大概包含了三个部分:
|
||||||
|
|
||||||
|
1. 网维的新wiki
|
||||||
|
|
||||||
|
2. 开发组相关文档
|
||||||
|
|
||||||
|
3. 一个博客系统,可以用来放独立的文章
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
因为感觉没有必要搭建两个基础设施,所以把wiki和开发组文档放在一起,这样也比较方便运维
|
||||||
|
|
||||||
|
网站采用[Docusaurus](https://www.docusaurus.io)框架,详细文档移步官网查看
|
||||||
|
|
||||||
|
**项目地址**:https://github.com/ZSCNetSupportDept/website
|
||||||
|
|
||||||
|
|
||||||
|
## 目录
|
||||||
|
|
||||||
|
import DocCardList from '@theme/DocCardList';
|
||||||
|
|
||||||
|
<DocCardList className="docs-card" />
|
||||||
|
|
||||||
2
docs/devdocs/03-开发组网站/撰写内容.md
Normal file
2
docs/devdocs/03-开发组网站/撰写内容.md
Normal file
@@ -0,0 +1,2 @@
|
|||||||
|
# 撰写内容
|
||||||
|
如何向wiki,开发组文档和文章板块添加内容
|
||||||
2
docs/devdocs/03-开发组网站/项目构建与部署.md
Normal file
2
docs/devdocs/03-开发组网站/项目构建与部署.md
Normal file
@@ -0,0 +1,2 @@
|
|||||||
|
# 项目构建与部署
|
||||||
|
如何构建与部署该项目
|
||||||
2
docs/devdocs/03-开发组网站/项目配置.md
Normal file
2
docs/devdocs/03-开发组网站/项目配置.md
Normal file
@@ -0,0 +1,2 @@
|
|||||||
|
# 项目配置
|
||||||
|
如何修改项目的配置(界面,行为等)
|
||||||
@@ -1,2 +0,0 @@
|
|||||||
# 报修服务器
|
|
||||||
|
|
||||||
@@ -1,13 +0,0 @@
|
|||||||
# 网站服务器
|
|
||||||
## 概况
|
|
||||||
ip:**43.129.159.235**
|
|
||||||
|
|
||||||
OS:**Debian 10.2 64bit**
|
|
||||||
|
|
||||||
配置:CPU - 1核 内存 - 1GB\
|
|
||||||
系统盘 - SSD云硬盘 25GB\
|
|
||||||
流量包 - 1024GB/月(峰值带宽:30Mbps)
|
|
||||||
|
|
||||||
服务:官网(通过docker部署,8090端口,nginx反代)\
|
|
||||||
旧版wiki(docker,3000端口,nginx反代)\
|
|
||||||
新网站(TODO:补充部署方式)
|
|
||||||
@@ -1,6 +0,0 @@
|
|||||||
# 加入开发组
|
|
||||||
可以参照下面的联系方式和开发组进行联系
|
|
||||||
## 联系方式
|
|
||||||
QQ群:961797864
|
|
||||||
QQ:2597760847(组长)
|
|
||||||
|
|
||||||
28
docs/devdocs/_legacy/01-首页.md
Normal file
28
docs/devdocs/_legacy/01-首页.md
Normal file
@@ -0,0 +1,28 @@
|
|||||||
|
# 开发组首页
|
||||||
|
**欢迎来到中山学院网络维护科开发组!**\
|
||||||
|
**开发组是一个相对独立的小组,负责维护网维日常所用的系统,**\
|
||||||
|
**这里是开发组所维护系统的文档**
|
||||||
|
## 项目清单
|
||||||
|
我们手头上的项目
|
||||||
|
### 网站
|
||||||
|
zsxyww.com,网维的官网
|
||||||
|
### 网维报修系统
|
||||||
|
负责受理用户的故障保修,允许网维成员跟踪问题的解决情况,并管理工单\
|
||||||
|
目前所使用的是上一届开发组成员所开发的系统,目前我们不熟悉其架构和细节,计划开发新的报修系统
|
||||||
|
### 招新系统
|
||||||
|
招新的系统
|
||||||
|
### 基础设施
|
||||||
|
开发组所持有的基础设施,包括云服务器,域名等
|
||||||
|
## 你应该知道......
|
||||||
|
### 项目托管
|
||||||
|
我们的项目托管在github上,私聊组长来获得进入organization的权限
|
||||||
|
### 文档编写
|
||||||
|
为了项目的持续维护,对于我们的每一个项目都应该留有详尽的文档,文档以markdown格式编写,可以自动构建成静态网页,详见**网站/如何修改开发组网站内容**
|
||||||
|
### 培训 资料
|
||||||
|
这里是一些资料,帮助你了解加入开发组工作的必要知识
|
||||||
|
- SSH教程:https://wangdoc.com/ssh/basic
|
||||||
|
- git教程:
|
||||||
|
- WEB基础:https://developer.mozilla.org/zh-CN/docs/Learn/Getting_started_with_the_web
|
||||||
|
- linux命令:
|
||||||
|
- markdown教程:
|
||||||
|
|
||||||
@@ -1,4 +1,5 @@
|
|||||||
# 子站点
|
# 子站点
|
||||||
|
网站的子站点
|
||||||
## www.zsxyww.com
|
## www.zsxyww.com
|
||||||
www.zsxyww.com是网维的官网
|
www.zsxyww.com是网维的官网
|
||||||
## wiki.zsxyww.com
|
## wiki.zsxyww.com
|
||||||
@@ -1,14 +1,19 @@
|
|||||||
# 开发组网站概览
|
# 开发组网站-概览
|
||||||
## 技术
|
## 技术
|
||||||
网站基于Docusaurus开发,一个静态网页生成的框架,尤其对于生成技术文档来说,它提供了一个美观,现代的前端界面,这个项目本身是一个react.js应用,生成网页时只要输入:`npm run build`便可以在build目录里构建网站的所有资源,以进一步部署,关于详细的配置,可以去看官方的文档:[文档连接](https://www.docusaurus.cn/docs/category/guides)
|
网站基于Docusaurus开发,一个静态网页生成的框架,尤其对于生成技术文档来说,它提供了一个美观,现代的前端界面,这个项目本身是一个react.js应用,生成网页时只要输入:`npm run build`便可以在build目录里构建网站的所有资源,以进一步部署,关于详细的配置,可以去看官方的文档:[文档连接](https://www.docusaurus.cn/docs/category/guides)
|
||||||
## 工作流程
|
## 工作流程
|
||||||
基本上,我们需要把markdown文件放在目录里面,系统就会根据目录的结构自动生成网页,但是我们必须写好配置文件,如果我们想自定义网站的外观的话,也需要好好研究一下配置文件,有关文档还在编写中
|
基本上,我们需要把markdown文件放在目录里面,系统就会根据目录的结构自动生成网页,但是我们必须写好配置文件,如果我们想自定义网站的外观的话,也需要好好研究一下配置文件,有关文档还在编写中 \
|
||||||
|
开发组网站的开发流程基本如下:
|
||||||
|
1. 将源代码仓库的最新版本拉取到本地,对仓库的内容进行修改,最终在本地的master分支上commit,
|
||||||
|
2. 运行`npm start`在`https://localhost:3000`上运行基于改动构建的预览版本
|
||||||
|
3. 测试改动,确保一切正常后push到github上
|
||||||
|
4. demo网站会自动根据github上的msater分支构建网页,构成开发组网站的预览版本
|
||||||
|
5. 积累几个改动后,在本地运行`npm run deploy`将网页构建好推送给github上的`build`分支,网站服务器自动获取并更新,构成开发组网站的正式版本
|
||||||
## 目录
|
## 目录
|
||||||
所有的文档文件都储存在docs文件夹下\
|
所有的文档文件都储存在docs文件夹下\
|
||||||
所有的公告文件都储存在blog文件夹下\
|
所有的公告文件都储存在blog文件夹下\
|
||||||
所有的静态页面都储存在src/pages文件夹下\
|
所有的静态页面都储存在src/pages文件夹下\
|
||||||
所有的媒体文件都储存在static文件夹下\
|
所有的媒体文件都储存在static文件夹下,供用户下载的资源也储存在这里\
|
||||||
系统会根据这些文件,在build里生成网站的所有页面文件,以供我们部署
|
|
||||||
|
|
||||||
docusaurus.config.js是项目的配置文件,配置格式请参照官方文档
|
docusaurus.config.js是项目的配置文件,配置格式请参照官方文档
|
||||||
## 部署
|
## 部署
|
||||||
43
docs/devdocs/_legacy/02-网站/02-开发组网站/03-开发组网站-内容.md
Normal file
43
docs/devdocs/_legacy/02-网站/02-开发组网站/03-开发组网站-内容.md
Normal file
@@ -0,0 +1,43 @@
|
|||||||
|
# 开发组网站-内容
|
||||||
|
**本篇文章将教你进行内容发布,维护开发组网站内容的方法**
|
||||||
|
## 如何修改
|
||||||
|
### Edit This Page
|
||||||
|
页面最下面有一个Edit This Page的超链接,点击就可以进入github里这个页面的源代码,可以提交PR,有权限的也可以直接修改
|
||||||
|
### git clone
|
||||||
|
(该方法仅限有权限的开发组成员)\
|
||||||
|
如果你要进行比较多的修改的话,你也可以将仓库拉取到本地,然后修改,新建文件夹,打开终端
|
||||||
|
- 输入`git clone https://github.com/ZSCNetSupportDept/website.git`
|
||||||
|
- 输入`git checkout master`
|
||||||
|
- 此时你应该可以看见项目的源代码,修改你需要改动的内容,然后输入`git add *`
|
||||||
|
- 输入`git commit`,将你的改动提交到本地
|
||||||
|
- 输入`git push`,提交内容到仓库
|
||||||
|
## 仓库的内容
|
||||||
|
你可以看见三个文件夹,分别是src,docs,blog,其中:
|
||||||
|
- src文件夹存放了独立于文档和blog的静态页面
|
||||||
|
- docs文件夹存放了所有的文档(目前有wiki和开发组文档两个docs)
|
||||||
|
- blog文件夹存放了可以显示在“公告”板块的文章
|
||||||
|
|
||||||
|
所有的文档都以Markdown格式书写(其实也可以用MDX格式),
|
||||||
|
### 前缀
|
||||||
|
所有文件都有一个数字前缀,这是文章在成品网站中的顺序,文件请按照`order-filename.md`的格式命名
|
||||||
|
|
||||||
|
btw,docusaurus不会将以"_"开头的文件加入完成的网页中,所以可以在暂时不想要展现在最终网站的里的的文章前面加上一个下划线
|
||||||
|
### 栏目的概况
|
||||||
|
我们可以在一个子文件夹中加入`index.md`或者`README.md`或者`{$文件夹的名称}.md`,其中的内容会在成品网站中显示为这个栏目的概况(点击这个栏目本身出现的内容)
|
||||||
|
### Markdown 文档
|
||||||
|
Markdown 是一个标记文本格式的语言,轻便简单快捷,markdown最基本的语法如下:[markdown语法](https://commonmark.org/) ,我们用Markdown来编写文档,需要注意的是,文档只能有一个h1,系统用它来产生sidebar条目
|
||||||
|
|
||||||
|
另外docusaurus好像支持mdx格式的文档,可以把一些动态元素插入到文本中,
|
||||||
|
### 媒体资源引用
|
||||||
|
请将所有媒体资源放在static目录内,然后在文档中调用
|
||||||
|
### 下载
|
||||||
|
在`static`目录下面的内容会直接放到生成的网页里,我们在wiki和开发组文档里各设置了一个下载页面提供便捷访问的方式,在Markdown文本里链接这些文件,来提供下载的方式
|
||||||
|
|
||||||
|
### 公告
|
||||||
|
docusaurus自带一个blog插件,需要按照`yyyy-mm-dd-filename.md`的格式发布
|
||||||
|
|
||||||
|
## 文档的维护
|
||||||
|
如果发现了文档有错误的地方,请提交PR修改,或者告知开发组成员,
|
||||||
|
|
||||||
|
## 进阶
|
||||||
|
更详细的内容,还是建议看docusaurus的官方文档:[文档连接](https://www.docusaurus.cn/docs/category/guides)
|
||||||
15
docs/devdocs/_legacy/02-网站/02-开发组网站/03-开发组网站-部署.md
Normal file
15
docs/devdocs/_legacy/02-网站/02-开发组网站/03-开发组网站-部署.md
Normal file
@@ -0,0 +1,15 @@
|
|||||||
|
# 开发组网站-部署
|
||||||
|
本篇文章是开发组网站的部署流程备忘录
|
||||||
|
## 开发部署流程
|
||||||
|
网站假设在我们的云服务器上,服务器会自动从仓库的build分支拉取内容,所以,网站的开发部署流程是这样的:
|
||||||
|
1. 将website仓库clone到本地/pull拉取最新版本
|
||||||
|
2. 运行`npm start`在localhost:3000上运行网站的测试版本
|
||||||
|
3. 确认网站的最新版本没有问题后,运行`npm run docusaurus deploy`,npm会自动构建网页文件,推送到origin/build分支上(记得配置好你的ssh,联系组长来获取仓库的权限)
|
||||||
|
4. 服务器获取build分支的最新版本,pull到`/var/www/developer`目录下
|
||||||
|
5. 服务器采用nginx,提供对developer.zsxyww.com的访问
|
||||||
|
|
||||||
|
## demo
|
||||||
|
我在cloudflare pages上部署了一个网站的demo,这个网站会自动基于master分支构建,而不是获取构建好的build分支,可以在上面预览网站的效果,觉得没问题了再进行build,网址:https://zscdev-demo.pages.dev/
|
||||||
|
|
||||||
|
## 服务端
|
||||||
|
目前,网站服务器拉取build构建的方式是通过定时执行(5分钟1次)一个特定的更新脚本,位置在`/opt/developer-build.sh`,写在crontab里了,
|
||||||
@@ -1,2 +1,9 @@
|
|||||||
# 网站外观修改
|
# 开发组网站-外观
|
||||||
**本篇指南将教你如何修改开发组网站的外观**
|
**本篇指南将教你如何修改开发组网站的外观**
|
||||||
|
|
||||||
|
|
||||||
|
看官方文档
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
249
docs/devdocs/_legacy/02-网站/02-开发组网站/快速上手.md
Normal file
249
docs/devdocs/_legacy/02-网站/02-开发组网站/快速上手.md
Normal file
@@ -0,0 +1,249 @@
|
|||||||
|
# 快速上手
|
||||||
|
修网的知识需要在实践中不断积累,网维的wiki做为每一个网维成员经验的总结,自然也需要不断的更新,但是,wiki本身大部分时间都是由开发组的仅仅几个人来维护,难以时刻更新到最新情况,所以,我们想让网维的每个人都能加入wiki的维护,这篇文章就是写给希望为wiki添砖加瓦,却不太了解相关方法的小伙伴的,希望这篇文章能够快速让你上手wiki的维护工作。
|
||||||
|
|
||||||
|
在这篇文章里我们将教你:\
|
||||||
|
将我们在github上的主仓库fork一份,然后将fork仓库clone到你的电脑;修改网站源代码;将你的修改传回fork仓库,提交pull request
|
||||||
|
|
||||||
|
:::info 信息
|
||||||
|
|
||||||
|
在正式开始编辑前,你可以看看我们的成品网站,每篇文章的下面会有一个`Edit This Page`的链接,是这篇文章的源代码,这里是网站的链接:[Click Me ](https://zscdev-demo.pages.dev/)
|
||||||
|
|
||||||
|
|
||||||
|
:::
|
||||||
|
|
||||||
|
## 准备
|
||||||
|
我们假设你所使用的是windows系统。
|
||||||
|
|
||||||
|
首先,我们需要安装必要的开发工具:git 和 Node.js。
|
||||||
|
|
||||||
|
访问如下链接:[git下载](https://git-scm.com/download/win) , [Node.js下载](https://nodejs.org/zh-cn/download/prebuilt-installer)。
|
||||||
|
|
||||||
|
:::info 信息
|
||||||
|
|
||||||
|
你也可以通过windows自带的WinGet包管理器下载,详见:[微软文档](https://learn.microsoft.com/zh-cn/windows/package-manager/winget/)。
|
||||||
|
|
||||||
|
:::
|
||||||
|
|
||||||
|
:::tip git是什么?
|
||||||
|
|
||||||
|
git是一个版本控制工具,他会记录一个项目从创建之初任何人对任何文件的任何改动,大大方便了多人协作工程的管理,wiki的源代码托管在基于git设计的github上。
|
||||||
|
|
||||||
|
:::
|
||||||
|
|
||||||
|
:::tip Node.js是什么?
|
||||||
|
|
||||||
|
Node.js是一个在后端运行javascript的运行时,我们使用基于这个平台设计的docusaurus框架来将wiki从一堆markdown文档变成一个网站。
|
||||||
|
|
||||||
|
:::
|
||||||
|
|
||||||
|
访问github,如果没有账号,就注册一个,然后,打开https://github.com/ZSCNetSupportDept/website。
|
||||||
|
|
||||||
|
点击上面的fork,创建仓库的一个分支,点击create fork。
|
||||||
|
|
||||||
|
进入你刚才fork的仓库,点击Code,选择HTTPS,复制下面的那一串内容。
|
||||||
|
|
||||||
|
然后,请打开你的终端,你可以在“开始”菜单栏里搜索"PowerShell"来打开。
|
||||||
|
|
||||||
|
如果你的系统没有安装PowerShell,你可以使用cmd,按`Win+R`,在弹出框里输入`cmd`打开。
|
||||||
|
|
||||||
|
输入`git clone 你复制的内容`,这将在你的当前目录下创建一个名为`website`的文件夹,并将开发组网站的全部内容复制到这个文件夹里面。
|
||||||
|
|
||||||
|
|
||||||
|
:::tip 提示
|
||||||
|
|
||||||
|
你可能会需要科学上网的手段来访问github。
|
||||||
|
|
||||||
|
:::
|
||||||
|
|
||||||
|
|
||||||
|
然后,输入`cd website`。
|
||||||
|
|
||||||
|
切换到我们的项目目录下后,运行`npm install`来安装项目的所有依赖。
|
||||||
|
|
||||||
|
:::tip 提示
|
||||||
|
|
||||||
|
为了加速下载,你可能会需要配置npm镜像,可以输入`npm config set registry https://registry.npmmirror.com`。
|
||||||
|
|
||||||
|
:::
|
||||||
|
|
||||||
|
现在,输入`npm start`,程序就会在你的电脑上构建并部署网站。
|
||||||
|
|
||||||
|
然后在你的浏览器上输入`https://localhost:3000`
|
||||||
|
|
||||||
|
如果没有出错的话,你会看到我们开发组网站的主页。
|
||||||
|
|
||||||
|
:::tip 提示
|
||||||
|
|
||||||
|
每次启动测试版网站,都需要在这里再输入一次`npm start`
|
||||||
|
|
||||||
|
:::
|
||||||
|
|
||||||
|
## 编辑
|
||||||
|
打开`website`下的`docs`文件夹,再打开`wiki`文件夹,这里就是我们的wiki内容仓库了。
|
||||||
|
|
||||||
|
仓库里的所有的文章都是以md结尾的markdown文件,你需要熟悉markdown的写法,才能对文章的内容修改和完善,markdown并不是特别复杂,你可以花一点时间去学会他。
|
||||||
|
:::info 信息
|
||||||
|
|
||||||
|
这里是一些学习markdown的资源:https://markdown.com.cn/ \
|
||||||
|
https://github.highlight.ink/mastering-markdown/intro \
|
||||||
|
https://commonmark.org/ (英文)
|
||||||
|
|
||||||
|
:::
|
||||||
|
|
||||||
|
如果想要在文本中添加图片,视频,或者其他资源,请将这些素材放入static中,以方便管理。
|
||||||
|
|
||||||
|
对代码的修改将会自动同步到刚才打开的网页里,你可以在那里确认修改的结果满意与否,注意,你需要保存文件才会同步更改。
|
||||||
|
|
||||||
|
修改完毕后,输入`git add .`再输入`git commit`,并对你的修改做出一个简短的说明。
|
||||||
|
|
||||||
|
### 改什么?
|
||||||
|
你可以校对已有的条目,增加一些内容,或者加入一些图片之类的。
|
||||||
|
|
||||||
|
你也可以添加新条目,撰写一些你觉得有价值的修网心得。
|
||||||
|
|
||||||
|
或是帮助我们改善网站本身,比如改一改主题,写一个首页等(如果有相关能力,需要react基础)
|
||||||
|
|
||||||
|
### 文件名
|
||||||
|
你会发现,所有文件的名字前面都有一个数字,那就是文章在sidebar中出现的顺序,增添文件,请按照`order-filename.md`的格式修改名字。
|
||||||
|
|
||||||
|
在文件名前加一个下划线,系统就不会将文章加入成品网站中。
|
||||||
|
|
||||||
|
:::tip 提示
|
||||||
|
|
||||||
|
关于如何修改wiki的更多提示,可以去看docusaurus的官方文档:[链接](https://docusaurus.cn)
|
||||||
|
|
||||||
|
:::
|
||||||
|
## 推送到仓库
|
||||||
|
在修改完毕并且在本地检查完毕后,你需要将你的修改同步到你在github的远程fork仓库,然后再提交一个pull request请求主仓库合并你在fork仓库所做的修改。
|
||||||
|
|
||||||
|
首先,你需要验证你的身份,让github允许你的电脑向它提交push
|
||||||
|
:::tip 提示
|
||||||
|
|
||||||
|
你可以使用github desktop或github cli来简化这个流程,不过我们想让你在这个过程中学习SSH的用法,如果你想方便一点,直接跳到“使用github-cli”。
|
||||||
|
|
||||||
|
:::
|
||||||
|
### 选项1:使用SSH
|
||||||
|
|
||||||
|
首先,确保你安装了SSH,你可以看微软的这片文档:[链接](https://learn.microsoft.com/zh-cn/windows-server/administration/openssh/openssh_install_firstuse?tabs=gui)。
|
||||||
|
|
||||||
|
打开终端,输入
|
||||||
|
|
||||||
|
```PowerShell
|
||||||
|
|
||||||
|
ssh-keygen -t ed25519
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
然后在接下来的选项中检查密钥的存放路径,以及使用一个密码来加密这个密钥,我们建议你设置一个密码。
|
||||||
|
|
||||||
|
然后我们设置开机自动启动ssh-agent服务。
|
||||||
|
|
||||||
|
确保你使用了管理员权限运行了下面的PowerShell代码:
|
||||||
|
|
||||||
|
```PowerShell
|
||||||
|
|
||||||
|
Get-Service ssh-agent | Set-Service -StartupType Automatic
|
||||||
|
|
||||||
|
Start-Service ssh-agent
|
||||||
|
|
||||||
|
Get-Service ssh-agent
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
最后一个命令应该会返回`Running`状态。
|
||||||
|
|
||||||
|
然后,你就可以输入`ssh-add`来加载你的密钥。
|
||||||
|
|
||||||
|
```PowerShell
|
||||||
|
|
||||||
|
ssh-add 你的私钥位置
|
||||||
|
|
||||||
|
```
|
||||||
|
:::tip 提示
|
||||||
|
|
||||||
|
每次重启电脑,你都要重新输入一遍`ssh-add`。
|
||||||
|
|
||||||
|
:::
|
||||||
|
|
||||||
|
:::info 信息
|
||||||
|
|
||||||
|
关于SSH的配置,参考了这片[微软文档](https://learn.microsoft.com/zh-cn/windows-server/administration/openssh/openssh_keymanagement)。
|
||||||
|
|
||||||
|
:::
|
||||||
|
|
||||||
|
接下来,我们配置github的SSH访问。
|
||||||
|
|
||||||
|
打开与私钥同目录下的公钥文件(以pub结尾),然后复制他,注意要全部复制,不要多出或减少任何内容。
|
||||||
|
|
||||||
|
点一下你的github头像,选择Settings,然后在侧边栏的Access板块找到SSH and GPG keys。
|
||||||
|
|
||||||
|
点击 `New SSH key`。
|
||||||
|
|
||||||
|
把密钥粘贴到下面,然后保存就行了。
|
||||||
|
|
||||||
|
在终端里输入
|
||||||
|
|
||||||
|
```PowerShell
|
||||||
|
|
||||||
|
ssh git@github.com
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
如果返回的文本里出现了你的用户名,配置就大概成功了。
|
||||||
|
|
||||||
|
现在就可以输入`git push`了
|
||||||
|
|
||||||
|
```PowerShell
|
||||||
|
|
||||||
|
git push
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
这个命令会向远端的仓库提交你在本地提交的commit,检查你的fork仓库,有没有更新到你本地的修改?
|
||||||
|
|
||||||
|
:::info 信息
|
||||||
|
|
||||||
|
参考了github的文档:[Click Me ](https://docs.github.com/zh/authentication/connecting-to-github-with-ssh/about-ssh)
|
||||||
|
|
||||||
|
:::
|
||||||
|
|
||||||
|
### 选项2:使用github-cli
|
||||||
|
访问https://github.com/cli/cli/releases , 下载最新版本。
|
||||||
|
|
||||||
|
输入`gh`以检查安装的成功状况。
|
||||||
|
|
||||||
|
没问题的话,输入`gh auth login`,会弹出一个浏览器窗口,在弹出的窗口中完成登录。
|
||||||
|
|
||||||
|
然后,你应该就可以直接使用`git push`了,输入`git push`,然后查看你在github中的fork仓库,有没有更新到你本地的修改。
|
||||||
|
:::info 信息
|
||||||
|
|
||||||
|
这里有更多关于github cli 的信息:[Click Me ](https://docs.github.com/zh/github-cli/github-cli/about-github-cli)
|
||||||
|
|
||||||
|
:::
|
||||||
|
|
||||||
|
### 提交pull request
|
||||||
|
一个pull request 是一个请求,将修改建议发送给主仓库,并让主仓库合并这些修改。
|
||||||
|
|
||||||
|
打开主仓库,选择上面的Pull Requests,然后选择New Pull Request,如果没有出现你的fork仓库,点击compare accross forks。
|
||||||
|
|
||||||
|
然后就可以Create Pull Request了。
|
||||||
|
|
||||||
|
提交后,开发组成员会校对你的修改,将你的修改应用到主仓库中,这就是我们的开发流程了。
|
||||||
|
|
||||||
|
|
||||||
|
:::info wiki的分层更新模型
|
||||||
|
|
||||||
|
按照我们的设计,wiki的内容从新到旧,一共分为三个版本:
|
||||||
|
- 最新的版本是大家在自己的电脑上运行的测试版网站,这个版本包含了最新的想法和更改,等待完善后推送到主仓库。
|
||||||
|
- 然后是我们的demo版本网站[zscdev-demo.pages.dev](zscdev-demo.pages.dev),这个版本立即反应了任何被合并进去主仓库master分支的更改,大家可以对这个网站上的内容随便提意见,任何修改都将很快被同步到网站里。
|
||||||
|
- 当主仓库和demo网站的更新积累到一定程度的数量时,开发组成员会根据一个版本作为wiki的正式版,正式推送到我们的网站[developer.zsxyww.com](developer.zsxyww.com)里,这个版本通常要比demo要落后几次更新,但是那些在施工中的文章,和还在讨论的段落等不稳定的内容将不会被同步到这里,换句话说,这个版本是“稳定版”。
|
||||||
|
|
||||||
|
这样网站的测试和正式使用的版本就分开了,保证了网站内容的严谨
|
||||||
|
|
||||||
|
:::
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
2
docs/devdocs/_legacy/02-网站/05-旧版wiki/05-旧版wiki-概览.md
Normal file
2
docs/devdocs/_legacy/02-网站/05-旧版wiki/05-旧版wiki-概览.md
Normal file
@@ -0,0 +1,2 @@
|
|||||||
|
# 旧版wiki
|
||||||
|
使用wiki.js开发的wiki
|
||||||
2
docs/devdocs/_legacy/02-网站/06-主页面/06-主页面-概览.md
Normal file
2
docs/devdocs/_legacy/02-网站/06-主页面/06-主页面-概览.md
Normal file
@@ -0,0 +1,2 @@
|
|||||||
|
# 主页面
|
||||||
|
主页面就是www.zsxyww.com下的页面,这个页面好像很久没人维护了,文档正在编写。。。
|
||||||
@@ -3,3 +3,4 @@
|
|||||||
我们目前拥有负责报修系统和网站的两台服务器,位于tx云上,联系组长以获得访问权限
|
我们目前拥有负责报修系统和网站的两台服务器,位于tx云上,联系组长以获得访问权限
|
||||||
## 域名
|
## 域名
|
||||||
我们拥有一个域名zsxyww.com
|
我们拥有一个域名zsxyww.com
|
||||||
|
|
||||||
@@ -1,2 +1,7 @@
|
|||||||
# zsxyww.com
|
# zsxyww.com
|
||||||
这个域名目前托管在west.cn上,腾讯云dns,关于域名的交接事项,请联系组长
|
这个域名目前托管在west.cn上,腾讯云dns,关于域名的交接事项,请联系组长
|
||||||
|
:::tip 提示
|
||||||
|
|
||||||
|
记得续费域名
|
||||||
|
|
||||||
|
:::
|
||||||
9
docs/devdocs/_legacy/05-基础设施/报修服务器.md
Normal file
9
docs/devdocs/_legacy/05-基础设施/报修服务器.md
Normal file
@@ -0,0 +1,9 @@
|
|||||||
|
# 报修服务器
|
||||||
|
因信息安全,请移步我们的内部仓库访问相关信息
|
||||||
|
:::tip 提示
|
||||||
|
|
||||||
|
记得续费网站
|
||||||
|
|
||||||
|
:::
|
||||||
|
|
||||||
|
|
||||||
8
docs/devdocs/_legacy/05-基础设施/网站服务器.md
Normal file
8
docs/devdocs/_legacy/05-基础设施/网站服务器.md
Normal file
@@ -0,0 +1,8 @@
|
|||||||
|
# 网站服务器
|
||||||
|
因信息安全,请移步我们的内部仓库访问相关信息
|
||||||
|
:::tip 提示
|
||||||
|
|
||||||
|
记得续费网站
|
||||||
|
|
||||||
|
:::
|
||||||
|
|
||||||
9
docs/devdocs/_legacy/06-联系开发组.md
Normal file
9
docs/devdocs/_legacy/06-联系开发组.md
Normal file
@@ -0,0 +1,9 @@
|
|||||||
|
# 联系开发组
|
||||||
|
开发组成员可以通过以下方式联系:
|
||||||
|
## 联系方式
|
||||||
|
QQ群:961797864
|
||||||
|
QQ:2597760847(组长)
|
||||||
|
|
||||||
|
论坛:https://github.com/orgs/ZSCNetSupportDept/discussions (内部)\
|
||||||
|
github主页: https://github.com/ZSCNetSupportDept
|
||||||
|
|
||||||
2
docs/devdocs/_legacy/07-下载.md
Normal file
2
docs/devdocs/_legacy/07-下载.md
Normal file
@@ -0,0 +1,2 @@
|
|||||||
|
# 下载
|
||||||
|
可以把需要存放的文件链接放在这里以供下载
|
||||||
44
docs/devdocs/_legacy/09-培训/01-git/01-概览.md
Normal file
44
docs/devdocs/_legacy/09-培训/01-git/01-概览.md
Normal file
@@ -0,0 +1,44 @@
|
|||||||
|
# 概览Git
|
||||||
|
这里是git的一个简短教程
|
||||||
|
## 目录
|
||||||
|
本教程的目录。。。
|
||||||
|
|
||||||
|
1. 介绍-做为版本控制系统的git
|
||||||
|
|
||||||
|
- 什么是版本控制系统(VCS)?
|
||||||
|
- git是如何进行版本控制的?
|
||||||
|
|
||||||
|
2. git的基础概念
|
||||||
|
|
||||||
|
- 新建一个git仓库
|
||||||
|
- 跟踪文件,暂存文件
|
||||||
|
- 提交commit
|
||||||
|
- 分支(branch)介绍
|
||||||
|
- 合并-merge与rebase
|
||||||
|
- cherry-pick
|
||||||
|
- HEAD和相对引用
|
||||||
|
|
||||||
|
3. 远程仓库
|
||||||
|
|
||||||
|
- clone和origin
|
||||||
|
- 远程分支是什么
|
||||||
|
- fetch , pull & push !
|
||||||
|
|
||||||
|
4. 托管平台
|
||||||
|
|
||||||
|
- github
|
||||||
|
- gitlab
|
||||||
|
- gitea
|
||||||
|
|
||||||
|
5. 高级
|
||||||
|
|
||||||
|
- GUI
|
||||||
|
- git-gui
|
||||||
|
- vscode上的一些扩展
|
||||||
|
- lazygit
|
||||||
|
- 自建git服务
|
||||||
|
- gitea
|
||||||
|
- 参考
|
||||||
|
- pro git
|
||||||
|
- learngitbranching.js.org
|
||||||
|
|
||||||
@@ -0,0 +1 @@
|
|||||||
|
# 什么是版本控制系统(VCS)?
|
||||||
@@ -0,0 +1 @@
|
|||||||
|
# git是如何进行版本控制的?
|
||||||
@@ -0,0 +1 @@
|
|||||||
|
# 新建一个git仓库
|
||||||
@@ -0,0 +1 @@
|
|||||||
|
# 跟踪文件,暂存文件
|
||||||
@@ -0,0 +1 @@
|
|||||||
|
# 提交commit
|
||||||
@@ -0,0 +1 @@
|
|||||||
|
# 分支(branch)介绍
|
||||||
@@ -0,0 +1 @@
|
|||||||
|
# HEAD和相对引用
|
||||||
@@ -0,0 +1 @@
|
|||||||
|
# 合并-merge与rebase
|
||||||
@@ -0,0 +1 @@
|
|||||||
|
# clone和origin
|
||||||
@@ -0,0 +1 @@
|
|||||||
|
# 远程分支是什么
|
||||||
@@ -0,0 +1 @@
|
|||||||
|
# fetch , pull & push !
|
||||||
1
docs/devdocs/_legacy/09-培训/01-git/05-托管平台/01-github.md
Normal file
1
docs/devdocs/_legacy/09-培训/01-git/05-托管平台/01-github.md
Normal file
@@ -0,0 +1 @@
|
|||||||
|
# github
|
||||||
1
docs/devdocs/_legacy/09-培训/01-git/05-托管平台/02-gitlab.md
Normal file
1
docs/devdocs/_legacy/09-培训/01-git/05-托管平台/02-gitlab.md
Normal file
@@ -0,0 +1 @@
|
|||||||
|
# gitlab
|
||||||
1
docs/devdocs/_legacy/09-培训/01-git/05-托管平台/03-gitea.md
Normal file
1
docs/devdocs/_legacy/09-培训/01-git/05-托管平台/03-gitea.md
Normal file
@@ -0,0 +1 @@
|
|||||||
|
# gitea
|
||||||
1
docs/devdocs/_legacy/09-培训/01-git/06-高级/01-gui.md
Normal file
1
docs/devdocs/_legacy/09-培训/01-git/06-高级/01-gui.md
Normal file
@@ -0,0 +1 @@
|
|||||||
|
# GUI
|
||||||
1
docs/devdocs/_legacy/09-培训/01-git/06-高级/02-selfhosted.md
Normal file
1
docs/devdocs/_legacy/09-培训/01-git/06-高级/02-selfhosted.md
Normal file
@@ -0,0 +1 @@
|
|||||||
|
# 自建Git服务
|
||||||
1
docs/devdocs/_legacy/09-培训/01-git/06-高级/03-references.md
Normal file
1
docs/devdocs/_legacy/09-培训/01-git/06-高级/03-references.md
Normal file
@@ -0,0 +1 @@
|
|||||||
|
# 参考
|
||||||
213
docs/devdocs/_legacy/09-培训/02-Web后端/01-Web后端的简单介绍.md
Normal file
213
docs/devdocs/_legacy/09-培训/02-Web后端/01-Web后端的简单介绍.md
Normal file
@@ -0,0 +1,213 @@
|
|||||||
|
# Web后端的简单介绍
|
||||||
|
这篇文章将带你学习构建一个Web后端的简单知识;作为一篇基础的教程,我们在教程里不会太多涉及诸如缓存,消息队列等高级内容,而是专注于基础的部分;我们也不会在一开始就涉及到具体的编程语言代码,而是将这篇文章作为一个理论性的介绍.你可能至少需要了解一些计算机的基础知识,比如html等,才可以了解文章中的一些概念.
|
||||||
|
|
||||||
|
## Web的历史
|
||||||
|
进行Web后端开发,首先需要知道Web的一些概念,实际上,“后端”这个概念不是一开始就存在的,随着人们对互联网需求的不断复杂化,后端的概念才出现了,我们首先来了解Web的发展历史
|
||||||
|
|
||||||
|
### 静态网页
|
||||||
|
互联网最开始只有静态网页,所谓“静态”,指的是网页中的内容是完全固定的,在服务器端存储了内容固定的html,css,或者是其他的什么文件,用户访问网页,就是通过互联网查看这些固定的文件。在这种情况下,你访问一个网站,从本质上更像是访问远端计算机上的某个文件夹
|
||||||
|
|
||||||
|
例如,如果要建立一个网站,那就在你的电脑上安装一个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通信包含了请求和回应,请求有客户端发起,回应是服务端返回给客户端
|
||||||
|
|
||||||
|
##### 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是服务器放在浏览器里的一些临时缓存,可以干一些事情,当然需要有这个东西才会在请求头里带着,我们也以后再谈
|
||||||
|
|
||||||
|
对于某些方法,需要在请求时向服务器夹带一些东西,请求体就是装载这些东西的
|
||||||
|
|
||||||
|
|
||||||
|
###### HTTP方法
|
||||||
|
HTTP方法定义了这个请求具体要对指定的文件做什么,其中:
|
||||||
|
- GET:获取指定的资源
|
||||||
|
- POST:上传指定的资源
|
||||||
|
- PUT:更新指定的资源,如果没有就创建一个
|
||||||
|
- PATCH:修改指定的资源
|
||||||
|
- DELETE:删除指指定的资源
|
||||||
|
- HEAD:和GET差不多,但是只要求服务器返回回应头,可以用在试探文件的大小上,来判断文件的更新情况,从而决定下一步操作
|
||||||
|
|
||||||
|
我们日常使用浏览器,比如在地址栏中输入`baidu.com`,其实就是在对这个地址做GET请求,一般用户使用浏览器,自己是不能做出除了GET之外的请求的,但是其他请求在现代的网站中被经常使用,这其实是前端脚本在工作,以后会解释
|
||||||
|
|
||||||
|
如果使用某一些方法的话,需要上传一些东西,那么这些东西就需要放在请求体里面,比如POST等
|
||||||
|
|
||||||
|
##### HTTP的响应
|
||||||
|
其实回应也分为回应头和回应体,回应头主要包含:
|
||||||
|
- 状态码:针对请求的回应有对应的状态,比如,如果GET请求没有问题,成功返回的话就返回200 OK状态码,如果找不到请求里对应的文件就会返回`404 Not Found`
|
||||||
|
- 内容格式:向浏览器说明回应体(若有)是什么格式的,文本文件的编码设置等,比如html文件?图片?这决定了浏览器如何对待这些文件
|
||||||
|
- 内容的大小:返回所请求资源的大小(若有)
|
||||||
|
|
||||||
|
回应体就是包含了回应的主体内容了,如果是GET请求的话,那么就回应了所GET文件的内容,如果是其他请求的话,可能也会没有回应体,具体看使用的方法
|
||||||
|
|
||||||
|
##### 一个例子
|
||||||
|
`GET`方法从服务器获得一个资源,我们在浏览器的地址栏输入一个地址时,就是在对这个URI做`GET`请求,前面的例子也是通过`GET`方法来进行的。
|
||||||
|
|
||||||
|
比如,发送`GET developer.zsxyww.com/test/test.txt`,那么就会把我们服务器上的test.txt这个文件发过来
|
||||||
|
|
||||||
|
`POST`方法向服务器上传一个资源,例如使用某个客户端发送`POST http://example.org/someprogram.exe`,在request body里面带上你的这个文件,那么`example.org`网站的根目录下就会多出一个叫做`someprogram.exe`的文件
|
||||||
|
|
||||||
|
除了上面介绍的这些方法,还有`DELETE`,`PATCH`等方法,分别对应了删除,修改一个资源,你可以在你的电脑上通过`curl`等程序,或者通过浏览器控制台来进行常规的`GET`之外的方法请求
|
||||||
|
|
||||||
|
:::tip 提示
|
||||||
|
|
||||||
|
httpbin.org 这个网站可以让你试验HTTP协议的方法
|
||||||
|
|
||||||
|
:::
|
||||||
|
|
||||||
|
不管使用的是什么方法,HTTP协议传输的对象都是一些固定静态的文件,这些文件的内容是什么就是什么,不会变化,这样的网页就叫做静态网页。
|
||||||
|
|
||||||
|
### 动态网页
|
||||||
|
这样的网页是不能满足大家对互联网的需求的,举例子来说:淘宝上有数不清的商品在售卖,如果淘宝为每一个商品都在服务器目录下面创建一个html文件,好让大家通过访问`http://taobao.com/someproduct.html`来查看商品信息,那这个工作量就非常大了,还有一些更重要的问题:这样的网页,基本上没有交互的功能,我们希望用户可以点击按钮就能购买商品,商家填写表单就能上传商品
|
||||||
|
|
||||||
|
#### CGI
|
||||||
|
这些都是静态互联网无法解决的问题,所以程序员们开发了一个叫CGI(Common Gateway Interface,通用网关接口)的技术,这种技术在用户请求网站的内容时,让一个脚本劫持用户的请求,返回给用户一个脚本动态生成的html文件,比如,如果用户想知道报名数据库里面目前所有的报名人员,发送`GET http://example.org/allVolunteer.html`,CGI程序发现给本机请求`allVolunteer.html`这个文件,并且程序的代码里写了:如果接受到对`/allVolunteer.html`的请求,那就去查找数据库里面的全部报名人员,并将返回结果插入到一个模板html文件中。程序返回这个文件,于是,用户就受到了CGI程序动态产生的html.
|
||||||
|
|
||||||
|
虽然CGI现在很少见了,但是将一个发送到服务器的地址请求劫持到脚本(函数)上是现代动态网站的常用思路。
|
||||||
|
|
||||||
|
#### JavaScript
|
||||||
|
除了服务器,浏览器也在为适配动态网站而更新。在1995年,网景公司的员工发明了一种编程语言,叫做"JavaScript",这是对当时新兴的Java和Java Applet的回应,这种语言最大的特点就是它被设计在浏览器中运行,并且可以调用相关接口来操作页面html,css内容和进行HTTP请求,他们让自己家的网景浏览器率先支持了这种编程语言(这个浏览器就是火狐浏览器的前身),这极大的提高了浏览器对于动态网页的支持。
|
||||||
|
|
||||||
|
#### AJAX(Asynchronous JavaScript and XML)
|
||||||
|
尽管是在浏览器里的语言,但是作为一个完整编程语言的JavaScript还是非常强大的,在有了操作DOM,发起HTTP请求的能力后,JavaScript,搭配一些后端的程序,可以做到CGI传统动态页面没有办法做到的功能:动态更新用户html页面上的内容。传统的后端CGI,可以动态生成html,但是这个html生成之后到用户的手里还是不会变化的,而JavaScript作为一个编程语言,通过运行在用户浏览器,可以操作html内容和发起HTTP请求,便可以自己异步地对服务器发送一些请求,依据这些内容便可以部分改变用户浏览器所显示的HTML,CSS,只需要浏览器重新渲染一遍就行了,这种技术就叫做AJAX,Asynchronous JavaScript and XML
|
||||||
|
|
||||||
|
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,代表一个文件时所表现的路径有所不同了
|
||||||
|
|
||||||
|
这些后端路径不是给用户设计的,通过浏览器直接访问这些地方大概会返回一些用户难以读懂的代码,他们是给JavaScript,或者另一种程序设计的,这种路径就叫做web API,他们是两个程序通过HTTP交互的地方,而不是人机交互的界面,我们先举一个例子,再解释这个问题
|
||||||
|
|
||||||
|
:::tip 提示
|
||||||
|
|
||||||
|
AJAX技术在今天已经非常常用了,以至于很多人都意识不到他们在使用AJAX技术
|
||||||
|
|
||||||
|
:::
|
||||||
|
|
||||||
|
##### 一个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`这个脚本,脚本再做一些工作,录入数据库,如果一切都成功了,就向客户端发送回应成功,反之则回应失败的消息,回应的内容可以是一个纯文本,或者直接是状态码,比如,就返回一个JSON:
|
||||||
|
|
||||||
|
```JSON
|
||||||
|
|
||||||
|
{
|
||||||
|
"status":"success",
|
||||||
|
"submit":{
|
||||||
|
"name":"小明",
|
||||||
|
"freeday":"2023-11-25",
|
||||||
|
"phone":10000000000
|
||||||
|
},
|
||||||
|
"createdAt":"2023-10-25_9:23:22"
|
||||||
|
}
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
在JavaScript脚本接收到回应后,根据返回的内容,操作html文件的内容,在提交按钮的下面一行插入一个文本块:
|
||||||
|
|
||||||
|
```HTML
|
||||||
|
|
||||||
|
<div id="json_responses">
|
||||||
|
<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>
|
||||||
|
<p id="json:createdAt">服务端提交创建时间:2023-10-25 9:23:22</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
或者其他的信息
|
||||||
|
|
||||||
|
#### URI在现代的意义
|
||||||
|
从刚才的这个例子中,我们可以看到网站的URI,其实慢慢的不止可以指代一个文件了,他更多的是指代一个资源,或者一个业务,向`submit.php`提交一个`POST`请求,难道是在远端创建一个`submit.php`程序?其实在这里更多是指将客户端的数据上传到这个`/api/submit/submit.php`的业务窗口,我们的后端开发,也是建立在这种对虚拟的路径的请求下的。例如我们设计一个报名系统,我们可以设计一个API接口叫做`POST http://api.yourwebsite.io/newVolunteer`,接受浏览器js的报名信息提交,在服务器,根本就没有`/newVolunteer`这个文件,连文件夹都不一定会有,全靠路由在工作(见下篇文章)
|
||||||
|
|
||||||
|
### Web应用
|
||||||
|
#### WebSocket
|
||||||
|
HTTP的动态网站已经很好了,但是协议本身有一个缺点:一个HTTP连接分为请求和响应,只能由客户端发起请求,服务端返回响应,如果客户端没有先发一点什么给服务端的话,服务端是没办法先给客户端发信息的,这就给一些更加复杂的要求增添了障碍:比如通过浏览器和别人聊天,需要接受来自服务器发给你的其他人的聊天的信息;或者是在浏览器上玩游戏,需要和服务器交换数据。这可以通过轮询来解决,但是这样还是不方便。
|
||||||
|
|
||||||
|
WebSocket是一个全新的协议,支持客户端和服务器的全双工通信,即客户端和服务器都可以主动地发消息,而且可以同时进行,而且是采用较小的数据帧格式,降低了网络开销,提高了数据传输速度。WebSocket在建立连接后保持长时间有效,不需要为每次消息发送重新建立连接,因此效率更高。
|
||||||
|
|
||||||
|
为了兼容HTTP协议,WebSocket也是监听80和443端口(HTTPS),握手采用了HTTP协议,通过升级协议来建立连接,如果可以升级,服务器会返回101状态码,升级连接.
|
||||||
|
|
||||||
|
:::info 信息
|
||||||
|
|
||||||
|
对于WebSocket过于详细的介绍超出了本篇文章的内容,可以自行了解
|
||||||
|
|
||||||
|
:::
|
||||||
|
|
||||||
|
##### Server-Sent Events(SSE)
|
||||||
|
WebSocket是一个全新的协议,兼容性可能不是那么好,如果要求比较低的话,可以看一看Server-Sent Events,这个协议基于HTTP,允许服务器主动给客户端发送信息,当然也请自行了解。
|
||||||
|
|
||||||
|
#### 在Web上运行应用
|
||||||
|
传统观念里,一个应用程序是在计算机上直接运行的,但是在介绍了上面的技术之后,我们可以想到,在Web上也是可以运行应用程序的,通过现代的高性能JavaScript运行时,可以提供类似于原生的运行速度,通过WebSocket,可以快速的更新内容,现在的HTML和CSS也足够强大,用户的机器性能也越来越强了,而且,开发Web应用可以直接使用成熟的Web技术栈,在浏览器中运行也更安全,以至于现在很多本地的应用也开始使用Web技术了(electron)。
|
||||||
|
|
||||||
|
例如,我们所使用的腾讯文档,支持多人协作编辑,就使用了WebSocket技术来向你主动发送其他人对文档编辑的信息
|
||||||
|
|
||||||
|
#### 单页应用(SPA)
|
||||||
|
一个现代的网站,或者说一个提供服务的Web应用,流行单页应用架构,顾名思义,服务器只会在用户打开网页时加载一段html文件,后面的全部内容都是通过js动态更新的,js和服务器的后端接口交互主要是采用AJAX,对于某些复杂的需求,可能会需要使用前面的技术,WebSocket或者SSE
|
||||||
|
|
||||||
|
`React.js`就是贯彻单页应用思想最彻底的前端框架,单页应用的坏处就是打破了为静态网页文件设计的“收藏”功能和前进后退,也不利于SEO和无障碍,因为用户在网站上只打开一个网页,网页的内容根据用户操作由浏览器脚本动态更新,而生成的html也大多没有做语义化优化,难以被理解和解析
|
||||||
|
|
||||||
|
SPA的例子就是邮箱应用(比如Gmail),通过浏览器访问你的邮箱,通过邮箱的主页面点某个邮件,你并没有进入一个新的页面,而是在原有的页面上,内容变成了邮件查看的界面,如果在主页面上点击发件的话,同样也没有一个发件页面,而是直接呈现发件的UI
|
||||||
|
|
||||||
|
有时候,通过AJAX调用API的HTTP交互没办法满足一些需求,比如说服务器主动推送信息,或者流式传输(比如直播平台,游戏等),这个时候就需要使用前面提到的技术,前面的腾讯文档就是一个例子,还有就是网络聊天室(matrix之类),需要向浏览器主动推送信息,还有直播平台,需要将源源不断的多媒体数据传递到用户那里,还有网络游戏需要快速在浏览器和服务器之间交换游戏数据,但是一般这些应用的基础框架都是建立在传统AJAX上的,只是业务部分采用其他协议实现,这些现代的应用慢慢地将计算量转移到了前端,而后端只负责存储和提供,查询数据,甚至后端都不用负责产生html,只需要提供API,来为前端提供数据就行
|
||||||
|
|
||||||
|
|
||||||
|
##### WebAssembly
|
||||||
|
WebAssembly是最近新出现的技术,他允许开发者将C/C++ , Rust等原本的一些编译型语言编译成浏览器可以执行的字节码,使得在浏览器中也可以执行这些程序,目前也有一些使用WebAssembly的应用,可以去看看,最大的好处就是不会JavaScript也能开发前端,也可以复用以前的代码(当然,这个其实是前端的内容)
|
||||||
|
|
||||||
|
## Web后端-是干什么的?
|
||||||
|
前面用非常长的一段文字来介绍Web的发展历史,就是为了说明Web后端是干什么的,或者说,编写一个Web后端需要干什么?
|
||||||
|
|
||||||
|
如果你想写一个静态网站,那么简单的http服务器就可以满足你,不需要你手动写什么代码;如果你想写一个基于AJAX的服务(比如我们网维现在的报修系统),那么你需要设计好API,和前端沟通好序列化相关事项,或者是返回JSON信息什么的让前端处理,还是返回html让浏览器渲染;如果你想写一个WebSocket的Web应用那就要难一些了,可能需要掌握一些并发编程的知识才可以写出一个可以使用的服务
|
||||||
|
|
||||||
|
我们接下来的教程,将注重开发一个现代的AJAX后端服务,同时辅助提供一些静态文件托管的功能。
|
||||||
|
|
||||||
|
|
||||||
|
### Web后端的组成
|
||||||
|
一个Web后端主要由以下部分组成:
|
||||||
|
- 路由(router)
|
||||||
|
- 处理(handler)
|
||||||
|
- 数据库/ORM
|
||||||
|
- 鉴权
|
||||||
|
- 模板(如果需要)
|
||||||
|
|
||||||
|
详细的信息,请阅读下一篇文章:[Click Me](./基于HTTP的Web后端的组成)
|
||||||
|
|
||||||
|
:::tip 提示
|
||||||
|
|
||||||
|
读完这篇文章之后,你可以回顾文章里的内容,问一问自己:
|
||||||
|
|
||||||
|
- Web经历了哪些发展阶段?
|
||||||
|
- 前后端之间是如何使用HTTP协议交互的?
|
||||||
|
- AJAX技术是什么?是如何支撑起现代的网页的?(单页应用)
|
||||||
|
|
||||||
|
推荐在看下一篇文章之前看看下面的参考文章
|
||||||
|
|
||||||
|
:::
|
||||||
|
|
||||||
|
## 参考
|
||||||
|
在读完这篇文章后,你可以去详细阅读这篇文档:https://developer.mozilla.org/zh-CN/docs/Learn/Server-side/First_steps/Introduction (**强烈推荐!**)
|
||||||
|
|
||||||
|
这里是关于HTTP协议的详细介绍:https://developer.mozilla.org/zh-CN/docs/Web/HTTP
|
||||||
156
docs/devdocs/_legacy/09-培训/02-Web后端/02-基于HTTP的Web后端的组成.md
Normal file
156
docs/devdocs/_legacy/09-培训/02-Web后端/02-基于HTTP的Web后端的组成.md
Normal file
@@ -0,0 +1,156 @@
|
|||||||
|
# 基于HTTP的Web后端的组成
|
||||||
|
一个基于HTTP的Web后端通常有以下部分组成:
|
||||||
|
|
||||||
|
##### 路由系统(router)
|
||||||
|
|
||||||
|
路由系统负责处理用户访问网页时的请求路径/方法,并转交给对应的处理者
|
||||||
|
|
||||||
|
|
||||||
|
##### 处理者(handler)
|
||||||
|
|
||||||
|
处理者负责处理用户的请求,读取用户在URI中的参数,和请求体中的内容(如果有)等,统称为上下文(Context),负责返回请求所对应的回应
|
||||||
|
|
||||||
|
有的系统还会继续细分,将业务层和接口层分开(这种情况下通常接口层是和路由功能合并的)
|
||||||
|
|
||||||
|
|
||||||
|
_最低要求是这个,另外,通常一个后端系统还需要连接一个数据库:_
|
||||||
|
|
||||||
|
|
||||||
|
##### 数据库
|
||||||
|
|
||||||
|
通常是兼容SQL协议的关系型数据库,负责存储后端所需要用到和产生的信息
|
||||||
|
|
||||||
|
_其实很多后端系统无非就是对数据库的增删改查(所谓的CRUD),可以说这些系统就是数据库的一层方便wrapper_
|
||||||
|
|
||||||
|
|
||||||
|
##### 鉴权系统
|
||||||
|
|
||||||
|
通常,我们系统的内容不打算对互联网上的任何一个人开放,所以我们需要一些方法来验证访问者的身份
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
##### 模板系统(optional)
|
||||||
|
|
||||||
|
如果你打算通过后端渲染HTML返回到用户浏览器,那你需要一套模板来方便地将动态内容插入到模板里面返回给用户,如果是一个纯粹API的站点,还是想直接把工作甩给前端,你就可以不用配置模板
|
||||||
|
|
||||||
|
|
||||||
|
此外,还有一些外围的工作:
|
||||||
|
|
||||||
|
##### 反向代理
|
||||||
|
|
||||||
|
通常我们的Web后端服务不是直接暴露对外访问的,而是经过一层代理的转发,这样更加的安全,配置也更加简单,服务只需要监听本地端口
|
||||||
|
|
||||||
|
##### 配置系统
|
||||||
|
|
||||||
|
你的系统需要读取配置,比如监听端口,数据库连接,还有其他服务的密钥等
|
||||||
|
|
||||||
|
##### CI/CD
|
||||||
|
|
||||||
|
自动化配置构建,部署,测试等工作,让你专注代码工作,而不用把心思过多地放在部署构建这些工作上面
|
||||||
|
|
||||||
|
## 路由
|
||||||
|
假设你的一个报名服务架设在`service.io`上:
|
||||||
|
|
||||||
|
首先,用户访问这个网址时需要显示一段欢迎文字,然后将他们引导到报名的页面
|
||||||
|
|
||||||
|
那么,你应该在用户访问`/`时返回一个html文件,里面含有导向`/volunteer.html`的超链接
|
||||||
|
|
||||||
|
`/volunteer.html`里面的前端代码需要以AJAX的形式与后端API交互,比如:
|
||||||
|
|
||||||
|
`service.io/api/register`接受POST请求,前端上传报名人的信息,后端录入数据库,并返回录入的信息,全部以JSON序列化
|
||||||
|
|
||||||
|
`service.io/api/view`接受GET请求,让这个报名人查看自己的报名信息,返回JSON格式
|
||||||
|
|
||||||
|
`service.io/api/cancel`接受POST请求,取消某个报名人的信息,成功则返回相应状态码
|
||||||
|
|
||||||
|
`service.io/admin/viewAll`让管理员查看当前的所有报名,接受GET请求
|
||||||
|
|
||||||
|
`service.io/admin/cancel`让管理员取消任意的报名,接受的POST
|
||||||
|
|
||||||
|
在现代网站设计中,我们不是在根目录下面创建对应的文件(实际上,连根目录都不需要了),我们使用一些叫做“路由器(router)”的模块,当用户通过一定的方法请求一定的路径时,就把这些请求转交到相应的handler
|
||||||
|
### URI参数
|
||||||
|
参数在正常路径后面,以?开始,以&分割,以键值对的形式存在
|
||||||
|
|
||||||
|
例如:`service.io/api/register?name=小明&phone=10000000000&freeday=2024-9-25`
|
||||||
|
|
||||||
|
这样的参数可以被许多后端框架使用内置的解析器解析
|
||||||
|
|
||||||
|
### 参数化路径
|
||||||
|
这种路径通常是配合REST风格的接口来设计的,比如:
|
||||||
|
|
||||||
|
`service.io/api/users/小明`
|
||||||
|
|
||||||
|
类似于这样的路径,许多后端框架可以使用`service.io/api/users/:user`这样的形式来匹配,在转交给的handler中可以读取`:user`参数,从而返回参数所指定的资源
|
||||||
|
### API设计
|
||||||
|
API的设计包括了路径的设计和接口格式的设计,一般小项目可以相对地随便一点,但是大项目还是需要认真一点的
|
||||||
|
#### 传统
|
||||||
|
我们刚才所举的例子就是一个传统的API设计,一个路径就对应了一个业务点,一般只会使用`GET`和`POST`来对应获取和上传,前后端的交互一般在文档里自行约定,或者采用内置的表单(如果数据比较简单的话)
|
||||||
|
#### REST
|
||||||
|
REST的意思是“表现层状态转换”(英语:Representational State Transfer,缩写:REST),这种风格的要点是一个URI表示一个资源,而不是一个业务,同时充分地利用HTTP方法
|
||||||
|
|
||||||
|
例如,我们在前面定义了`Register`,`View`和`Cancel`三个API,如果是要上传什么就用`POST`,获取`GET`,一个路径表示的是一个业务,而不是系统的某个资源,下面来看看REST怎么写:
|
||||||
|
|
||||||
|
`POST service.io/api/users/小明` 用户小明提交一个报名,具体的报名信息在请求体里,这将在数据库里面创建一个小明的报名记录
|
||||||
|
|
||||||
|
`GET service.io/api/users/小明` 用户小明查看自己的报名信息
|
||||||
|
|
||||||
|
`DELETE service.io/api/users/小明` 取消小明的报名
|
||||||
|
|
||||||
|
`PUT service.io/api/users/小明` 修改小明的报名信息,新信息放在请求体里面了
|
||||||
|
|
||||||
|
可以发现,REST风格的API可以看作是对传统静态网页互联网的回归,这种风格直观简洁,兼容性更好,更加利于缓存等
|
||||||
|
|
||||||
|
#### GraphQL
|
||||||
|
GraphQL是一种用于API交互的查询语言,他意图解决接口格式定义和多次查询带来的复杂问题
|
||||||
|
|
||||||
|
首先,后端需要支持GraphQL,然后,前端需要在API请求中注明自己想后端用什么格式呈现什么想要的信息,这样就不需要前端多次请求不同的业务了
|
||||||
|
|
||||||
|
这对大型系统或许比较友好,但是如果只是一些小项目的话,这可能有些复杂,具体可以自己去了解
|
||||||
|
## handler
|
||||||
|
handler可以说是一个后端系统的核心了,因为他们是实际处理业务的地方
|
||||||
|
### 面向对象与模型
|
||||||
|
虽然可以使用其他的范式,但是最推荐的是依据OOP的原则,将需要处理的模型写成对象,将一系列操作写成对象的方法
|
||||||
|
例如,报名系统本质上就是处理“报名人”这个对象的各种操作,我们可以定义:
|
||||||
|
|
||||||
|
```Go
|
||||||
|
|
||||||
|
type Volunteer struct{
|
||||||
|
config.DB
|
||||||
|
id int
|
||||||
|
Name string
|
||||||
|
Phone int
|
||||||
|
FreeDay time.Time
|
||||||
|
Note string
|
||||||
|
}
|
||||||
|
|
||||||
|
func (v *volunteer)Add()error{
|
||||||
|
if err:=db.addVolunteer(v.MainConnection) err!=nil{
|
||||||
|
return err
|
||||||
|
}
|
||||||
|
return nil
|
||||||
|
}
|
||||||
|
|
||||||
|
```
|
||||||
|
要设计一个登记报名的handler,就只需要将前端发过来的信息反序列化到Volunteer对象里,然后调用Add方法即可,这种思路就叫做面向对象
|
||||||
|
|
||||||
|
所设计的Volunteer和他的一系列方法就叫做“模型”
|
||||||
|
|
||||||
|
## 数据库
|
||||||
|
数据库为后端的业务数据提供了方便的存储和查询服务,这里指的是结构化数据,其他需求可以去看高级教程
|
||||||
|
### SQLite
|
||||||
|
这是个轻量级的数据库,一个数据库就是一个文件,通常用于业务量比较小的场景或者是本地开发的场景
|
||||||
|
### PostgreSQL
|
||||||
|
这个可以说是目前最厉害的开源数据库了,不仅提供了常规的结构化功能,而且对于一些简单的非结构化存储需求也可以胜任,但是本身的资源消耗是有点高的
|
||||||
|
|
||||||
|
### 选择数据库的各种考量
|
||||||
|
- 业务量:如果业务量比较小的话,就使用SQLite吧
|
||||||
|
- 兼容性:如果现有的环境和业务依赖于某个数据库,那么就继续用吧
|
||||||
|
### ORM
|
||||||
|
ORM是对数据库的一层抽象,让你专注于业务逻辑的开发,而不用担心具体的数据库问题,如果对于性能或者其他的方面没有很大的需求的话,建议在你的项目里使用ORM
|
||||||
|
## 鉴权
|
||||||
|
### Session
|
||||||
|
### JWT
|
||||||
|
### OAuth2.0
|
||||||
|
|
||||||
|
## 模板
|
||||||
|
### Jinja2
|
||||||
11
docs/devdocs/_legacy/09-培训/02-Web后端/03-高级教程.md
Normal file
11
docs/devdocs/_legacy/09-培训/02-Web后端/03-高级教程.md
Normal file
@@ -0,0 +1,11 @@
|
|||||||
|
# 高级教程
|
||||||
|
本篇是Web后端的进阶系列文章
|
||||||
|
## 缓存
|
||||||
|
### 为什么我们需要缓存?
|
||||||
|
对于某些需要高频读写的数据,放在数据库中的速度会比较慢,所以我们需要一个缓存俩提供快速访问,这些缓存通常放在内存中,提供最快的访问速度
|
||||||
|
### Redis 和 Memcached
|
||||||
|
## 消息队列
|
||||||
|
|
||||||
|
## 日志与监控
|
||||||
|
|
||||||
|
## NoSQL与非结构化数据
|
||||||
21
docs/devdocs/_legacy/_后端API服务_/01-概览.md
Normal file
21
docs/devdocs/_legacy/_后端API服务_/01-概览.md
Normal file
@@ -0,0 +1,21 @@
|
|||||||
|
# 后端API服务
|
||||||
|
## 介绍
|
||||||
|
该项目作为网维的统一后端API接口而设计,连接网维的数据库,并提供一系列接口给前端以支持网维日常的业务逻辑,其他开发人员可以直接调用这些接口,从而专注与前端,以便于降低整个系统设计的复杂度
|
||||||
|
|
||||||
|
该项目采用Go语言编写,Web框架采用echo,ORM框架为gorm,
|
||||||
|
## 项目地址
|
||||||
|
https://github.com/ZSCNetSupportDept/zscnetworksupport-api
|
||||||
|
## 构建
|
||||||
|
要想构建该项目,你需要安装`Go`和`make`,在一台linux机器上构建
|
||||||
|
|
||||||
|
输入`make install`即可安装本项目的依赖,而不构建
|
||||||
|
|
||||||
|
输入`make build`即可构建该项目,项目放在`make`文件夹下
|
||||||
|
## 部署
|
||||||
|
只需要把可执行文件放在生产环境下运行即可,本项目可能会提供一些静态文件访问,需要将`static`放在与可执行文件相同的目录下
|
||||||
|
## 配置
|
||||||
|
程序接受,且只接受一个参数,为配置文件的路径,关于配置文件的格式,请参照“配置”一章
|
||||||
|
## 运行
|
||||||
|
运行后,程序会将日志和错误文件输出到stdout中,你可以配置系统服务来使程序开机自启动,将输出定向到日志或者stderr里
|
||||||
|
|
||||||
|
在运行程序之后,你还要配置一些反向代理的软件,来将流量导向程序所监听的端口,你还要定期续期https证书,以保证https访问
|
||||||
13
docs/devdocs/_legacy/_后端API服务_/02-配置.md
Normal file
13
docs/devdocs/_legacy/_后端API服务_/02-配置.md
Normal file
@@ -0,0 +1,13 @@
|
|||||||
|
# 配置
|
||||||
|
# 介绍
|
||||||
|
配置为一个`json`文件,其中,各个字段的定义如下:
|
||||||
|
|
||||||
|
`port`:一个数字,为程序所监听的端口
|
||||||
|
|
||||||
|
`database`:
|
||||||
|
- `Type`:一个字符串,指定了所使用的数据库的类型,需要在`MySQL` `PostgreSQL` `SQLite`中选择一个
|
||||||
|
- `Path`:对于SQLite填写数据库的位置,对于其他的数据库填写URL
|
||||||
|
- `Port`:数据库所监听的端口,SQLite可以不用填,以下也是
|
||||||
|
- `User`:数据库用户名
|
||||||
|
- `name`:数据库名称,
|
||||||
|
- `Password`:数据库密码
|
||||||
22
docs/devdocs/_legacy/_后端API服务_/03-结构.md
Normal file
22
docs/devdocs/_legacy/_后端API服务_/03-结构.md
Normal file
@@ -0,0 +1,22 @@
|
|||||||
|
# 结构
|
||||||
|
仓库项目的结构如下:
|
||||||
|
|
||||||
|
`main.go`:项目程序的起点,从此处开始运行
|
||||||
|
|
||||||
|
`config`:存放了读取配置,提供配置变量相关的代码
|
||||||
|
|
||||||
|
`databases`:提供了连接数据库相关的代码,提供主数据库连接变量(Usingdb)
|
||||||
|
|
||||||
|
`handlers`:为handler的存放地点,一类业务为一个对象,handler作为其方法实现
|
||||||
|
|
||||||
|
`model`:业务所采用的模型,定义了一个业务对象的存储和相关方法
|
||||||
|
|
||||||
|
`use`:在这里注册所有需要提供的API和中间件,程序将使用这里的配置
|
||||||
|
|
||||||
|
`make`:存放了构建所产生的程序
|
||||||
|
|
||||||
|
`static`:存放了静态文件以进行路由
|
||||||
|
|
||||||
|
## 原理
|
||||||
|
当程序运行时:
|
||||||
|
main()将调用sysinit(),读取参数中的配置,将配置记录在全局变量`config.UseConfig`中
|
||||||
@@ -1,18 +1,26 @@
|
|||||||
# 网络维护科wiki首页
|
import DocsCard from '@site/src/components/wiki_menu/index';
|
||||||
## 介绍
|
import DocsCardList from '@site/src/components/wiki_menu/index';
|
||||||
这里是中山学院网络维护科wiki,记录了网络维护工作的相关知识,wik的内容都是历代网维的成员整理总结的,你也可以贡献自己的内容
|
|
||||||
## wiki的内容
|
# 网络维护科wiki
|
||||||
**wiki基本由以下部分组成:**
|
|
||||||
### 技能
|
你好!欢迎访问中山学院网络维护科wiki,这里力求记录网络维护工作的累积经验📝
|
||||||
修网所要掌握的各种技能
|
|
||||||
### 基础知识
|
wiki的内容都由历代网维的成员整理总结,在GitHub上开源。欢迎你[贡献自己的内容!](https://github.com/ZSCNetSupportDept/website/tree/master/docs/wiki)
|
||||||
修网的基础知识
|
|
||||||
### 片区介绍
|
:::tip 提示
|
||||||
我们需要维护的片区,以及在这些片区值班的注意事项
|
|
||||||
### 故障介绍
|
本站在电脑端下显示效果最好,推荐使用电脑端访问
|
||||||
当网络发生故障时,客户端通常会返回一个错误码,来提示可能发生的错误,这里,按照运营商分类,介绍常见的故障错误码,**如果你遇到的故障在这里没有收录,请转到旧版wiki**\
|
|
||||||
提示:对于电信客户端,可以用客户端自带的修复软件来修复
|
:::
|
||||||
### MacOS修理指南
|
|
||||||
MacOS的修理事项
|
## 目录
|
||||||
## 旧wiki
|
☝🏻🤓*不知道从哪里看起?可以先看[快速入门指南](/blog/2024/09/27/给纯新手的网维快速入门指南)!*
|
||||||
这里是新版wiki,但是旧版wiki依然可用,你可以通过[wiki.zsxyww.com](https://wiki.zsxyww.com) 来访问,上面还有没有迁移的许多旧文章,我们目前在逐步转移这些文章
|
<cardContainer>
|
||||||
|
<DocsCard/>
|
||||||
|
</cardContainer>
|
||||||
|
|
||||||
|
## 关于
|
||||||
|
1. 本站是新版wiki,在界面上对旧版wiki做了一次升级。但是在内容上新的wiki并不是完全基于旧版wiki而来,所以有的内容只在旧版有,这里没有。虽然开发组正在逐步迁移,不过为了方便大家查看,旧版wiki也将保持长期开放,点击[这里](https://wiki.zsxyww.com) 来访问。
|
||||||
|
|
||||||
|
2. wiki的内容属于网维内部的秘密信息,请不要随便外传,谢谢!
|
||||||
|
|
||||||
|
|||||||
@@ -1,11 +0,0 @@
|
|||||||
# 查看ip
|
|
||||||
许多情况下,检查故障的第一步就是查看用户在局域网中的ip,以进行进一步判断,本文将教会你如何查看ip,以及不同的ip地址意味着什么
|
|
||||||
## 操作
|
|
||||||
1. 打开cmd界面,你可以按win+r弹出运行框,输入cmd,然后回车
|
|
||||||
2. 在cmd提示符后输入`ipconfig`命令,此时应该会输出结果
|
|
||||||
3. 根据结果进行下一步操作
|
|
||||||
## 结果
|
|
||||||
### 无地址
|
|
||||||
### 172.xx.xx.xx地址
|
|
||||||
### 169.254.xx.xx地址
|
|
||||||
### 192.168.xx.xx地址
|
|
||||||
86
docs/wiki/03-技能/01-电脑技能/01-查看ip.md
Normal file
86
docs/wiki/03-技能/01-电脑技能/01-查看ip.md
Normal file
@@ -0,0 +1,86 @@
|
|||||||
|
---
|
||||||
|
|
||||||
|
description: 教你如何查看电脑的IP
|
||||||
|
|
||||||
|
---
|
||||||
|
# 查看ip
|
||||||
|
|
||||||
|
许多情况下,检查网络故障的第一步就是查看用户在校园网中的ip,以进行进一步判断
|
||||||
|
|
||||||
|
所以,你需要学会如何查看电脑所连接的网络的ip,了解不同ip地址的含义.
|
||||||
|
|
||||||
|
(网维的负责范围是以太网连接,所以这里的ip是指以太网ip.)
|
||||||
|
|
||||||
|
## 操作
|
||||||
|
### 方法一:命令行
|
||||||
|
1. 按<kbd>win</kbd>+<kbd>r</kbd>弹出"运行"框,输入`cmd`或`powershell`,按下回车。
|
||||||
|
> 或是在开始菜单中寻找对应的程序,打开终端。
|
||||||
|
|
||||||
|
2. 在终端下输入`ipconfig`命令;
|
||||||
|
|
||||||
|
3. 此时应该会输出结果:通常由许多栏目组成,我们只关心其中的“以太网”部分的IPv4地址。
|
||||||
|
### 方法二:控制面板选项
|
||||||
|
1. 打开“网络和拨号连接”控制面板:
|
||||||
|
> 你可以打开控制面板 → 网络和 Internet → 网络和共享中心 → 更改适配器设置(左侧菜单)。
|
||||||
|
|
||||||
|
> 或是按<kbd>win</kbd>+<kbd>r</kbd>,输入 ncpa.cpl,然后按回车。
|
||||||
|
|
||||||
|
> 也可以在终端输入`control ncpa.cpl`来打开。
|
||||||
|
|
||||||
|
2. 打开 ncpa.cpl 后,会看到所有网络连接的列表(如`以太网`,`Wi-Fi`,`蓝牙网络连接`等),点击`以太网`,查看其中的IPv4地址。
|
||||||
|
|
||||||
|
## 结果
|
||||||
|
### 无地址的情况:
|
||||||
|
|
||||||
|
如果无法获取IPv4地址的话,说明电脑到交换机之间的物理连接是不通的,你需要逐步排查到底哪里出现了问题。
|
||||||
|
|
||||||
|
常见的情况可能有:
|
||||||
|
|
||||||
|
- 用户使用了网线转接器,转接器出现问题
|
||||||
|
- 用户网线问题
|
||||||
|
- 墙线问题
|
||||||
|
- 用户在交换机那头的线缆没有接好
|
||||||
|
- 交换机断电(有电就可以获取IP,查不到IP说明交换机没有开启)
|
||||||
|
|
||||||
|
列举的原因仅供参考,实际出现的情况可能千奇百怪,请[利用寻线器系统地排查故障](/docs/wiki/技能/网络相关/对线#系统地排查)。
|
||||||
|
|
||||||
|
### 172.xx.xx.xx地址的情况:
|
||||||
|
这是正常情况下的地址,其中:
|
||||||
|
|
||||||
|
|IP地址的号段|对应的情况|
|
||||||
|
|- |- |
|
||||||
|
|172.20|已接入移动网络|
|
||||||
|
|172.19|已接入电信网络|
|
||||||
|
|172.18|已接入联通网络|
|
||||||
|
|
||||||
|
如果用户无法在网络中认证,请询问用户账号所属运营商,用户使用哪个运营商,就必须把线路接到对应的运营商设备中去。
|
||||||
|
|
||||||
|
:::tip 提示
|
||||||
|
|
||||||
|
如果移动用户获取到172.17.x.x的IP的话,请上报组长,通常是移动的交换机还没有完成OTA更新。
|
||||||
|
|
||||||
|
:::
|
||||||
|
|
||||||
|
### 169.254.xx.xx地址的情况:
|
||||||
|
出现这个地址,意味着运营商的DHCP服务器工作不正确。这通常不是用户设置的问题,是运营商那边的交换机设置出现问题。
|
||||||
|
|
||||||
|
如果出现这个IP,不能正常连接网络的话,把用户的线路接到一个不同的交换机上,再尝试连接。如果交换机那边没有多余的端口或是端口都无法正常连接的话,拍下交换机标签,和出现情况的片区,楼层一起上报当日的值班组长。
|
||||||
|
|
||||||
|
移动出现这个问题的情况比较多,有时候这不会影响正常网络连接,如果没问题就不需要管。
|
||||||
|
|
||||||
|
*有人反馈说usb2.0的转接口也会导致这个问题,我在[这里](/docs/wiki/杂项/关于169.254.x.x的ip问题汇总)开了一个专题页,你们可以把遇到的情况记录在这里*
|
||||||
|
|
||||||
|
### 192.168.xx.xx地址的情况:
|
||||||
|
首先,我们说的是**有线网**的地址喔!**不要**看用户所连接的**Wi-Fi的IP地址**,在修网过程中,通常应该首先断开用户的Wi-Fi连接,以免干扰有线网环境。
|
||||||
|
|
||||||
|
如果你确定用户以太网IP是192.168.xx.xx,请检查宿舍路由器的工作模式。路由器需要设置到**有线AP模式**,意思是路由器以一个交换机的模式工作,将用户流量直接发往WAN
|
||||||
|
|
||||||
|
学校的路由器有不同的型号和牌子,它们的设置文档在[ZSC网维下载中心](https://gitea.zsxyww.com/i/Downloads/src/branch/master/%E8%B7%AF%E7%94%B1%E5%99%A8%E8%AE%BE%E7%BD%AE%E6%96%87%E6%A1%A3);
|
||||||
|
|
||||||
|
:::warning 注意
|
||||||
|
|
||||||
|
如果是光猫出现了这种情况,不要乱动,直接上报组长。
|
||||||
|
|
||||||
|
:::
|
||||||
|
|
||||||
|
如果用户到交换机没有路由器中继的话,出现192.168.xx.xx地址,也是直接上报组长。
|
||||||
85
docs/wiki/03-技能/01-电脑技能/03-拨号.md
Normal file
85
docs/wiki/03-技能/01-电脑技能/03-拨号.md
Normal file
@@ -0,0 +1,85 @@
|
|||||||
|
---
|
||||||
|
|
||||||
|
description: 教你如何连接校园网
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
# 连接校园网
|
||||||
|
|
||||||
|
:::warning 注意
|
||||||
|
|
||||||
|
🚧施工中🚧
|
||||||
|
这篇文章还没有写完呢!😛
|
||||||
|
|
||||||
|
:::
|
||||||
|
|
||||||
|
用户需要进行登录,向运营商证明自己的身份,才能连接到运营商提供的网络服务,这些方式被我们统一叫做“拨号”,只有拨号成功了才可以连接网络
|
||||||
|
自从2025年开学移动更改认证方式以来,现在的各家上网拨号流程已经非常割裂,所以我们重新写了这篇文章,力求汇总目前已经掌握的知识:
|
||||||
|
|
||||||
|
## 电信
|
||||||
|
电信使用专用的客户端进行上网认证,一般来说连接没有问题的话,试图访问网站就会跳转到下载的网址,然后下载app即可
|
||||||
|
|
||||||
|
如果没有跳转的话,记住网址是`zsteduapp.10000.gd.cn`,进入后选择对应的OS下载安装
|
||||||
|
|
||||||
|
安装后输入账号密码连接(参见[这里](/docs/wiki/基础知识/学校内的运营商#账户和密码 )),即可上网了
|
||||||
|
|
||||||
|
如果出现错误,可以使用自带的排障工具,如果还是有问题,参阅wiki里面的相关章节(错误码)
|
||||||
|
## 联通
|
||||||
|
联通使用系统自带PPPoE拨号上网的方式进行认证:
|
||||||
|
|
||||||
|
1. 在“开始”菜单中点击“设置”
|
||||||
|
|
||||||
|
2. 点击"网络和Internet",在左侧点击“拨号”
|
||||||
|
|
||||||
|
3. 点击“设置新连接”,点击"宽带(PPPoE)"
|
||||||
|
|
||||||
|
4. 输入账号和密码(参见[这里](/docs/wiki/基础知识/学校内的运营商))
|
||||||
|
|
||||||
|
5. 测试连通性,错误请参见wiki里的“错误”章节
|
||||||
|
|
||||||
|
### 账号错误
|
||||||
|
有些用户的账号可能不是默认账号,见此:[Click Me](/docs/wiki/故障/联通特定/账号不正确)
|
||||||
|
## 移动
|
||||||
|
|
||||||
|
:::warning 注意
|
||||||
|
|
||||||
|
移动目前的上网方式涉及了两套账密,为了防止大家混淆了,首先在这里说明一下:
|
||||||
|
|
||||||
|
实际上,移动的这个上网界面是外包给锐捷做的,使用的是一个现成的校园网解决方案,叫做"ePortal";这个系统不只是我们学校在用,也不是只给移动用。所以为了方便一套代码到处卖出去,这个系统设计成"学校账号"和"运营商账号"绑定使用的方式。
|
||||||
|
|
||||||
|
"运营商账号"就是原来的那个,需要用户到营业厅办理,是手机号+密码组合,这点和其它运营商是一样的。但是这个账号现在不通过操作系统的原生拨号来使用,而是要向架设在学校内网的专门ePortal服务器,结合"学校账号"来认证。
|
||||||
|
|
||||||
|
"学校账号"的目的只是证明你是我们学校的某个特定的学生。在第一次使用ePortal的时候需要注册,需要用户使用自己的学号来注册,后续登录ePortal**也是使用这个账号登录**,在学校账号的设置界面,有一个"绑定"选项,在这里输入运营商那个账号,证明你,学校的学生,办理了运营商套餐。这样才能使用移动的校园网。
|
||||||
|
|
||||||
|
总结下:**使用校园网=证明你是学生的账号+证明你办理套餐的账号**,后者需要在前者的设置界面绑定。
|
||||||
|
|
||||||
|
:::
|
||||||
|
|
||||||
|
### 1.访问ePortal
|
||||||
|
ePortal的入口是`https://172.16.20.129:8080`,网址需要在校园内网环境才能访问(即连接了网线或者路由器)。我们强烈推荐在使用有线网访问时时关闭Wi-Fi,即确保设备仅仅在连接学校内网,否则有可能出现某些问题。
|
||||||
|
|
||||||
|
### 2.学校账号的注册
|
||||||
|
点击右上角的“自助服务”,或者直接在第一步访问相应的网址。输入学号和密码(初始密码是学号后六位),然后进入系统,为了安全考虑,需要强制修改密码。
|
||||||
|
|
||||||
|
修改密码的地方在首页菜单第一个,进去修改了就行。哦对,这个密码最好不要设置成常用密码,因为这个系统好像是明文存储密码的...
|
||||||
|

|
||||||
|
|
||||||
|

|
||||||
|
|
||||||
|
### 3.绑定邮箱
|
||||||
|
我们非常,非常推荐用户绑定一个邮箱!因为如果学校账号的密码忘了,可以通过这个找回。而且这是唯一的方式。除非让管理层找运营商后台重置。
|
||||||
|
|
||||||
|
绑定邮箱的入口位于左上角`用户设置`->`安全中心`,在弹出界面绑定邮箱即可。
|
||||||
|

|
||||||
|
|
||||||
|

|
||||||
|
|
||||||
|
### 4.运营商账号
|
||||||
|
点击主页设置最后一个"我的运营商",然后输入你的运营商账号,确认保存。
|
||||||
|

|
||||||
|
|
||||||
|

|
||||||
|
|
||||||
|
### 5.连接网络
|
||||||
|
这样子一般就可以连接到互联网了,在浏览器输入任意网址,会提示你登录,输入学校账号登录即可。另外可以开启无感验证功能,这样可以自动登录校园网。
|
||||||
|

|
||||||
6
docs/wiki/03-技能/01-电脑技能/_02-检查网络接口.md
Normal file
6
docs/wiki/03-技能/01-电脑技能/_02-检查网络接口.md
Normal file
@@ -0,0 +1,6 @@
|
|||||||
|
# 检查操作系统网络设备
|
||||||
|
一台电脑可以有多个网络接口,这些设备可以是具体的也可以是虚拟的,例如,一个以太网口可能对应一个网络设备,一个Wi-Fi连接也是一个网络设备,一个VPN隧道也是一个网络设备,这片文章教你如何查看Windows操作系统中的网络接口设备
|
||||||
|
## 操作
|
||||||
|
1. 打开“控制面板”
|
||||||
|
2. 选择“网络和Internet”
|
||||||
|
3. 在右侧打开“网络和共享中心”选项,再点击“更改适配器设置”
|
||||||
3
docs/wiki/03-技能/01-电脑技能/_category_.json
Normal file
3
docs/wiki/03-技能/01-电脑技能/_category_.json
Normal file
@@ -0,0 +1,3 @@
|
|||||||
|
{
|
||||||
|
"description": "在维修过程中需要掌握的电脑操作~"
|
||||||
|
}
|
||||||
11
docs/wiki/03-技能/01-电脑技能/index.md
Normal file
11
docs/wiki/03-技能/01-电脑技能/index.md
Normal file
@@ -0,0 +1,11 @@
|
|||||||
|
# 电脑技能
|
||||||
|
维修的时候要使用电脑,这里介绍电脑的基本操作
|
||||||
|
|
||||||
|
|
||||||
|
*请选择一个板块查看:*
|
||||||
|
|
||||||
|
import DocCardList from '@theme/DocCardList';
|
||||||
|
|
||||||
|
<DocCardList className="docs-card" />
|
||||||
|
|
||||||
|
|
||||||
16
docs/wiki/03-技能/01-电脑技能/设置路由器.md
Normal file
16
docs/wiki/03-技能/01-电脑技能/设置路由器.md
Normal file
@@ -0,0 +1,16 @@
|
|||||||
|
---
|
||||||
|
|
||||||
|
description: 教你如何设置路由器(不涉及光猫维修)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
# 设置路由器
|
||||||
|
|
||||||
|
:::warning 注意
|
||||||
|
|
||||||
|
🚧施工中🚧
|
||||||
|
|
||||||
|
这篇文章还没有写完呢!😛
|
||||||
|
|
||||||
|
:::
|
||||||
|
暂时还没写,设置文档请访问下载中心查看。
|
||||||
39
docs/wiki/03-技能/02-网络相关/01-寻线器-介绍.md
Normal file
39
docs/wiki/03-技能/02-网络相关/01-寻线器-介绍.md
Normal file
@@ -0,0 +1,39 @@
|
|||||||
|
# 寻线器-介绍
|
||||||
|
介绍寻线器的原理和用处,它是你成为网络工程师的基础
|
||||||
|
## 介绍
|
||||||
|
|
||||||
|
任何网络连接的最底层基础都是物理设备,如果网线,配线架或交换机这些物理设备本身出现了问题,我们网维也是要负责维修的。
|
||||||
|
|
||||||
|
在[`基础知识`](/docs/wiki/基础知识/学校的网络结构)板块中,我们已经详细介绍了学校网络的物理层架构。网维主要负责宿舍端口到楼层交换机这一段线路。也就是说,我们主要关注宿舍内的端口,床线和路由器;还有楼层机房中汇聚的这层楼所有宿舍端口的链路。
|
||||||
|
|
||||||
|
想象一下,在楼层机房密密麻麻的机柜和桥架中,面对着上百根外观一模一样的网线,如果没有标签指示端口对应的床位的话,我们该如何快速找到一根网线的两端?或者,当怀疑网络连接不稳定是网线本身的问题时,我们又该如何快速判断线缆内部的通断情况?
|
||||||
|
|
||||||
|
这时,一个功能强大但操作简单的工具——寻线仪,就成了我们解决问题的关键。我们会帮助大家快速了解寻线仪的工作原理,并熟练掌握其在网络维修中的核心用法。
|
||||||
|
## 认识寻线器
|
||||||
|
### 原理
|
||||||
|
一套标准的寻线仪通常包含两个核心部件:
|
||||||
|
|
||||||
|
- **发射器** (Emitter/Transmitter): 它产生一个特定频率的信号,并将其发射到目标线缆中。
|
||||||
|
|
||||||
|
- **接收器** (Receiver/Probe): 它探测这个信号,帮助我们在线缆堆里定位目标。
|
||||||
|
|
||||||
|
寻线仪的原理基于电磁感应。
|
||||||
|
当我们将发射器连接到一根网线的一端并启动后,发射器会沿着这条网线的铜质线芯发送一个带有特定频率的模拟或数字信号。这种信号的本质是导线内变化的电流,根据电磁感应定律,变化的电流会在导线周围产生一个变化的电磁场。
|
||||||
|
|
||||||
|
这个电磁场虽然微弱,但足以被灵敏的接收器捕捉到。当我们手持接收器的探头,靠近那一大捆线缆时,只有包含了我们发射信号的那根目标线缆,其周围的电磁场才能被接收器感知到。接收器在接收到信号后,会通过发出“嘀嘀嘀”的蜂鸣声或点亮指示灯来给我们提示。声音越响亮、越清晰,就代表探头离目标线缆越近。通过这种方式,我们就能从众多线缆中精准地把它识别出来。
|
||||||
|
|
||||||
|
### 作用
|
||||||
|
在网络维修的物理层故障排查中,寻线仪是不可或缺的工具,主要解决两大难题:
|
||||||
|
|
||||||
|
- **从海量线缆中精准寻线**: 这是最核心的用途。通过**寻线**功能,可以在楼层交换机海量的线缆中,快速、准确地找到某个宿舍端口线缆的另一端,进行飞线或故障排查。
|
||||||
|
|
||||||
|
- **快速诊断线缆状态**: 通过**对线**功能,可以快速判断一根网线的内部8芯线对的物理连接状态,例如是否存在断路、短路、错线、串扰等问题,这对于制作新网线或排查物理连接故障至关重要。
|
||||||
|
|
||||||
|
## 注意
|
||||||
|
1. 每一对寻线器的发射端和接收端都是一一对应的,不同的寻线器对之间不能混用。如果在签到和签退时,检查寻线器的工作情况时,发现寻线器可以亮,但是没法工作,可以先看看是不是昨天值班的人把不同套的寻线器装混了。
|
||||||
|
|
||||||
|
2. 用完寻线器记得一定要把电源关掉!之前有很多次,有的成员忘记关掉寻线器导致电池耗光,需要重新补充电池的情况。这样不仅会损害机器,也要麻烦API们到处跑来补充物资,下班用完寻线器一定要记得检查电源是不是关闭的!
|
||||||
|
|
||||||
|
3. 目前网维的寻线器型号大部分是精明鼠268型,但是有的片区也装备了不同的型号,有的可能不是太好用。遇到的话记得上报组长。
|
||||||
|
|
||||||
|
*另附: [精明鼠NF-268使用说明书](/downloads/documents/多用途线缆寻线器NF-268说明书-1.pdf),使用前请看一遍说明书!*
|
||||||
3
docs/wiki/03-技能/02-网络相关/_category_.json
Normal file
3
docs/wiki/03-技能/02-网络相关/_category_.json
Normal file
@@ -0,0 +1,3 @@
|
|||||||
|
{
|
||||||
|
"description": "网络工程师基础"
|
||||||
|
}
|
||||||
7
docs/wiki/03-技能/02-网络相关/index.md
Normal file
7
docs/wiki/03-技能/02-网络相关/index.md
Normal file
@@ -0,0 +1,7 @@
|
|||||||
|
# 网络相关
|
||||||
|
|
||||||
|
*请选择一个板块查看:*
|
||||||
|
|
||||||
|
import DocCardList from '@theme/DocCardList';
|
||||||
|
|
||||||
|
<DocCardList className="docs-card" />
|
||||||
114
docs/wiki/03-技能/02-网络相关/对线.md
Normal file
114
docs/wiki/03-技能/02-网络相关/对线.md
Normal file
@@ -0,0 +1,114 @@
|
|||||||
|
---
|
||||||
|
|
||||||
|
description: 如何通过对线来测试网线工作情况,与如何利用对线的信息排查网络连接
|
||||||
|
|
||||||
|
---
|
||||||
|
# 寻线器-对线
|
||||||
|
:::warning 注意
|
||||||
|
|
||||||
|
🚧施工中🚧
|
||||||
|
|
||||||
|
这篇文章还没有写完呢!😛
|
||||||
|
|
||||||
|
:::
|
||||||
|
|
||||||
|
寻线器的“对线”功能也叫线序测试(Wiremap),用于检查网络链路内部8芯线对的连接情况和品质。
|
||||||
|
|
||||||
|
如果我们要使用对线功能,一般是如下情况:
|
||||||
|
|
||||||
|
1. **检查一段网络线路物理层是否正常(比如用户端口到交换机)**
|
||||||
|
|
||||||
|
2. **检查某根网线是不是工作正常**
|
||||||
|
|
||||||
|
我们先来讲对线网线的操作:
|
||||||
|
|
||||||
|
## 网线的对线
|
||||||
|
1. **连接线缆两端**: 将待测试网线的一端连接到发射器的RJ45端口,另一端连接到接收器的RJ45端口。
|
||||||
|
|
||||||
|
2. **开启对线模式**: 将发射器的功能选择开关拨到“对线”档位。
|
||||||
|
|
||||||
|
3. **观察并解读指示灯**: 此时,发射器和接收器上的8个线序指示灯(分别对应1-8号线芯)会开始闪烁。你需要对比两端的亮灯情况来判断线路状态。
|
||||||
|
|
||||||
|
### 闪烁情况
|
||||||
|
网络链路可能会有如下情况:
|
||||||
|
|
||||||
|
- **正常**:如果是标准的直通线(T568B或T568A),发射器和接收器上的1到8号指示灯会一一对应、同步、依次快速闪烁。这是最理想的状态。
|
||||||
|
|
||||||
|
- **断路/开路** (Open): 线缆的线芯断开,体现为某一根或几根线芯的指示灯在**两端都不亮**,这些线芯存在断路,信号无法通过。
|
||||||
|
|
||||||
|
- **短路**:线芯之间互相接触了,体现为发射端正常,但是**接收端**的几根线芯不亮,说明内部存在短路,通常是水晶头没做好,需要重做水晶头。
|
||||||
|
|
||||||
|
- **乱序/错线**(Miswire):线序接乱了,表现为发射端和接收端指示灯的闪烁顺序不一致(例如,发射器上是1-2-3-4...,而接收器上是1-3-2-4...),需要重做水晶头。
|
||||||
|
|
||||||
|
- **交叉** (Crossover): 如果是交叉线,指示灯会按照交叉的配对规则亮起(如1对3,2对6等)。
|
||||||
|
|
||||||
|
## 物理线路的排查
|
||||||
|
对于物理线路的排查,其实和测试网线差不多。最重要的是,需要知道某些网络设备(如路由器,交换机等)可以视为寻线器的接收端。如果网线一端连接发射端,另一端连接路由器或交换机。那么在正常工作的情况下,发射端就会像网线那样正常亮起。在这里不需要使用寻线器的接收端。
|
||||||
|
|
||||||
|
### 系统地排查
|
||||||
|
这种方法只能说明寻线器到信号发射设备(楼层交换机,宿舍路由器等)的整体线路有没有问题,如果有问题,对线操作本身无法测出是哪一个部分有问题,这个时候,就需要我们进行系统的方法测试排查:
|
||||||
|
|
||||||
|
下面是理想情况下校园网的结构,在实际工作中,每个片区我们只需要接触到其中的一部分:
|
||||||
|
```mermaid
|
||||||
|
|
||||||
|
graph LR
|
||||||
|
subgraph 用户设备
|
||||||
|
电脑-->转接器-->网线;
|
||||||
|
end
|
||||||
|
subgraph 宿舍线路
|
||||||
|
网线--**面板**--->端口--**床线**--->宿舍路由器;
|
||||||
|
end
|
||||||
|
subgraph 机房线路
|
||||||
|
宿舍路由器--**墙线**--->配线架-->交换机;
|
||||||
|
end
|
||||||
|
交换机-->yys[(互联网)]
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
对线结果显示有问题的话,我们可以更换已知的正常设备来排查错误的地方
|
||||||
|
|
||||||
|
假如你遇到了这样的情况:用户ip查不到,怀疑是物理连接错误,于是你将用户的网线从ta的电脑上拔下来,插在对线器上:
|
||||||
|
```mermaid
|
||||||
|
|
||||||
|
|
||||||
|
graph LR
|
||||||
|
title[<u>这时候还是对线失败!</u>]
|
||||||
|
title-->电脑
|
||||||
|
style title fill:#FFF,stroke:#FFF
|
||||||
|
linkStyle 0 stroke:#FFF,stroke-width:0;
|
||||||
|
|
||||||
|
subgraph 用户设备
|
||||||
|
电脑-->转接器-.❌..->网线;
|
||||||
|
end
|
||||||
|
网线--**面板**--->端口--**墙线**--->配线架
|
||||||
|
subgraph 机房线路
|
||||||
|
配线架-->交换机;
|
||||||
|
end
|
||||||
|
**对线器**==>网线
|
||||||
|
|
||||||
|
```
|
||||||
|
这个时候,对线还是失败的,于是你将用户的网线从端口上拔下来,拿出一根已知是工作正常的网线,插在对线器和端口上:
|
||||||
|
``` mermaid
|
||||||
|
|
||||||
|
graph LR
|
||||||
|
title[<u>这样对线成功了!</u>]
|
||||||
|
title-->电脑
|
||||||
|
style title fill:#FFF,stroke:#FFF
|
||||||
|
linkStyle 0 stroke:#FFF,stroke-width:0;
|
||||||
|
|
||||||
|
subgraph 用户设备
|
||||||
|
电脑-->转接器-->用户的网线;
|
||||||
|
end
|
||||||
|
用户的网线-.**❌**..->端口--**墙线**--->配线架
|
||||||
|
subgraph 机房线路
|
||||||
|
配线架-->交换机;
|
||||||
|
end
|
||||||
|
**对线器**==>**你的网线**-->端口
|
||||||
|
|
||||||
|
|
||||||
|
```
|
||||||
|
这下成功对线了,由此我们可以得出**是用户的网线有问题**
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
对于其它错误也是同样的道理,不断排除工作正常的环节,就可以确定工作不正常的环节,找到出现错误的地方之后,就可以按照情况进行修理了
|
||||||
43
docs/wiki/03-技能/02-网络相关/寻线.md
Normal file
43
docs/wiki/03-技能/02-网络相关/寻线.md
Normal file
@@ -0,0 +1,43 @@
|
|||||||
|
---
|
||||||
|
|
||||||
|
description: 如何寻线,即已知网线的一端,找到网线的另一端
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
# 寻线器-寻线
|
||||||
|
:::warning 注意
|
||||||
|
|
||||||
|
🚧施工中🚧
|
||||||
|
|
||||||
|
这篇文章还没有写完呢!😛
|
||||||
|
|
||||||
|
:::
|
||||||
|
|
||||||
|
|
||||||
|
所谓寻线,就是已知网线的一端,找到网线的另一端。
|
||||||
|
|
||||||
|
用户的端口走墙线到宿舍路由器(或者香晖朝晖的楼层弱电井),我们是看不见藏在墙后面的网线的走向的,观察机房(或者路由器)那里,只能看到茫茫多的网线端口插到交换机上,根本分不清交换机上的哪个线对应哪个宿舍的哪个床位
|
||||||
|
|
||||||
|
香晖的机房有一个床位表,记录了机房的哪个端口对应了哪个宿舍的床位,但是其它地方是没有这个表的,那该怎么确定一个宿舍床位端口对应的是机房的哪个配线架端口呢?
|
||||||
|
|
||||||
|
寻线器可以帮助我们确定这件事,这篇文章将为你介绍寻线器是如何使用的。
|
||||||
|
|
||||||
|
## 操作步骤
|
||||||
|
|
||||||
|
1. 连接发射器: 将你需要寻找的网线一端(比如用户的网线)从设备上拔下,然后插入到寻线仪发射器的RJ45端口中。
|
||||||
|
|
||||||
|
2. 开启寻线模式: 将发射器的功能选择开关拨到“寻线”档位。此时,状态指示灯会闪烁,表示信号已经开始发送。
|
||||||
|
|
||||||
|
3. 手持接收器开始寻找: 前往线缆的另一端,手持接收器,将接收器的探头逐一扫过每一根可能的线缆。
|
||||||
|
|
||||||
|
4. 根据声音定位目标: 当接收器的探头接触到带有信号的目标网线时,你会听到清晰且连续的“嘀嘀嘀”声。你可以通过接收器上的音量调节旋钮来控制音量大小。声音最响亮、最稳定的那一根,就是你要找的目标网线。
|
||||||
|
|
||||||
|
5. 最终确认: 为了100%确认,可以将疑似目标线缆从线束中稍微拉出一点,单独用接收器再测一次,如果声音依然强烈,就把这根线缆拔下来,插到接收器的端口里,如果这个时候接收器8灯同时亮起且很大声地响起,那就找到了。
|
||||||
|
|
||||||
|
寻线时通常采用先粗略,后精确的策略:先把寻线器灵敏度调到最高,这样就算离目标很远也会响,这样我们可以确定目标所在的大致的范围。然后逐步调小灵敏度,缩小搜索圈,直到确定那根线缆是你的目标~
|
||||||
|
|
||||||
|
## 技巧
|
||||||
|
|
||||||
|
- 接收器拥有极为先进的3.5mm耳机孔:zany:,如果机房噪音比较大或者有人投诉声音打扰了他们的话可以找个耳机插上去寻线。
|
||||||
|
|
||||||
|
- 接收器还有手电筒,可以帮助你照亮交换机端口。在朝晖那里很有用,但是亮度可能不如手机的好。
|
||||||
64
docs/wiki/03-技能/02-网络相关/打水晶头.md
Normal file
64
docs/wiki/03-技能/02-网络相关/打水晶头.md
Normal file
@@ -0,0 +1,64 @@
|
|||||||
|
---
|
||||||
|
|
||||||
|
description: 制作网线水晶头
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
# 做网线
|
||||||
|
当网线损坏时,我们需要重新制作网线,通常是更换网线的水晶头,本篇文章就是教你如何打水晶头的
|
||||||
|
## 工具
|
||||||
|
|
||||||
|
- **网线(双绞线)**:通常是CAT5e或CAT6的网线。
|
||||||
|
- **RJ45水晶头**:用于连接网线的标准接口。
|
||||||
|
- **网线钳**:用于剥线、压线和剪线的多功能工具。
|
||||||
|
- **剪刀或剥线工具**:用于切割和剥离网线外皮。
|
||||||
|
- **寻线器**:用于测试制作好的网线是否正常工作。
|
||||||
|
|
||||||
|
## 操作
|
||||||
|
### 准备工作
|
||||||
|
1. 测量并切割网线:根据实际需要的长度,使用网线钳或剪刀剪下适量的网线。留出一点余量以防止错误。
|
||||||
|
|
||||||
|
2. 剥离网线外皮:用网线钳或专用剥线工具,剥离网线的一端外皮,剥离长度约为1-2厘米,露出内部的八根细线。注意,不要伤到内部的细线。
|
||||||
|
### 整理网线内部的线对
|
||||||
|
|
||||||
|
网线内部通常有四对不同颜色的线,每对线由一条实色线和一条相应颜色的白色线组成。
|
||||||
|
按照**568B线序**,将网线从左向右排列好
|
||||||
|
|
||||||
|
568B线序为:**橙白,橙,绿白,蓝,蓝白,绿,棕白,棕**
|
||||||
|
|
||||||
|
将这些线按顺序排列整齐。可以轻轻拉直每根线,以减少弯曲,使它们更容易插入水晶头。
|
||||||
|
|
||||||
|
### 修剪并插入到水晶头
|
||||||
|
|
||||||
|
1. 修剪线头:将所有线头排列整齐,用剪刀或网线钳将线头剪齐,留下大约1厘米的线头。
|
||||||
|
|
||||||
|
2. 插入水晶头:保持线的顺序,将八根线按顺序小心地插入RJ45水晶头中。插入时确保每根线都到达水晶头的顶端。**水晶头的金属触点应该朝上,锁扣朝下。**
|
||||||
|
|
||||||
|
### 压接水晶头
|
||||||
|
|
||||||
|
将水晶头放入网线钳:确保线头已经插到水晶头的最顶端,并且没有松动。将水晶头插入网线钳的压线口。
|
||||||
|
|
||||||
|
压接水晶头:用力握紧网线钳,直到听到“咔哒”一声,确保水晶头内部的金属片刺入每根线芯,完成接线。
|
||||||
|
### 测试网线(可选)
|
||||||
|
打开寻线器,调整到对线模式,将制作好的网线插入测试仪的两端,检查是否有任何断线或错误连接。
|
||||||
|
|
||||||
|
## 注意事项
|
||||||
|
|
||||||
|
- 检查线序:在线插入水晶头之前,务必再三确认线序是否正确。
|
||||||
|
- 剥线时小心:避免剥线时过度用力,损坏内部细线。
|
||||||
|
- 保持线头整齐:确保线头整齐一致,以保证每根线都能够正确接触到水晶头的金属片。
|
||||||
|
|
||||||
|
## 关于线序
|
||||||
|
以太网连接的线序常见分为TIA/EIA-568A和TIA/EIA-568B两种,区别如下:
|
||||||
|
|
||||||
|
568A:白绿,绿,白橙,蓝,白蓝,橙,白棕,棕
|
||||||
|
|
||||||
|
568B:白橙,橙,白绿,蓝,白蓝,绿,白棕,棕
|
||||||
|
|
||||||
|
以前网线会有交叉线,平行线的分别:
|
||||||
|
|
||||||
|
网线一头做成568B,一头568A,就叫做交叉线,通常用于两台同级计算机的互联
|
||||||
|
|
||||||
|
网线的两头都是568B,就叫平行线,通常用于计算机和交换机,路由器等上级设备的互联
|
||||||
|
|
||||||
|
现在的网线都是做成平行线,计算机会自动识别网线的线序并处理,做成T568B就好
|
||||||
4
docs/wiki/03-技能/02-网络相关/重做端口.md
Normal file
4
docs/wiki/03-技能/02-网络相关/重做端口.md
Normal file
@@ -0,0 +1,4 @@
|
|||||||
|
# 重做端口
|
||||||
|
如何重新制作宿舍端口面板
|
||||||
|
|
||||||
|
端口的制作和网线的制作差不多,在整理线序是就不需要按照顺序排列了,端口上有对应的颜色,把网线按进去就行。
|
||||||
9
docs/wiki/03-技能/02-网络相关/飞线.md
Normal file
9
docs/wiki/03-技能/02-网络相关/飞线.md
Normal file
@@ -0,0 +1,9 @@
|
|||||||
|
# 飞线
|
||||||
|
飞线~
|
||||||
|
:::warning 注意
|
||||||
|
|
||||||
|
🚧施工中🚧
|
||||||
|
|
||||||
|
这篇文章还没有写完呢!😛
|
||||||
|
|
||||||
|
:::
|
||||||
3
docs/wiki/03-技能/03-杂项/_category_.json
Normal file
3
docs/wiki/03-技能/03-杂项/_category_.json
Normal file
@@ -0,0 +1,3 @@
|
|||||||
|
{
|
||||||
|
"description": "其它需要掌握的技能"
|
||||||
|
}
|
||||||
8
docs/wiki/03-技能/03-杂项/index.md
Normal file
8
docs/wiki/03-技能/03-杂项/index.md
Normal file
@@ -0,0 +1,8 @@
|
|||||||
|
# 杂项
|
||||||
|
|
||||||
|
*请选择一个板块查看:*
|
||||||
|
|
||||||
|
import DocCardList from '@theme/DocCardList';
|
||||||
|
|
||||||
|
<DocCardList className="docs-card" />
|
||||||
|
|
||||||
21
docs/wiki/03-技能/03-杂项/解绑端口,刷新数据.md
Normal file
21
docs/wiki/03-技能/03-杂项/解绑端口,刷新数据.md
Normal file
@@ -0,0 +1,21 @@
|
|||||||
|
---
|
||||||
|
|
||||||
|
description: 遇到运营商端口绑定时需要进行的操作(691错误)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
# 解绑MAC地址
|
||||||
|
为了限制上网的设备过多,即多人共用账号的情况,运营商会在一个设备第一次登录网络时,绑定设备的MAC地址。之后就只能使用该设备登录网络。
|
||||||
|
|
||||||
|
如果我们更换了转接头,或者电脑,设备的MAC地址就会变化,运营商就会拒绝新设备的登录,返回691错误。这时就需要我们解除对MAC地址的绑定。
|
||||||
|
|
||||||
|
## 操作
|
||||||
|
- 用开通宽带的手机号码(即宽带账户)拨打运营商电话,转人工;
|
||||||
|
- 告诉客服,说:清除本机号码绑定的宽带的端口数据;
|
||||||
|
- 等待客服回复“已清除”;
|
||||||
|
- 告诉客服,说:解绑;
|
||||||
|
- 可能会需要服务密码,如果用户记得服务密码可以使用服务密码,否则交给用户报一下身份证号码;
|
||||||
|
- 等待客服回复“已解绑”
|
||||||
|
- 拔下网线,等待 20 ~ 30 秒后插上;
|
||||||
|
- 拨号,一般可以完美解决;
|
||||||
|
- 如果不行,可以重新拨打电话操作。
|
||||||
15
docs/wiki/03-技能/03-杂项/辨别床位.md
Normal file
15
docs/wiki/03-技能/03-杂项/辨别床位.md
Normal file
@@ -0,0 +1,15 @@
|
|||||||
|
---
|
||||||
|
|
||||||
|
description: 床位
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
|
||||||
|
# 辨别床位
|
||||||
|
当初在安装香晖宽带的时候,运营商给宿舍床位的编号和床上写的并不一样。一般宿舍通常进门左手边第一个是1号床,然后逆时针分别是2,3,4号床。
|
||||||
|
|
||||||
|
不过香晖的床位是下面这样的:
|
||||||
|
|
||||||
|

|
||||||
|
|
||||||
|
了解一下,可以帮你节省寻线的时间。
|
||||||
7
docs/wiki/03-技能/index.md
Normal file
7
docs/wiki/03-技能/index.md
Normal file
@@ -0,0 +1,7 @@
|
|||||||
|
# 技能
|
||||||
|
|
||||||
|
*请选择一个板块查看:*
|
||||||
|
|
||||||
|
import DocCardList from '@theme/DocCardList';
|
||||||
|
|
||||||
|
<DocCardList className="docs-card" />
|
||||||
@@ -1,14 +0,0 @@
|
|||||||
# 对线
|
|
||||||
宿舍以太网的连接由网线负责传输,如果网线,或者配线架,交换机这些物理设备本身的端口出现了问题,那么网络就当然无法连接,对线的过程便是测试物理连接是否能工作的流程
|
|
||||||
## 操作流程
|
|
||||||
### 准备
|
|
||||||
打开寻线器,将寻线器的模式调到“对线”档位,将网线的一端插入到接口内,将另一端插入到要测试的端口
|
|
||||||
### 检查
|
|
||||||
如果寻线器上的1-8灯全部亮的话,那么说明物理层连接没有问题,如果有哪个灯不亮,那么说明对应的电线不通,一般只要1,2,3,6灯亮起,那么网络才能保证最基本工作,但是网速会比较慢
|
|
||||||
## 排查
|
|
||||||
对线只能指示寻线器到信号发射设备(楼层交换机,宿舍路由器等)的整体线路是否完好,如果这中间有问题,他是无法测出是哪一个部分的问题的,这个时候,就需要我们进行测试排查
|
|
||||||
### 流程
|
|
||||||
假如我们有如下的连接:\
|
|
||||||
**电脑-转接口-用户网线-用户端口-宿舍线路-路由器-楼层线路-配线架-交换机**\
|
|
||||||
对线结果显示有问题的话,我们可以更换已知的正常设备来排查错误的地方,例如,如果使用用户的转接口,用户的网线对线失败的话,那么就先更换成一个正常的转接口,如果还是失败,那么就把网线换成好的网线,如果这个时候对线成功了,那么我们就可以判断是用户网线的问题,就可以让用户更换网线了,如果还是失败的话,那么试一试将电脑直连路由器,如果成功了,那么就可以排查出,是宿舍墙线或者端口的问题,重做端口后用端口连接路由器,如果失败的话就可以发现是线路的故障,这个时候就可以尝试飞线或直接上报组长,如果直连主线没问题而经过路由器有问题的话,那么就是路由器的问题,如果直连交换机端口没问题,而在宿舍里有问题的话,那么就是楼层线路的问题,如果直连交换机有问题的话,那么就是交换机端口的问题,可以给用户换一个没问题的端口
|
|
||||||
|
|
||||||
@@ -1,8 +0,0 @@
|
|||||||
# 寻线
|
|
||||||
寻线就是寻找网线的两端,一个楼层的所有用户的网线,都要连接在交换机上,才能进一步连接到运营商网络,在弱电井里汇聚了一个楼层几百根线,如果有线路表的话还好,没有线路表的话,就需要通过寻线的方法,确定用户的端口,对应着交换机处的哪一根线
|
|
||||||
## 操作流程
|
|
||||||
打开寻线器,将寻线器的发射端接到需要寻线的一端,调到寻线挡,将接收端带去弱电井,如果接收端靠近对应的线的话,就会发出响声,将灵敏度调到最高,确定大致范围,再逐渐调低,同时缩小范围,最后找到对应的线\
|
|
||||||
接收端也有一个端口,如果你觉得可能是哪一个线,就把那个线拔下来插到端口里面,来确定你的猜想是否正确
|
|
||||||
## 工作原理
|
|
||||||
发射端向网线发射特殊的电磁信号,接收端可以通过电磁感应探测到这个信号并且发出声音
|
|
||||||
|
|
||||||
@@ -1 +0,0 @@
|
|||||||
# 打水晶头
|
|
||||||
@@ -1 +0,0 @@
|
|||||||
# 解绑端口,刷新数据
|
|
||||||
@@ -1 +0,0 @@
|
|||||||
# 设置路由器
|
|
||||||
@@ -1 +0,0 @@
|
|||||||
# 辨别床位
|
|
||||||
@@ -1 +0,0 @@
|
|||||||
# 重做端口
|
|
||||||
@@ -1 +0,0 @@
|
|||||||
# 飞线
|
|
||||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user