如何搭建及使用本地服务器

我们在进行做移动端项目是有时候需要自己跑一下页面,看看效果是不是符合我们的要求,一般的话我们都会使用chrome 的debug工具进行仿真机检测,但有时候我们发现,这样是不够的我们需要一个真机环境测试,这时候就需要一个服务器环境了。
这里我们使用的是XAMPP 具体就长这样

如何搭建及使用本地服务器
文章图片
这就是XAMPP
想下载的小伙伴这里有传送门:
https://www.apachefriends.org/zh_cn/index.html
进去直接下载就好了
安装方法也非常简单 一路next 到底
安装成功会跳出一个页面,
如何搭建及使用本地服务器
文章图片
成功页面 我们本地服务器打开(点击Start 按钮):
如何搭建及使用本地服务器
文章图片
点击Start 按钮启动
启动成功
如何搭建及使用本地服务器
文章图片
启动成功
这时候可能有的小伙伴就找不到XAMPP文件路径在哪了?
默认安装的路径是在C盘下的 XAMPP文件下的 xampp-control.exe 文件
路径如图:
如何搭建及使用本地服务器
文章图片
路径图 具体的使用方法
1、启动XAMPP
2、关闭防火墙
3、将你需要测试的文件放入到 XAMPP文件夹下 如图
如何搭建及使用本地服务器
文章图片
测试文件路径
注意尽量避免文件夹名称使用中文,
4、在浏览器中输入localhost / "测试文件路径" 如:locahost/2016_11_11dome/index.html
如何搭建及使用本地服务器
文章图片
Hello world! 5、现在我们成功在电脑运行了本地服务器,但是连接手机的话还需要我们的电脑的IP地址;
查询我们自己电脑的 步骤如下
(1)window 键 /command键 + R键 回车
(2)输入 cmd 出现小黑框
(3)输入 ipconfig 即可看到 ip

如何搭建及使用本地服务器
文章图片
箭头所指
将上面路径中 "locahost " 更换为你自己电脑的IP
6、用手机打开更换后的测试文件地址即可,如:
http://10. ..*/2016_11_11dome/index.html
效果:
如何搭建及使用本地服务器
文章图片
手机端
注意这里我设置的字体大小 各位请注意~
【如何搭建及使用本地服务器】当然 XAMPP 还有好多服务我们还都能没用这里我们只是开启服务器,后面还有数据库 等等 有兴趣的小伙伴可以多多交流~~ 同时也希望大神多多指导~

    推荐阅读