资讯专栏INFORMATION COLUMN

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

Martin91 / 2460人阅读

阅读须知

本文不谈及老技术(毕竟没有经历那个年代,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 才能获取那个值,看完之后我哭了呀。

于是乎,我又得找后端同学商量一下了…

作为一起加入的实习同学,出现问题也是很正常,遇到问题去解决问题就好了。

要是脾气暴躁的前端 er,估计会和后端开怼了,甚至打起来了(开个玩笑哈,一般不会有这种情况的哈,打赢了坐牢,打输了住院…)

前端与后端的对接

之前有一位小伙伴问我前端与后端对接需要掌握哪些技术栈,该怎么对接等等。

首先,是技术栈方面,其实对于前端来说,了解一下「RESTful API」就好了,一般后端同学返回的接口类型和这个设计差不多,可能公司要求会有点差别。

https://www.ruanyifeng.com/blog/2018/10/restful-api-best-practices.html

在现在主流前后端分离开发模式下,前端同学就负责编写界面实现,后端同学提供 API 接口,这样减少一些沟通成本。

在过去前后端打架的时代,我觉得你写的接口不行,而你又觉得我写的页面太简单了,觉得我技术一般。然后就打起来了…

咳咳,题外话题外话,至少我是没有经历过那个时代,真打没打起来我还没实际见过,但是网上见过,见过真实的产品和开发人员对喷的情况。

而至于怎么对接的话,作为前端来说的话,如果后端同学按照公司规范提供接口文档或者一些可视化的接口,这样是非常好的,自己也会轻松很多,省去一些沟通的成本。

但实际情况往往与理想状态还是有点差距,有时候后端同学返回的接口可能会有一些问题,这也很正常,谁还不经历个 bug 呢,作为前端的我们来说,不要抱怨,和平交流。

因为这个功能是这位后端同学给你提供接口,说不定之后的一些功能你们还需要合作,因此建立良好的合作关系还是很重要的。

结尾

本篇文章就到此结束啦,的文章可不仅仅只有知识类分享哈,喜欢我的文章可以点点关注,下次我们还能遇见,许久没有求点赞了,这次能要一个「点赞」吗,各位大佬们,球球了~

我是「一百个Chocolate」,一位狮子座的程序员,带着热情面对生活,好好生活,好好学习。

2021 年还有一个季度,我们一起加油!

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/122554.html

相关文章

  • 从国企到互联网,一个初入职场将近一年半工作经验程序员的「得」与「失」

    摘要:写在前面年月日,我只身一人来到北京,开始人生中的第一份工作,在一家国企从事软件开发工作。因为现在晚饭都是在公司吃,如果不是刷朋友圈,我是不知道北京哪天的夕阳又刷屏了的,因此错过了很多美丽的瞬间,也算一点遗憾吧。 ...

    不知名网友 评论0 收藏0
  • web前端(1)——解什么是前端,以及后端的关系

    摘要:简介什么是前端说这个之前,我们先了解前端工程师是干什么的,百度百科的解释前端开发工程师,主要职责是利用等各种技术进行客户端产品的开发。简介 1.什么是web前端 说这个之前,我们先了解web前端工程师是干什么的,百度百科的解释: Web前端开发工程师,主要职责是利用(X)HTML/CSS/JavaScript/Flash等各种Web技术进行客户端产品的开发。完成客户端程序(也就是浏览器端...

    番茄西红柿 评论0 收藏0
  • 第八期杭州NodeParty x Rokid技术分享会回顾

    摘要:月号,杭州和联合主办的第八期技术分享会,在公司如期举行。张伟林,宋小菜资深前端开发工程师,年,霹雳迷,已手残的纸牌魔术师,喜欢神奇的东西,技术栈从上向下不断横向纵向贯穿,目前在寻找前后端大一统思想的路上越走越偏。 showImg(https://segmentfault.com/img/bVbkWN4?w=3000&h=1686); 12 月 9 号,杭州 NodeParty 和 Ro...

    gself 评论0 收藏0
  • 《从零构建前后分离的web项目》实战 - 欲善其事必先利其器 继续前端架构

    摘要:工欲善其事必先利其器继续打磨前端架构抱歉生病拖更了,快乐本文永久更新地址填坑上回还真的有同学提到了这个问题,感谢细心的你。既实现了拦截又实现了状态的共享。愉快的拿到了数据这样,前后分离的项目可以这样借助测试接口,不需要骚扰任何人。 工欲善其事必先利其器 - 继续打磨前端架构 抱歉生病拖更了,1024快乐 本文永久更新地址 填坑 上回还真的有同学提到了这个问题,感谢细心的你。@_noob...

    Mike617 评论0 收藏0
  • [聊一聊系列]聊一聊前端模板与渲染那些事儿

    摘要:欢迎大家收看聊一聊系列,这一套系列文章,可以帮助前端工程师们了解前端的方方面面不仅仅是代码作为现代应用,的大量使用,使得前端工程师们日常的开发少不了拼装模板,渲染模板。我们今天就来聊聊,拼装与渲染模板的那些事儿。一改俱改,一板两用。 欢迎大家收看聊一聊系列,这一套系列文章,可以帮助前端工程师们了解前端的方方面面(不仅仅是代码):https://segmentfault.com/blog...

    UCloud 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<