前端架构一之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 Apache SSL:xampp\apache\conf\ssl.conf 3 Apache Perl(仅限插件):xampp\apache\conf\perl.conf 4 Apache Tomcat(仅限插件):xampp\apache\conf\java.conf 5 Apache Python(仅限插件):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 FileZilla FTP 服务器:xampp\FileZillaFTP\FileZilla Server.xml 10 Mercury 邮件服务器基本配置:xampp\MercuryMail\MERCURY.ini 11 Sendmail:xampp\sendmail\sendmail.ini
注意:安装路径最好不要放在系统盘
第二步修改配置文件:
打开配置Apache基本配置文件,查找<Directory />
1 将下边的代码块 2 3 <Directory /> 4 5 Options FollowSymLinks 6 7 AllowOverride None 8 9 Order deny,allow 10 11 Deny from all 12 13 </Directory> 14 15 修改为: 16 17 <Directory /> 18 19 Options MultiViews -Indexes Includes FollowSymLinks 20 21 AllowOverride None 22 23 Order deny,allow 24 25 #Deny from all 26 27 </Directory> 28 29 注意,应该注释掉Deny from all
增加访问端口,确保端口没有被占用
1 Listen 80 2 listen 8080 3 listen 8081
修改项目文件路径
1 DocumentRoot "F:/xampp/htdocs/www" #这里改成你项目的路径
如果增加了端口还需要给端口配置访问路径
1 NameVirtualHost localhost:8080 2 <VirtualHost localhost:8080> 3 ## ServerAdminwebmaster@dummy-host.example.com 4 DocumentRoot "F:/xampp/www" 5 ServerName localhost:8080 6 ## ErrorLog logs/dummy-host.example.com-error_log 7 ## CustomLog logs/dummy-host.example.com-access_log common 8 </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:端口
总结:
完成上面的工作之后我们就可以按照交互稿来进行前端开发
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列:如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列(二):开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 开源Multi-agent AI智能体框架aevatar.ai,欢迎大家贡献代码
· Manus重磅发布:全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后,我竟然真的恢复了删除的微信聊天记录!
· 没有Manus邀请码?试试免邀请码的MGX或者开源的OpenManus吧
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY