有时候,在开发某些功能时,需要模拟服务器来展示功能时,这时候我们就需要用到本地服务器来模拟。又或者在开发完成后,我们在发布网站之前都会在本地服务器上运行,测试一下网站的功能和效果的展现,测试完成后再上传到购买的主机空间正式上线使用。
那么,有什么软件或者什么插件之类的可以模拟本地服务器呢?接下来就介绍几款优秀的web本地服务器。
(以下环境基于MAC的OS X下,与Windows配置相差不大)
XAMPP / WAMPP
XAMPP
顾名思义 (Apache+MySQL+PHP+PERL)
XAMPP是利用Apache服务,能够模拟本地服务器可以取到PHP文件从而获取MySQL文件,就是说可以自己新建PHP后台文件和JSON数据文件,可以模拟一些像利用AJAX请求,向后台拿到数据,完成一个完整的请求。
下载地址:https://www.apachefriends.org/download.html
下载完成后可以看到以下的界面,点击star,在浏览器输入 http://localhost/ 就能看到首页了。
XAMPP默认的根目录是/Applications/XAMPP/xamppfiles/htdocs,把文件夹(yourProject)拖到htdocs,在浏览器输入http://localhost/yourProject,但是这样相当麻烦,这就需要配置根目录了。
配置XAMPP根目录
在XAMPP软件界面点击Manage Servers → Configure → Open Conf File 点击 YES 进入 httpd.conf文件,
command+F 搜索 “docs”,找到 DocumentRoot 和 Directory
改成自己想要的目录就可以了。
我的文件夹为/Users/liangyongxin/desktop/mydemo
还有配置主机和站点这里就不多说了。各位可以百度一下。
http-server
一款基于Node.js的命令行http服务器,利用node.js开启本地服务,下载前请先自行下载node服务。
node地址:https://github.com/nodejs/node
安装方式:
npm install http-server -g
启动方法,直接在所在项目文件夹下开启服务:
http-server -open
hs -o //简写也可以
http-server 地址:https://github.com/indexzero/http-server
browser-sync
一款可以让你省时的浏览器同步测试工具,开启服务后,pc端、手机端同步更新,快速查看测试效果。而且是完全免费的。
官方中文网:http://www.browsersync.cn/
github地址:https://github.com/BrowserSync/browser-sync
安装方式:
npm install -g browser-sync
启动方式,直接在所在项目文件夹下开启服务:
// --files "路径是相对于运行该命令的项目(目录)"
browser-sync start --server --files "dist"
// 监听css文件
browser-sync start --server --files "css/*.css"
// 监听css和html文件
browser-sync start --server --files "css/*.css, *.html"
具体监听可查看官网
,有详细例子解释。一般监听整个项目文件夹。
总结:
开启本地服务后,系统会自动生成一个本地地址和一个外网地址
此时可以使用手机打开外网地址就可查看(可能需要同一wifi下)。
一般来说,使用以上几个本地服务器就足够了。