Vue项目前后端接口的联调

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

1，下载压缩包

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

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

D:\DevelopTools\Apache

然后更改httpd.conf文件

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

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

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

然后点击Start开启服务

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

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

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

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

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

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

我们去浏览器中查看

就有了三个json数据

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

重启服务

页面就没东西了

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

重启服务

图片等数据又出来了

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

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