前端如何与后端对接?当年差点和后端同学打起来了!-轻识

阅读须知

本文不谈及老技术（毕竟没有经历那个年代，emmm），只谈一些个人体会，如果会有部分内容与你想法不同，以你为准。

大学期间对于前端的学习

对于我双非本科小菜鸡来说，最开始入门的语言是 C 语言，之后大二大三就以 Java 语言为主。后面了解了一下其它学校同学学习的课程，好像大部分也是以 Java 为主，不过有的学校会教学一些 Web 前端的课程，这个是挺好的。

我是仅仅大二学了一本《Web基础入门指南》书籍（可能书名也不叫这个名字），内容也是比较基础，学习一些 html 标签，css 语法也学的很少。

课程快要结束的时候，老师给我们提及了 ajax 以及异步请求相关的概念，逐渐的有了前后端的概念，最后的作业就是完成一个课程设计，也是比较经典的管理系统，要有数据库连接等等，我们当时做的就是比较经典的「图书管理系统」了。

大学期间做的项目

大二学习前端的知识不是很多，后面来到了大三，学习了 JavaEE 以及软件工程的课程，当时这两门学科老师进行了联合，要求我们分组完成一个大的课程设计，这个也是作为期末考试的重点比例分数，可以说如果这个项目分数不高的话，两门都得挂了。

不过平常与大佬接触蛮多，所以就和大佬们组了队，其中就有一位小学就学习过编程的同学，对于大学才刚接触编程的我来说经验还是有许多差距。

当时软件工程老师给我们提及了，前端框架可以考虑使用 Vue 或者 React 框架，那时候我最开始接触这两个词，然后组内大佬就开始研究这个框架了，让我佩服学习能力真的好强，一周内就开始编写页面了。

而后端当时提及的就是 SSM，如果不太熟悉的小组也可以使用 SSH，我们当时就采用了 SSM 框架，并且采用前后端分离的模式开发。

后端也是一位大佬，当时就引入了 Swagger UI

在这里引用官方的介绍：

Swagger UI allows anyone — be it your development team or your end consumers — to visualize and interact with the API’s resources without having any of the implementation logic in place. It’s automatically generated from your OpenAPI (formerly known as Swagger) Specification, with the visual documentation making it easy for back end implementation and client side consumption.

来自谷歌翻译：Swagger UI 允许任何人——无论是你的开发团队还是你的最终消费者——在没有任何实现逻辑的情况下可视化 API 资源并与之交互。它是根据您的 OpenAPI（以前称为 Swagger）规范自动生成的，带有可视化文档，便于后端实现和客户端使用。

当时做的效果就是如官方图片一样，提供了一种可视化的效果，这样前端同学就不用这么花费很多沟通上的成本，直接看图一目了然。这个当时也是对我的认知有了一些变化，就觉得大佬们真强，对于这个技术广度感到了不足，给大佬们点赞！

最后我们组确确实实拿到了班级第一名，但是过程中前后端的两位大佬也出现过沟通问题，也吵过，就差打起来了...

之后，有这段做项目的经历加上自己也系统学习了前端相关的知识，春招找到了一份实习，接下来就来说说实习工作的真实体验如何。

一次实习工作的真实体验

学校时期与大佬们接触，自己对于技术方面也更加热爱了，同时接触的领域也更广了，比如开始自己去学习 Vue 和 React 框架。

但是带着学校的思维第一次进入了一家公司实习，当时想的是应该前后端也会按照学校那会的方式来做，而实际情况缺差别有点大。

实习那会，有一批的实习生，我应该算是前端的一个主力了，当时讨论的时候就说后端写好接口文档，可以考虑使用 Swagger UI（因为上文提及过，我大学期间就有使用过，这个还挺好用的）

不过当我提及 Swagger UI 时，貌似就一位后端同学知道，其它同学好像没怎么了解。

因为了解的不够充足，这个 Swagger UI 就放弃考虑了，最开始是没有一个规范的接口文档的，告诉我的接口也是比较「简单」，至于这个接口能不能用我还要自己去请求一下，然后测试一下？

当时花费了很多的沟通成本，后来由带我们的组长给后端同学开了一次会议，开始整改规范上的问题，要求写好一份完整的接口文档，之后我就轻松许多了，不需要我做的时候还得和接口负责人沟通许久。

不过，后来又出现了问题，虽然文档的内容是比较详细了，但是因为接口会比较多，所以每个人可能就会分配一下，负责某个模块的几个接口，就在这里出了点小问题。

比如前端取值的话，有些接口是通过 res.data.xxx 就可以获取 xxx 属性的值了，原本我以为大家都会用这种规范上来做，但是之后写其它页面的时候我发现 res.data 取不到值了，充满疑惑的我又开始了调试，在控制台打印了一下，原来我得需要 res.data.data.xxx 才能获取那个值，看完之后我哭了呀。