web前端开发

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

2016-11-07  本文已影响7719人  mogugit

我们在进行做移动端项目是有时候需要自己跑一下页面,看看效果是不是符合我们的要求,一般的话我们都会使用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 还有好多服务我们还都能没用这里我们只是开启服务器,后面还有数据库 等等 有兴趣的小伙伴可以多多交流~~ 同时也希望大神多多指导~

上一篇下一篇

猜你喜欢

热点阅读