如何搭建及使用本地服务器
我们在进行做移动端项目是有时候需要自己跑一下页面,看看效果是不是符合我们的要求,一般的话我们都会使用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 还有好多服务我们还都能没用这里我们只是开启服务器,后面还有数据库 等等 有兴趣的小伙伴可以多多交流~~ 同时也希望大神多多指导~
推荐阅读
- JS中的各种宽高度定义及其应用
- 考研英语阅读终极解决方案——阅读理解如何巧拿高分
- 如何寻找情感问答App的分析切入点
- 参保人员因患病来不及到指定的医疗机构就医,能否报销医疗费用()
- mybatisplus如何在xml的连表查询中使用queryWrapper
- MybatisPlus|MybatisPlus LambdaQueryWrapper使用int默认值的坑及解决
- MybatisPlus使用queryWrapper如何实现复杂查询
- 六步搭建ES6语法环境
- 如何在Mac中的文件选择框中打开系统隐藏文件夹
- 漫画初学者如何学习漫画背景的透视画法(这篇教程请收藏好了!)