一、服务端开发基础（搭建Web服务器、网络基础概念、请求响应流程、配置Apache、静态网站与动态网站）

一、建立你的第一个网站（目标）

前端开发最终还是属于 Web 开发中的一个分支，想要成为一名合格的前端开发人员，就必须要充分理解Web 的概念。

构建一个专业的网站是一项巨大的工作！对于新手我们应该从小事做起，也就是说咱们不可能立马就要求自己能够开发出跟淘宝一样的电商平台，但是对咱们来说建立一个属于自己的 Blog 网站并不难（其实再大的系统也是由一些基础功能叠加出来的），所以咱们就从这个话题开始聊。

二、如何建立一个 Blog 网站

提问：到底什么是网站？
可以在浏览器上通过一个地址直接访问使用
用于提供一种（或多种）特定服务的一系列具备相关性的网页组合的整体例如：
博客、门户、电商、在线教育等

有了明确的目标过后，我们需要规划具体的业务方案，学习特定的技能，完成各项功能，解决各种过程中出现的问题。
在这里插入图片描述
2.1. 之前学习了什么？

在之前的学习过程中，我们很专注，没有关心这些东西在整体中是什么角色，起到什么作用。这里我们是时候总结一下我们之前学过了的内容：

网页开发技术（硬性）
o HTML——网页内容结构（GUl）
o CSS——网页外观样式（GUl）
o JavaScript——编程语言（可以用于调用浏览器提供的APl）
o Web APIs——网页交互（界面功能）
o jQuery——便捷手段（糖果而已，不是必要的）
编程能力/编程思想/解决问题的思路（软性）
o 我要做什么（我要得到什么），我目前有什么（我能拿到什么）

至此，我们已经可以独立完成网页开发了，具体能完成的东西就是一个一个的网页，而且还能给这个页面加上一些动态的交互。但是这距离成为一个网站还有一些路要走。
在这里插入图片描述

2.2.还需要学习什么？

想要完成完整的Web网站，还需要学习什么？

搭建WEB 服务器（提供网站服务的机器）
HTTP（浏览器与服务端的通讯协议）
服务端开发（动态网页技术）
数据库操作（服务端存储数据方式）
AJAX（浏览器与服务端的数据交互方式）

三、搭建Web服务器

服务器（提供服务）指的就是一台安装特定的软件的公共计算机，用于专门用于提供特定的服务。
o 按照服务类型的不同，又划分为：Web服务器、数据库服务器、文件服务器等等。

客户端（使用服务）指的是在一次服务过程中使用这个服务的设备（网络端点）。
o 目前咱们最常见的客户端就是浏览器

我们手头上的这些网页，如果想要成为一个网站，首先要完成的第一件事就是有一台公共的Web服务器，把这一系列的页面放到这台Web服务器上，让用户可以通过服务器的地址访问到这些网页。
在这里插入图片描述

思考：为什么不把这些网页放在我们自己电脑上呢？

那么，哪里有这样的服务器呢？

我们手头上的电脑都可以是一台服务器，因为服务器是一个相对的概念，只要能提供服务就可以是一个服务器（提供服务的时候就是服务端，使用服务的时候就是客户端）。
既然服务器就是安装特定的软件的计算机，那么要让自己的成为Web服务器就是要安装一个Web服务器软件。

3.1.Web服务器软件
在这里插入图片描述
3.2.安装Web服务器软件

这里我们选择一个比较常用的Web 服务器软件：Apache HTTP Server。

如果使用的是安装版，与其他软件相同，安装无外乎就是一路点下一步，只是需要注意安装目录路径中不要有中文。

由于最新的Apache 已经不提供Windows的安装版本了，所以我们这里使用的是解压版。

下载地址：https://www.apachelounge.com/download/
使用说明：https://httpd.apache.org/docs/current/platform/windows.html

安装方式如下，先解压到纯英文路径的文件夹，然后执行以下命令：

#注意：需要使用管理员身份运行命令行！！！
#切换到Apache解压路径中的bin目录
$cd<解压目录>/bin
#安装Apache服务，-n参数是指定服务名称
$httpd.exe-k install-n"Apache"
#如果需要卸载Apache，可以执行以下命令
$httpd.exe-k uninstall-n"Apache"

执行安装命令过后会报一个错，原因是默认的配置文件有问题，需要先调整一下配置文件conf/httpd.conf，才能正常启动服务。
在这里插入图片描述

找到Apache解压目录中的conf目录下的httpd.conf文件，定位到37行，将c:/Apache24改为解压目录，我这里解压到路径是c:/Develop/apache，所以我这里修改

修改完以后，执行以下命令重新测试配置文件是否通过。

$httpd.exe-t

这里任然报错：
在这里插入图片描述
通过错误信息得知，这里是因为另外一个地方配置的目录不存在导致的，所以接着调整246行的DocumentRoot选项：

随即，我们发现这个配置文件中有很多默认配置选项中的路径都c:/Apache24，所以我们批量都修改为我们解压的目录路径。
然后重新执行httpd.exe -t测试配置文件，这时候应该提示syntax ok。

如果有关于ServerName的警告提示，不用管它，暂时还不会影响我们接下来的使用和操作。

