前后端联调
问题引出
在前后端约定好api接口后，同步进行开发，前端没有数据支持，造成了阻塞。
这时候一般前端只能做假数据（专业点叫mock数据，^_^）理想情况下定义好api路径和数据之间的映射即可。但这是就有第一个问题。
前端是否需要写本地数据？如果写本地数据的话，那就意味着要写本地的相对路径，那如果最后要来修改的接口呢？（那如果后台开发的慢了，最后会有多少个接口要修改呀。
mock数据，有很多中方法，gulp，webpack，fekit，多种前端自动化构建工具。
绝对路径呢，只要做一个host映射就ok了。
前后联调
前后端联调是一种真实业务数据和本地mock数据之间来回切换以达到前后端分离结构下的不同开发速度时数据交换的一种方式方法。
问题引出
前端数据是肯定符合要求的，后端数据则很难说。例如说跨域问题，接口通不通，json格式不对，分页等。
那一旦有这个问题，在前后端分离的架构中，就需要不断切换本地mock数据和后端接口数据的问题。
实现前后端联调
需要联调的主要有以下两方面的资源
- css、js、图片等前端静态资源文件。
- ajax获取的后端数据
而前后端分离的架构应用也可能分为两种情况：
- 前后端完全分离，前后端分别拥有自己的域名和服务器。
- 前后端开发分离，但是部署的时候是一个域名和一台服务器。
还有就是需要联调的场景也是两种情况：
- 开发阶段
- 调试阶段
针对这个问题呢，就可以总结为222,2种资源，2种应用情况，2种开发场景。
联调开始
开发阶段
两台服务器对应两个域名
这是最nice的方案啊，也是联调最舒服的方式。
在这种方式下，前端和后端各有各的服务器和域名。后端会把他们开发的后端业务代码，实时的上传到服务器上（也可能不是，如果后端自己的电脑上，实现是一样样的，只不过域名变成了后端的ip地址）。而前端的代码会实时的上传到前端的服务器上。
这里为了约束方便，前端域名为"chping.website"，后端服务器域名为"chping.site"。
css、js和图片等静态文件
此时，我们的静态文件的请求路径建议使用我们前端服务器的绝对路径，为什么呢？
因为如果我们写本地文档相对路径，等于把我们的入口文件交给后端，路径还是绝对路径，岂不是成了后端服务器文档路径了，那就坏菜了，还得一个一个修改成前端的绝对路径。（如 http://chping.website/css/reset.css ）。
那可能有小伙伴说，这样的话，我在开发阶段，我们的服务器上还没有自己的静态文件呢，去请求的话，会报404的！
对的，这时候就该我们的host的出场了，我们知道当进行域名解析的时候，第一步是在浏览器缓存中寻找，如果没找到，第二步在我们系统的缓存中寻找（就是本地的hosts文件），然后…（就是DNS解析部分）就没有然后了。既然域名解析需要hosts文件这一步，那么我们就修改以下它，让访问 http://chping.website 这个域名的请求，全部访问我们本地的mock数据就好了呀。
在hosts文件中添加下面这一条
127.0.0.1 chping.website
好的，以后访问域名的请求都会映射到本地了，再结合gulp的mock的数据，就完成了你写的域名+绝对路径 http://chping.website/css/reset.css，
但是请求的确实你本地mock的数据（上面的请求会被映射到 http://localhost/css/reser.css）。
这样你就不需要来回修改请求路径了^_^。
ajax后端数据
开发过程找那个，静态文件的联调问题可能还是比较少的，特征也不是很明显，但是通过ajax获取后端数据使用联调的情况可就多了去了。
很简单，ajax中的请求还是写绝对路径(如: http://chping.site/userlist ，获取用户列表），此时后端接口如果没有开发好，可以通过hosts文件的修改可以实现chping.site域名映射到本地来，如果后端像让你给他测试以下接口获取文档数据对不对，你现在修改一下hosts文件就可以了。
可能还有小伙伴问了，这样还不是改来改去，麻烦死了。首先来说，相比较你修改多个url地址和修改一个hosts文件，孰轻孰重，一目了然。其次，怎么可能每次让你每次都去修改hosts文件呢，麻烦死了。 现在向大家推荐一款小插件，在google商店里搜索HostAdmin，下载安装就好了，然后简单配置以下你的hosts地址，就可以愉快地切换hosts的映射了。
好了，两台服务器对应两个不同域名的场景在开发阶段就这样愉快的结束了，但是在实际开发中，中小公司很少给你两台服务器和两个域名的，一般情况下就是一台服务器一个域名的。
一台服务器一个域名
我仔细想了以下，此时这个服务器会给谁管理呢？
想都不用想，肯定不是前端，后端比你对服务器熟悉多了，交给你去管理那是出轨了。所以说在这种情况下，你就老老实实在本地开发就行了。
css、js和图片等静态文件
这时候的静态文件再开发阶段不需要任何考虑，按照你喜欢的相对路径或者相对于项目根路径的形式写就行了，因为早晚还得交给后端。但是，需要注意：
- 如果拟采用相对项目根路径的书写方式来写你的静态文件路径时，一定要先和后端商量，将来部署的时候他会把你的前端整个项目放在哪里？如果不是个目录下，你就挂了。比如：你的reset.css的路径时/exports/styles/common/reset.css，后端叔叔把你前端项目放在了根目录下的frontEnd文件夹下，reset.css文件就报404了。
- 如果后端采用的java，你需要特别注意的是，tomcat的根目录并不是webapps文件，而后端项目默认是部署在webapps/ROOT文件下的，所以你如果使用了相对项目根路径的书写方式来写你的静态文件路径时，对不起又是404了。
ajax后端数据
因为现在唯一的一台服务器还是在后端叔叔那里，所以此时你还是可以写绝对路径（域名+请求路径），利用hosts文件来改变域名映射实现联调。
调试阶段
调试阶段的情况说明刚才提了一下，现在再详细的阐述一下：
首先，已发布的Beta版本在测试的时候，发现前端页面上有个地方有个小bug，需要你修改一下，于是你访问线上的页面，看了一下这个bug，发现是某个css样式文件里面出错了，于是你希望在本地修改，然后线上版本可以直接查看，这样就可以实时看到你的修改在线上的真实样子了。
两台服务器两个域名
这里就不在分静态文件和后端数据分开介绍了，其实道理都一样的，另外此时后端数据都是真实的了，也不需要你管后端了，此时你本地的mock数据已经下岗了。
首先你只需要打开前面你安装的HostAdmin，通过它配置一下你的hosts文件（如果年前面的做了，此时你已经配置好了），然后chping.website这个域名你可以在本地和线上之间来回切换了。
再具体一点就是：
- 启动你本地的项目
- 将chping.website域名通过HostAdmin设置为
127.0.0.1 chping.website
# 202.201.112.232 chping.website //假设202.201.112.232是线上服务器的ip
打开浏览器，并清除一下浏览器缓存，重新打开你们开发的网站。此时网站是获取到的静态资源就是从你本地获取的了，但是ajax获取的数据确实后端返回的真是数据。
然后你开始修改bug，这时候线上的版本可以实时查看你修改的前端内容，修改完bug，QA说了OK，你就可以把修改的文件替换掉服务器上的版本就行了。
一个服务器一个域名
这种情况就复杂了，此时只有一个域名，如果你开发阶段是按照我前面说的，写的是相对路径，那么此时你是没有办法实现两台服务器两个域名那种线下修改，线上查看的高大上联调的，那该怎么办呢？
第一种方式就是，你在本地修改，本地查看，测试好了后上传到服务器，看看线上环境可不可以，OK当然好，不行就本地接着改，然后再上传。
第二种方式就是，在开发阶段你给静态文件前面加上一个假的域名，然后像两个域名一样进行假的域名与本地映射配置，然后像两个域名一样开发。等部署的时候，在服务器上也暂时做一个本地映射，你就可以实现两个域名一样的线下修改，向上查看了。但是真正上限的时候，你就需要收到，把假的域名全部删掉。所以说，一台服务器一个域名的时候，前端静态文件做联调是很不方便的。
小结
总结以下，前后端联调是一种真实业务数据和本地mock数据之间来回切换以达到前后端分离架构下不同开发速度时数据交换的一种方式方法，而实现就是利用自动化构建工具的mock数据功能和修改域名解析文件hosts来实现的。