web前端开发调试：手机访问PC端静态项目(在自己的电脑上搭建一个WEB服务器)

比眉伴天荒 2022-07-13 13:48 187阅读 0赞

*更新时间：2018年5月2日15:40:35*

[《我的博客地图》][Link 1]

作为软件开发者，自己开发软件的同时也在使用别人开发的软件，通常使用的软件分为两类：协同办公类软件和开发类软件。同时，不同公司有自己的开发流程，相应的开发工具有所不同，但作为开发者本身而言，需要学习不同软件的使用以适应这个变化的社会。随着开发经验的不断积累，总结和记录自己用过的软件，是一个很好的习惯。

1、XAMPP发布并预览web项目

XAMPP（Apache+MySQL+PHP+PERL）是一个功能强大的建站集成软件包,易于安装且包含 MySQL、PHP 和 Perl 的 Apache 发行版。只需下载，解压缩，启动即可。（源自：百度百科）  
    应用：  
解压D:\\software\\xampp

配置项目路径D:\\software\\xampp\\htdocs\\mapping  mapping为web项目文件夹名称，将web项目挂载到这个路径下

启动D:\\software\\xampp\\xampp-control.exe => start第一个服务器

查看已发布web项目，在浏览器地址栏输入http://localhost/mapping/index.html

index.html文件为web项目入口  ||  localhost可以更换为自己电脑ip

![Center][]

注意：无法启动的原因：第一，查看两个端口是否被占用main port 80 || SSL port 443，在xampp控制面板右上角config => service and port settings 可以更换端口；第二，windows防火墙组织了xampp程序，可在windows控制面板中 => 系统和安全中允许。

2、IIS服务器发布并预览web项目

首先确保已开启IIS服务（Internet information services）：控制面板-打开/关闭Windows功能-开启IIS，http服务；

把文件夹加载到IIS服务器上；

3、STS开发并管理web项目

Spring Tool Suite，一款比eclipse功能强大的java项目开发软件，集成了更丰富的功能和插件。这是一款绿色软件（免安装），解压后即可使用。

![Center 1][]

试用前配置：window => preferences 设置默认字号、编码格式（UTF-8）

![Center 2][]

设置网络连接SSH2：ssh2 => key management => generate RSA key => save private key => apply

![Center 3][]

设置gitlab资源下载的密钥：复制生成的rsa key，进入项目所在gitlab网址，my profile(我的配置)，添加rsa key  
    配置好网络连接，开始从gitlab上pull项目，在sts的package explorer面板中import => projects form git => clone URI => 复制并粘贴gitlab项目的ssh连接地址，即可从gitlab下载进行常规开发

4、抓包软件  
    随着移动端开发的爆发，前端开发人员在调试程序的过程中，如果浏览器的手机模拟器不能满足测试要求，就需要在手机上实测，但实测无法对数据进行分析，就需要用到抓包工具。

这里讲两种抓包工具的安装、配置和使用：一站式远程页面调试工具spy-debugger 和 jsFiddle:前端在线调试工具

5、appserv

AppServ 是 PHP 网页架站工具组合包，作者将一些网络上免费的架站资源重新包装成单一的安装程序，以方便初学者快速完成架站，AppServ 所包含的软件有：Apache、Apache Monitor、PHP、MySQL、phpMyAdmin等。为帮助大家能够迅速的在本地试用EcShop软件，我们编写如下文档。如果您的本地机器没有安装过apache、php、mysql等系统，那么用这个软件则可以让你迅速搭建完整的底层环境。

AppServ启动一个本地的服务，http，MySQL，php环境

更改服务加载路径：D:/AppServ/Apach24/conf/httpd.conf  260行

DocumentRoot "D:\\AppServ\\www"

修改为

DocumentRoot "D:/project"

PC端浏览器访问：

127.0.0.1

localhost:80

手机端浏览器访问：确保手机wifi和电脑网络在同一网段，访问本机IP即可访问到项目

配置为https服务器：

[https://localhost/][https_localhost]

修改D:/AppServ/Apach24/conf/httpd.conf，打开如下两行注释行

Include conf/extra/httpd-autoindex.conf

LoadModule ssl\_module modules/mod\_ssl.so

修改D:\\AppServ\\Apache24\\conf\\extra\\httpd-ahssl.conf

DocumentRoot "D:\\AppServ\\www"

修改为

DocumentRoot "D:/project"

参考：[https://blog.csdn.net/gongpeng1966/article/details/51362419][https_blog.csdn.net_gongpeng1966_article_details_51362419]

[Link 1]: https://blog.csdn.net/wanshaobo888/article/details/79179440
[Center]: /images/20220713/e6e90ef546e84b7b87acb9ca0cb9d129.png
[Center 1]: /images/20220713/eba321ac93124bd0b74f65bedc303df5.png
[Center 2]: /images/20220713/431d8c281b9f4fa1b979d97124b4a876.png
[Center 3]: /images/20220713/426f5231af1f4b2da6bc986ceae6b6dd.png
[https_localhost]: https://localhost/
[https_blog.csdn.net_gongpeng1966_article_details_51362419]: https://blog.csdn.net/gongpeng1966/article/details/51362419