聊聊前端和后台分离那点"破"事！

写在前边

今天我们来说说前端和后台那点“破”事，无论是你学习前端还是后台，都要相互打交道，打着打着交道两伙人就打了起来，尤其是初学者刚开始接触前后台对接的时候，系统出了错误都想甩锅，前端说，你们后台的接口根本访问不了数据。后台就把锅甩给前端，是你们前端根本没有访问到后台接口好不好。

只要你做前端或者后台，都要做对接的，这是毋庸置疑的，这篇文章还是主要针对一些初学者和刚刚到公司工作的实习生或应届毕业生，尽可能的避免“甩锅”的情况，毕竟前端和后台的共同目标是解决两者之间的数据对接问题。

这篇文章能够兼顾到刚刚接触前端和后台的初学者，小鹿从最简单的客户端和服务端说起，因为当时刚刚接触这些概念的时候，也是挺懵逼的，毕竟现在其他公众号也很少分享这么基础的东西，那小鹿今天就负责分享给你前端和后台那点事！

什么是客户端？

何为客户端？顾名思义，从字面意义上讲，客户端，那肯定是客户使用的一端设备，直接面向用户的和客户的，比如我们的前端的网页、手机端的Android和IOS、以及硬件设备等，都可以称之为客户端。

客户端的职责基本就是直接和用户做交互，比如用户输入用户名和密码进行登录，比如点击按钮上传照片，再比如用户输入相关个人信息，然后点击保存按钮进行存储。

刚开始接触客户端的小伙伴可能会疑问，这些数据都去哪了？难道存储在我们的客户设备中（手机、浏览器）？

少量的数据确实存储在本地客户端设备中，比如我们的手机中或者电脑浏览器中。像阿里巴巴这么大的公司，用户是非常庞大的，数据量也是非常庞大的，客户端设备是存放不下的，需要将相关数据存放在服务端。你可能会问，服务端是什么东西？

我们为了能够形象点说明，我们可以把客户端当做我们宾馆入住的客户，而服务人员作为服务端，把柜子当做是数据库。整个流程就是，入住宾馆的客户会把贵重的东西交给宾馆的服务人员进行保管，然后服务人员再把入住客户的东西分类存放在柜子中，那么整个过程就类似前后台的数据对接的过程。

什么是服务端？

之前在群里看到一个初学的小伙伴问到服务器是什么？Tomcat 是什么？虽然这个问题让已经工作的人看起来很幼稚。但是每一个老手都是从菜鸟过来的，说实话，小鹿当时对服务器、Tomcat 等相关也是挺懵逼的。

所谓的服务器，在谷歌搜索了一下，我感觉还是对于初学者不友好。

一个管理资源并为用户提供服务的计算机软件。

其实对于初学者来说最好的理解就是，我们电脑就可以当做一个服务器，所谓的网络上说买阿里云的服务器，只不过就是一台电脑，放在其他地区，24小时开机状态，每当用户请求数据，都会在该服务器获取。而我们电脑通常在使用的时候才会开机使用，而不是像阿里云的服务器一样 24 小时开机状态持续提供服务。

那 Tomcat 是什么？Tomcat 服务器是一个免费的开放源代码的Web 应用服务器。Web 服务器，对的，我们如果在电脑上安装上 Tomcat 之后，我们会有一个启动服务程序，启动之后，我们无论是前端还是移动端，都可以服务端进行通信了。

客户端和服务端的通信过程

前后端是如何进行通信的呢？我们最常用的就是 ajax，那什么是 ajax 呢？我们可以把 ajax 想象成一种前后端通信的工具，我们前端使用 ajax，同时按照特定的 ajax 的数据格式，才能把前端网页中的数据（比如：用户名和密码）传输给服务端，然后服务端才会把数据存储到数据库中。

在 ajax 未出现之前，我们前端传输数据都是每向服务器传输一次，都要进行整个前端页面的刷新，有些数据尽管不变，我们还要进行整体刷新一次。为了解决这个问题，ajax 就出现在了人们的开发生活中。ajax 可以完成局部网站内容的刷新，而不像以前需要刷新整个网站。

客户端在向服务端传递数据的时候，服务端必须提前说给客户端接口地址，也就是说，前端往服务端传数据要有一个特定的地址，就像是送外卖，没有地址，外卖往哪里送呢？都是一个道理，一般后台开发者对于不同的数据都会暴露出不同的接口，前端开发者通过接口传递和访问数据就可以了。

前后台对接前的准备

因为我们现在的项目基本都是前后端分离了，所谓的分离就是，做一个系统，前端人员只负责客户端的相关页面就可以，而不用管后台如何存储数据的，而后台的开发者只关心数据如何存储的，而不用关心数据是如何展现给用户的。

之前并没有完全的前后端分离，比如 JSP，需要一个人进行前后台的开发，这样既有优点也有缺点，一个人开发当然成本很低，现在很多小公司都在用 jsp 或者前后台没有做到完全分离。公司明明可以花一个人的前做两个人的事情，为何偏偏找两个人呢？你说是吧。

