2.3 本地服务器的搭建
一个真正的Web应用都需要将代码部署到服务器上，这样才能让更多人访问。因此，搭建服务器是必不可少的环节。一般来说，Web应用的服务器都是在某个机房的大型服务器主机上，而在学习阶段，我们可以搭建一个本地服务器就能满足学习Web全栈开发的需要。因此，本节就来讲述如何安装一个本地服务器的集成工具。
2.3.1 Xampp的安装
Xampp是一款功能强大的服务器端集成软件，它包括最常用的Web服务器Apache，以及PHP编译器和MySQL数据库服务器，主要用于Web的后端开发部署。之所以选择Xampp，是因为它有免费版提供，所以可以节省开支。同时，集成工具也省去了安装每一个服务器的麻烦。
Xampp有什么特别之处？
提到Web应用，就不得不谈到服务器，任何一个Web应用都离不开它。每次用户输入一个网址或通过单击一个链接，其实都是在向服务器发出一次HTTP请求，这种请求的目的是想查询服务器中的数据库，更新数据。整个过程从服务器端来看，一定需要一款Web服务器、后端脚本解释器和数据库服务器，幸运的是，Xampp集成了这三者，从而免除了我们单独安装每一款软件的麻烦。
接下来，请你按照以下步骤完成Xampp的下载和安装。
（1）请自行去官网https://www.apachefriends.org/index.html下载，根据你自己的计算机型号选择合适的版本。
（2）根据你自己计算机的操作系统来选择版本，Windows系统上安装完成之后的界面如图2.7所示，请忽略下方提示框的内容。你可以看到Xampp已经为我们提供了几种Web服务器，比如Apache和Tomcat。
图2.7
2.3.2 Xampp的配置
Xampp安装完成之后，需要在本地进行配置。具体步骤如下。
首先，本地计算机既要充当客户端的浏览器，又要充当后台的服务器。有了Xampp这一切就变得非常简单，你要做的只是在Xampp控制面板中单击Apache那一行对应的Start按钮，即可完成Web服务器的开启。这时，本地计算机上的浏览器就可以访问本地的服务器。由于是本地的主机，因此，这个服务器的地址是127.0.0.1，它等价于localhost。
初次使用Xampp一定要做的事
初次使用Xampp一定要测试其是否配置正确。具体做法是，首先需要开启（Start）Apache服务器，然后在Chrome浏览器的地址栏中输入localhost，看到一个Xampp默认的首页。这其中的原理在于Xampp的默认配置，通过输入一个地址，Xampp就将自动寻找根目录（即Xampp安装目录下的htdocs文件夹）中是否含有index.html，所以地址栏中的完整输入是localhost\index.html，只不过index.html常常被省略。
但是为了将来设计属于你自己的index.html，建议你一定要把htdocs文件夹下的所有原始文件夹及文件都删除，保证万无一失。否则，你可能永远无法显示自己的网页。
接下来，我们来建立站点。其中，Xampp安装目录下的htdocs文件夹就相当于www，所以又称为超级根目录。你需要做的是，把所有与你的网站相关的代码和图片等资源都放在这个文件夹下。比如，建立一个test文件夹（例如，我的目录路径为D:\xampp\htdocs\test），并同时准备一些子文件夹和首页文件，参考如图2.8所示的子目录效果。
此时，这个test文件夹被称为站点，可以理解为一个名叫test网站相关资源的存放地。
站点建立完毕，就可以通过浏览器进行测试自己的首页。记住，一定要先开启Apache服务器，然后在浏览器地址栏中输入http://127.0.0.1/test/index.html（或者http://localhost/test/index.html）就可以看到自己网站的首页index.html。
图2.8
端口号冲突怎么办？
有时会遇到Xampp与你已安装的某款软件冲突，导致无法正常开启Apache，这时，控制台窗口库的下方还会给出红色的错误提示，端口（port）被占用。请不要慌张，我们可以手动做一些配置来解决这个问题。
你可以通过Apache同一行的Config按钮，找到hpptd.conf文件，然后【Ctrl+F】搜索Listen，找到Listen 8080，有两个，以#开头的那一行是注释，没有#开头的才是真正的配置信息。这里你只需要把默认的80改为公认端口范围（0～1023）中除80之外的任意一个值即可。这里推荐改为80附近的端口，比如81或82。因为其他的无法确定是否被另一个网络程序占用。
如果你对端口号进行了上述配置，今后一定要记得在浏览器地址栏中输入http://127.0.0.1：82/test/index.html。