前端不仅要做页面展示层,还负责着数据交互的部分,不要等到后端人员做好工作了前端才开始对接,那样太被动了。
前端在完成静态页面的编码后,就要进行数据交互的模拟,比如ajax的数据交互,模拟跟后台对接。
到真正前后端联调的时候,才能更方便。
1.要进行数据交互,就得有后台吧。后台可以用php,java也可以呀,不过对比起来就稍微复杂了,配这配那的(又比如想放到新浪云上面调试,java相对来说代价高出许多)
2.数据库随意,mysql很普遍
3.既然要模拟,就得有访问,不能仅仅本地访问就行,搭个服务器,从别的终端上访问看正不正常?
(有时做手机页面的时候,虽然chrome上面的手机模拟器效果正确了,但放到手机浏览器上看,又有问题了..所以搭个服务器,时不时用手机访问一下,让页面更好地展现出来。
一种方法是放到新浪云,放到公网去,就直接都能访问了;另外一种就是在电脑配服务器,比如说有个wifi热点,电脑和手机都连上这个wifi了,就属于局域网之内了,手机就能进行对电脑服务器的访问了。)
4.怎么搭建好呢?
LAMP -- Linux,Apache,MySQL,PHP 是个很好的选择,但也许前端很少用到Linux,那选用WAMP也是不错的
WAMP搭建起来也很简单,有一个wampserver软件包,一键安装,方便快捷。
不同版本的也许会有差异,去 官网 下载最新版吧
或者直接搜索下载就行
接下来就直接点击安装吧,不说了,一路下去,用它默认的就行了(它默认装C盘,你可以换为D盘)
最后的最后,安装完了之后,默认已经帮你做完了基础配置。
试用一下
首先,要开启服务。直接在开始菜单那里找wampserver,类似这个图标,点击它
然后就是服务开启阶段,看电脑右下角图标信息,有三种颜色
红色代表服务未开启状态,橙色代表开启中(或者有些模块不正常),绿色表示开启成功(三个模块都正常)
服务开启成功了,要怎么访问呢?
注意一下刚才wampserver的安装路径,如果是D盘的那就在D盘根目录下找wamp文件夹,在里边再找到www文件夹,www文件夹就是项目的默认访问路径了。
怎么说呢,默认情况下www下面只有这两个文件
index.php就是默认初始文件。
浏览器地址栏输入location就能访问到index.php,默认是使用:80端口号的,有些电脑可能会出错,就像这样
这是因为默认的80端口被占用了呗,我们配置一下Apache的端口就行了
点击右下角那个绿色图标,然后检测一下80端口占用状态,显示被占用了
可以把80端口改为88或者8080或者其他都行,我记得要改三个地方(一个是注释的,两个不是注释)
为了方便,直接ctrl+F把80全部替换为8080就行
改了之后重启wampserver--点击绿色图标,Restart all services
浏览器输入localhost:8080就能访问了
当然也可以直接点击这个localhost检测是否成功访问,点击phpMyAdmin可以进入mysql的可视化数据管理,试试吧
来点实的,现在在www里面新建个项目文件夹myTest,浏览器输入localhost:8080/myTest就会默认访问此文件夹下面的index.php文件,在index里面写个代码试试
浏览器访问成功了,127.0.0.1:8080/myTest也一样,同样的道理。
现在是本地访问,如果其他终端访问呢?
没问题,局域网下面能互相访问
假设电脑现在的ip地址是a.b.c.d
手机上(要连wifi,3G网不是局域网)ip是a.b.c.d1
手机访问a.b.c.d:8080/myTest就行了
不过很多时候会碰到下边的问题,无法访问
"You don't have permission to access / on this server."
其实也是跟wampserver的配置有关了,还是httpd.conf
网上查到的很多人都说是把这里的Deny改为Allow就行了
首先需要在自己的电脑上搭建服务器,关于网上好多按步骤安装apache,sql,phpmyadmin的方法复杂而且没有必要,这里推荐wamp这样的一个集成软件,安装非常简单,一路点击next,apache+sql+phpmyadmin的环境一键搭好。
在百度中搜索Wamp下载,直接下载就行,亲测可用。
下载完wamp进行安装,一路点击next,本人装在c:\wamp下,最后install完成.
在浏览器输入localhost,出现以下页面说明安装成功了。现在服务器和php环境算是搭好了。此时在桌面右下角任务栏中会有wamp的图标,点击会有下图显示,www是网站页面根目录,localhost是网站默认主页,点击phpmyadmin可以进入数据库管理界面.
现在网站只能在自己的PC上显示,如何能把网站放到互联网上让你的朋友们也欣赏一下呢。这时就需要一款叫花生壳的软件,提供动态的域名映射.
下载完软件按步骤安装即可,这时候需要注册一下花生壳会员,注册时按网页提示的步骤即可,用身份证注册可以获得一个免费域名。用注册的账号密码登陆软件。会出现以下界面。这里的网址是本人申请的免费域名。
在域名上右键,选择新花生壳管理,填写应用名称,这个可以随便填,内网主机为本机内网的ip地址,这时需要查看以下,win+R在cmd中输入,ipconfig/all,
可以看到你的ipv4地址,填写即可。端口为80端口。
同时,现在需要设置一下路由器。在浏览器输入192.168.1.1。输入你的路由器用户名和密码,一般都为admin。进入路由器界面。需要设置三个地方,首先是动态DNS,选择服务商为花生壳,填写用户名密码,验证保存。然后是转发规则中的虚拟服务器,添加新条目,端口80,ip地址为内网ip。最后是,DMZ主机,设置开启,ip为内网本机ip。
现在设置基本完成,这时就可以测试了。注意,要把防火墙关闭,否则外网还是访问不了本机的网站。在控制面板中把防火墙关闭。现在可以写一段html代码,命名为index.html(注意此时先把index.php放到别的文件夹)放入你的wamp\www目录中,来测试访问。
最后,在浏览器输入你的花生壳域名,看看是不是就能访问了。同时你也可以把自己的域名发送给朋友们,让他们帮你测试一下。
欢迎分享,转载请注明来源:夏雨云
评论列表(0条)