为了能够完成顺利的对接，前端要做好前端的事情，后台要处理好后台的事情，不要做无畏的牺牲，在对接上双方进行甩锅。在大学做了很多的项目，在前后台对接的时候总结了一些实用性的经验，以下才是真材实料的干货。

首先我们明确做一个大系统，一般需要分配几个前端外加几十个后台，有时候前端只需要一个开发者就可以，毕竟前端做的东西不多，一个就足够。

前端开在开发前要做的准备就是，一般前端往往比后端早开发完，等待着对接就行了，但是前端为了在与后台对接时不必要的牺牲，所以自己可以提前模拟后台传递过来的数据格式，比如 JSON 字符串数据格式，也是我们开发中最常用到的，我们前端人员测试假如拿到了该数据，这里是模拟哈，然后我们前端的程序能否正确的运行，数据能够正常的进行渲染展现给用户。

如果所有的数据没有问题，我们到时候把后台人员提供给前台的接口地址拿来指定就可以了，这就解决了一个问题，前端人员不会因为自己做的快而白白浪费时间等着后台开发完做测试，而是自己提前模拟后台的数据，做测试，测试完，你就疯狂地摸鱼就可以了，岂不是美滋滋。

而后台人员要做的就是能够将数据库中的数据取出，能够准确无误的返回给前端，就是后台提供的接口地址和数据格式要保证准确。那后台人员说了，我能从控制台打印出返回给前台的数据，也很正常，但是前端和我说拿不到数据，怪我咯？这么说的话，我就认为后台开发人员的锅，为什么呢？

因为前端和后台中间有一个数据通信的过程，后台人员不能单单只靠着断点输出到控制台就完事了，而是通过模拟前端请求的工具来测试一下这个接口在浏览器中或者测试工具中是否能够访问，这才是后端人员判断该接口是否能够正确返回给前端的依据所在，而不是反了数据就完事了，前端能不能接的到，就是前端的问题了，那这活没法干。

项目出现问题如何解决？

如果客户端完成搭建，完成搭建的含义就是页面可以在客户要求的浏览器中正常的运行，页面的数据都是自己模拟的数据，且能正常的进行渲染显示。

后台要做的就是返给前端的功能接口可以正常的使用请求工具或者浏览器访问到数据，一般这个数据都为 JSON 格式。

好了，前后台开始准备对接，这时，后台人员找到前端人员说，可以进行数据对接了，前后对接会有一个接口说明文档，大概长这个样子：

每个接口 URL 对应的功能是什么，以及返回数据的字段格式代表什么意思，这些都会在接口文档中进行详细的说明。

PS：记得刚开始做前后端分离对接的时候，没有什么接口文档，上边所述的数据字段基本都是口头对接，有时候难免出现问题，比如，登录出现问题了，登录用户名前端接收的是 username，而后台传输的字段为 user，人候项目经理来了，说你们改一下这一块，这时候无论是前端还是后台，都不想把这个锅自己背吧。

所以团队合作，一定在写代码之前把所有的文档商量好，哪些需要前端人员去写，哪些需要后台人员去写，在对接或后期项目出现问题的时候，不至于各种甩锅。

虽然我们前后台都各自准备好了，对接时遇到问题我们该如何快速定位呢？

一般这时候也是各种甩锅了，前端说是你们后台服务器出现的问题，而后台会反驳说明明是你前端的问题。争吵是没有任何意义的，能不能解决问题才是前后端更应该专注的地方。

首先定位问题现在两个地方查看，一个是在浏览器的 Console 控制台中；或者在后台的控制台中。

第二步应该分析错误的信息，比如前端最容易出现的问题就是获取不到数据，控制台这时会报错，报错信息如下：

很明显的跨域问题，要么前端人员快速解决这个问题，或者让后台人员配合解决这个问题就好了。

如果后台控制台报错信息如下：

显示状态码 500 错误，HTTP 常见的响应状态码中 500 说明出现服务器端错误，这时候后台人员会去解决。

这是两个很明显的前端和后台的错误信息，最致命的问题就是无法能够通过错误信息定位到是前端还是后台的错误。

这时最好的排查方案就是前后台的开发人员都要对自己负责的一块重新做一次测试，保证没有问题之后，就进行逐步排查其他问题引起的。

是否在同一局域网内，或者服务器上部署是否可以访问，或者数据在传输中是不是出现了问题。我们之前也分享过很多网络原理的知识，这时候前端你就会用上，问题也可能出现在浏览器中，所以前几天小鹿也分享了浏览器的工作原理。

小结

今天分享到的基本都是之前小鹿和团队合作做前后端分离的时候总结出来的经验，最主要的就是遇到问题先不要甩锅，而是快速定位问题，然后解决问题。

很多人为什么喜欢甩锅，其实这就是人性上的一个缺点，总是用最简单的方式解决问题，因为甩锅就直接把问题扯的和自己无关了。而思考怎么定位问题这件事情确很难去执行，所以人的大脑自动选择最快的方案。

更多相关文章

随机推荐