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

 

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

《我的博客地图》

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

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

 

注意：无法启动的原因：第一，查看两个端口是否被占用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项目开发软件，集成了更丰富的功能和插件。这是一款绿色软件（免安装），解压后即可使用。

 

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

 

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

 

    设置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/

修改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