接着运行以下命令重新启动Apache服务：

#注意：需要使用管理员身份运行命令行！！！
$httpd.exe-k start-n"Apache"
#重新启动Apache 服务
$httpd.exe-k restart-n"Apache"
#停止Apache服务
$httpd.exe-k stop-n"Apache"

回到浏览器中，地址栏输入：http://localhost/，回车访问，这时正常应该看到It works！
在这里插入图片描述
3.3.提供Web 服务

启动 Apache，让别人可以使用你机器上安装的Apache提供的Web服务，访问你机器上的网站。这种情况下你的机器就是服务器，别人的机器就是客户端。
注意：

确保配置文件语法检查通过
确保80端口没有被其他程序占用
确保防火墙允许80端口的请求，或者干脆关掉防火墙
如果出现Forbidden情况，确保配置文件httpd.conf中247行（DocumentRoot之后）的Directory配置的与DocumentRoot路径相同
我们在开发阶段大多数都是自己访问自己机器上的网站，那这种情况下，我们既是服务端又是客户端。对于新手来说，最常见的问题就是分不清楚哪是客户端应该有的，哪是服务端应该有的。这种时候一定要保持清醒，客户端局限在浏览器窗口，代码以及Apache相关的文件和配置都是放在服务端的。

四、网络基础概念（必要）

在单个局域网下，结构非常简单，就是我们所连接的网络设备（网关）给我们分配了一个地址，在这个范围之内我们都可以通过这个地址找到我们的这个设备。

如果设备没有连接任何网络情况下，我们会有一个本地回环地址127.0.0.1

4.1.1 单个网络情况
在这里插入图片描述

4.1.2 多个网络情况

但是当一个设备同时处于多个网络下（比如同时连接了有线网卡和无线网卡），就会变得稍微复杂一点：
在这里插入图片描述

例如：
小明这个同学同时报名了两个课程，在A班级小明是班长，所有A班级的同学都管他叫班长（叫班长就能找到他）。而在B班级小明是课代表，所有B班的同学都管他叫课代表（叫课代表就能找到他）。
同样的一个人在不同的环境有不同的身份，这些身份只有特定的环境才生效。

纸上得来终觉浅，绝知此事要躬行！多尝试，多思考才能更好的理解这个问题。

4.2.域名

由于IP地址都是没有规律的一些数字组成的，很难被人记住，不利于广泛传播，所以就有人想出来要给IP起名字（别名）。

域名是需要花钱注册的

4.3. DNS
在这里插入图片描述

通过宽带运营商提供的服务器解析一个域名背后对应的IP，这个过程叫做DNS寻址，帮你完成DNS寻址过程的服务器叫做DNS服务器。

4.3.1.hosts文件

操作系统在发起对DNS服务器的查询请求之前，会优先检查本机的hosts文件。如果这个文件中包含了对当前需要解析的域名的配置，则不再发起对DNS 服务器的请求，直接使用hosts文件中的配置。
文件所在路径：

Windows: C:\Windows\System32\drivers\etc\hosts
macOS: /etc/hosts

注意：

本机的hosts文件配置只能到影响本机的DNS寻址
只有以管理员权限运行的编辑器才有权利修改hosts文件

4.4.端囗

计算机本身是一个封闭的环境，就像是一个大楼，如果需要有数据通信往来，必须有门，这个门在术语中就叫端口，每一个端口都有一个编号，每台计算机只有65536个端口（0-65535）。

一般我们把“占门”的过程叫做监听

可以通过在命令行中运行：netstat-an命令监视本机端口使用情况：
在这里插入图片描述

参考链接：

https://baike.baidu.com/item/%E6%9C%8D%E5%8A%A1%E5%99%A8%E7%AB%AF%E5%8F%A3
https://baike.baidu.com/item/%E7%AB%AF%E5%8F%A3

http默认的端口80
https默认的端口是443

4.5.URL

URL（Uniform Resource Locator），统一资源定位符，通俗点来说就是表示网络当中某一个网页的完整访问地址，它具有一定的格式：
在这里插入图片描述
例如：https://zce.me:80/schools/students？id=18&name=zce#photo

host 主机：zce.me:80
域名（主机名）：zce.me
请求路径：/schools/students
请求参数：id=18&name=zce
锚点值：#photo

五、请求响应流程

在这里插入图片描述

用户打开浏览器
地址栏输入我们需要访问的网站网址（URL）
浏览器通过DNS服务器获取即将访问的网站IP地址
浏览器发起一个对这个IP的请求
服务端接收到这个请求，进行相应的处理
服务端将处理完的结果返回给客户端浏览器
浏览器将服务端返回的结果呈现到界面上

六、配置Apache

配置文档：http://httpd.apache.org/docs/current/
配置文件中行首的#指的是注释
注意：以下所记录的行号仅供参考，不同版本的配置文件可能不尽相同。

6.1.监听端口

监听端口可以随意修改为任意一个未被其他程序监听的端口，可以通过设置配置文件httpd.conf中的Listen指令后面的数字修改。
在这里插入图片描述
6.2.网站根目录

