Vue项目前后端接口的联调

我们在之前的项目中,使用的都是本地的JSON数据文件,那么在实际项目开发过程中,肯定是不能用本地的JSON文件的,所以我们需要把JSON文件放在服务器上,我们使用的是Apache2.4本地服务器

1,下载压缩包

http://httpd.apache.org/download.cgi

Vue项目前后端接口的联调_第1张图片

Vue项目前后端接口的联调_第2张图片

Vue项目前后端接口的联调_第3张图片

2,下载完之后,解压到自己定义的目录

D:\DevelopTools\Apache

然后更改httpd.conf文件

Vue项目前后端接口的联调_第4张图片

在httpd.conf中替换(c:\Apache24)解压文件目录(至bin文件夹所在目录)

然后到bin目录下的命令行中输入httpd -k install

然后在bin目录下点击ApacheMonitor运行

Vue项目前后端接口的联调_第5张图片

然后点击Start开启服务

Vue项目前后端接口的联调_第6张图片

如果有弹出运行失败the requested operation has failed 

可以查看https://blog.csdn.net/VVVZCS/article/details/82588371我的这一篇文章

然后Ahache本地服务器就算简单完成了

----------------------------------------------------------------------------------------------------------------

Ahache服务器中的文件是放在htdocs文件夹下的,我们把原来的index.html文件删除

新建一个api文件夹,然后把三个JSON数据放在里面

Vue项目前后端接口的联调_第7张图片

我们去浏览器中查看

Vue项目前后端接口的联调_第8张图片

就有了三个json数据

我们现在将本地的JSON数据删除

Vue项目前后端接口的联调_第9张图片

重启服务

Vue项目前后端接口的联调_第10张图片

页面就没东西了

我们现在把开发环境下访问api路径   原来打到mock文件下的代码   更改成    打到服务器上去

Vue项目前后端接口的联调_第11张图片

Vue项目前后端接口的联调_第12张图片

重启服务

Vue项目前后端接口的联调_第13张图片

图片等数据又出来了

但是我们知道在公司当中,前端开发工作者和后端开发工作者一般是分开工作的,后台数据不可能在你前端开发者电脑上,所以,在你写代理的时候,就不能写localhost的地址了,你可以填写同一局域网下的IP地址,或者一个外网域名都是可以的

通过这种方法我们就可以把前端对api这个地址的请求,代理转发给任何一台后端服务器,

你可能感兴趣的:(Vue)