前端架构一之XAMPP

摘要：

　　随着用户体验的重要性和项目的富客户端化，越来越多的公司将前端与后端分离开来，这时候前端就需要有自己的服务环境。本文将介绍我在开发中所用到的前端服务环境的搭建。

环境：

　　OS： Win7 64bit

　　Server: Apache

　　html文件： *.shterm

　　模板：php

第一步安装：

　　下载并安装XAMPP，下载地址：

　　　　https://www.apachefriends.org/zh_cn/index.html

　　或者：

　　　　http://pan.baidu.com/s/1c0B0lKs

下面是XAMPP的一些文件，文件路劲前加上你安装的路劲，比如你安装在F盘，则下面的都加上F:/

 1 Apache基本配置：xampp/apache/conf/httpd.conf 2 ApacheSSL：xampp/apache/conf/ssl.conf 3 ApachePerl（仅限插件）：xampp/apache/conf/perl.conf 4 ApacheTomcat（仅限插件）：xampp/apache/conf/java.conf 5 ApachePython（仅限插件）：xampp/apache/conf/python.conf 6 PHP：xampp/php/php.ini 7 MySQL：xampp/mysql/bin/my.ini 8 phpMyAdmin：xampp/phpMyAdmin/config.inc.php 9 FileZillaFTP服务器：xampp/FileZillaFTP/FileZillaServer.xml10 Mercury邮件服务器基本配置：xampp/MercuryMail/MERCURY.ini11 Sendmail：xampp/sendmail/sendmail.ini

注意：安装路径最好不要放在系统盘

第二步修改配置文件：

打开配置Apache基本配置文件，查找<Directory />

 1 将下边的代码块 2  3 <Directory /> 4  5 Options FollowSymLinks 6  7 AllowOverride None 8  9 Order deny,allow10 11 Deny from all12 13 </Directory>14 15 修改为:16 17 <Directory />18 19 Options MultiViews -Indexes Includes FollowSymLinks20 21 AllowOverride None22 23 Order deny,allow24 25 #Deny from all26 27 </Directory>28 29 注意，应该注释掉Deny from all

增加访问端口，确保端口没有被占用

1 Listen 802 listen 80803 listen 8081

修改项目文件路径

1 DocumentRoot "F:/xampp/htdocs/www" #这里改成你项目的路径

如果增加了端口还需要给端口配置访问路径

1 NameVirtualHost localhost:80802 <VirtualHost localhost:8080>3    ## ServerAdminwebmaster@dummy-host.example.com4      DocumentRoot "F:/xampp/www"5      ServerName localhost:80806      ## ErrorLog logs/dummy-host.example.com-error_log7      ## CustomLog logs/dummy-host.example.com-access_log common8 </VirtualHost>

第三部启动XAMPP：

如果您的机器上边apache不能正常启动，请运行 f:/xampp/xampp/apache_start.bat 来查看详细的错误信息

如果您的机器上边mysql不能正常启动，请运行 f:/xampp/xampp/mysql_start.bat 来查看详细的错误信息

如果您的机器已经安装了IIS，那么apache会报错，443 ssl端口会IIS占用，请修改F:/xampp/xampp/apache/conf/extra/httpd-ssl.conf 端口号解决 例如:将所有的 443 都修改为 453 ，这种错误对于80端口也一样可能存在，如果是80端口，请修改 f:/xampp/xampp/apache/conf/httpd.conf 将所有的80修改为8081

如果没有任何错误，你可以打开浏览器输入localhost:端口

总结：

　　完成上面的工作之后我们就可以按照交互稿来进行前端开发