网站根目录就是存放我们网站文件的最顶层目录，通常URL中域名后面的第一个斜线对应（映射）的就是网站根目录。
默认文档指的是我们在访问某一个目录时（没有指定具体的文件），默认访问的文件叫做默认文档
注：动态网站情况会比较特殊，需要单独考虑，不一定是这个规则。

默认Apache的网站根目录是安装目录中的htdocs文件夹，为了方便对网站文件的管理，一般我们会将其设置在一个自定义目录中（如果你不介意其实不修改也无所谓）。
如果需要设置网站根目录，可以通过修改配置文件httpd.conf中的网站根目录选项切换。
在这里插入图片描述

6.3.默认文档

当客户端访问的是一个目录而不是具体文件时，服务端默认返回这个目录下的某个文档（文件），这个文档就称之为默认文档。

配置文件httpd.conf的280行的DirectoryIndex，默认文档可以配置多个（有前到后依次去找，找到为止，如果没找到任何一个则启用目录浏览）：
在这里插入图片描述

6.4.虚拟主机

如果一台机器上只有一个网站的话，没有任何问题，但是如果想要在一台机器上部署多个站点，就必须通过配置虚拟主机的方式解决。

由于后期对虚拟主机的配置操作非常常见，所以我们一般将虚拟主机的配置单独放到一个配置文件中，然后在主配置文件中引入，避免破坏主配置文件中的其他配置。
Include conf/extra/httpd-vhosts.conf配置的作用就将另外一个配置文件引入（使其生效）

具体的操作方式就是在主配置文件httpd.conf的511行取消注释：
在这里插入图片描述
然后找到Apache的虚拟主机配置文件，添加一个如下的虚拟主机配置节点，然后重新启动Apache。(注意：每次修改完配置文件后，都需要重启Apache服务器才能生效)
这个文件中有两个默认的示例配置，可以注释掉。
在这里插入图片描述

如果真的要使用site0.io、site1.io这2个域名的话，就只能通过修改hosts文件达到目的，原因很简单：这个域名不是我们自己的，我们没有办法修改这个域名在公网上的DNS。
在这里插入图片描述

注意：

如果使用了虚拟主机，则默认必须全部使用虚拟主机，即之前的默认网站也必须通过虚拟主机方式配置，否则访问不到。参考：http://skypegnu1.blog.51cto.com/8991766/1532454

如果虚拟主机的端口使用的不是80，则需要在主配置文件中添加一个对这个端口的监听：

七、静态网站与动态网站

至此，我们已经可以把这些静态页面放到服务器上了，客户端也可以通过域名请求这个网站，但是对于我们来说，Apache 能够完成的事情过于简单，无外乎就是找到你请求对应的文件→读取文件→将文件内容响应给客户端浏览器（文件原封不动的给你）。无法满足让网页内容动起来（随着数据动态变化）的需求。
于是乎，就有人提出了服务端动态网页的概念，这种实现这种概念的技术有很多种：JSP、ASP.NET、PHP、Node等等。
这些技术的原理就是：不再将HTML固定写死，每次用户请求时，动态执行一段代码，临时生成一个用户想要的HTML页面。
在这里插入图片描述
动态网站指的也就是每次请求时服务端动态生成HTML返回给用户的这种网站。
这里我们选择PHP作为我们了解服务端动态网页开发的技术方案，注意：我们学习的重心不在PHP，而是了解服务端开发，以及某些其他对前端开发有帮助的东西。

7.1 配置PHP支持

PHP文件的扩展名就是.php

我们可以尝试在刚刚配置的网站中添加一个扩展名为php的文件，然后到浏览器中访问它。

<!--demo.php-->
<?php 
echo'Hello PHP';
?>

结果出乎意料，并没有显示我们想要的Hello PHP，而是将我们的代码原封不动的返回给浏览器了。
在这里插入图片描述
原因很简单：Apache只能处理静态文件请求，对于后缀名为.php这种动态文件，它无法执行，所以就当成是一个静态文件直接返回了。
解决方法：

在服务器上安装PHP
o解压php到纯英文路径目录中
在Apache中添加支持PHP的配置
o在Apache 添加PHP处理模块

#php support 
LoadModule php7_module C:/Develop/php/php7apache2_4.dll

o在<IfModule mime_module>节点中添加.php扩展名解析支持

#parse.php files
AddType application/x-httpd-php.php

o默认文档配置节点<IfModule dir_module>中添加index.php

默认文档指的是在访问一个目录而不是具体文件名时，默认执行的文件名

<IfModule dir_module>
DirectoryIndex index.html index.php
</IfModule>

重启Apache

7.2 Apache与PHP

对于很多初学者来说，很容易把Apache和PHP混在一起混为一谈，其实他们两者各自有各自负责的领域，各自的职责，但是我们在使用PHP做动态网站开发时，两者就会产生联系，具体如下：
在这里插入图片描述

你可以理解为：Apache是一家没有太多能力的公司，只能处理一些简单的业务（静态网站），但是心很大想做更多的事（动态网站），所以就想到了外包，所有额外的业务都需要外包给其他程序，而PHP就是理解为一个专门能够处理php业务的外包公司