前端如何与后端高效协作开发

数字舵手
• 阅读 173
  1. 前后端分离

前端与后端的分离,能使前端的开发脱离后端的开发模式,拥有更大的自由度,以此便可做前端工程化、组件化、单页面应用等。

  1. 尽量避免后端模板渲染

web 应用的渲染方式分为服务器端渲染和客户端渲染,当下比较推荐的方式是客户端渲染,数据使用全 ajax 的方式进行交互。

除非在一些不得不使用服务器端渲染的情况下(如门户、电商等),应当尽量使用客户端渲染,因为客户端渲染更能使前后端分离(项目分离、代码解耦、协作分离、职责分离等),也能更好的做本地接口模拟开发,提升开发效率。

即使用服务器端渲染,在技术支持的条件下,可以使用 node 中间层(由前端人员开发),代替传统的后端模板渲染,这样可以使后端与前端完全解耦,后端与前端只有数据上的往来。

  1. 尽量避免大量的线上调试

做好本地接口模拟开发(包括后端模板渲染),避免大量的线上调试,因为线上调试很不方便,也很费事,并且每次更新代码,都需要重新构建,然后同步到服务器。

所以做好本地接口模拟开发,只要程序在本地运行是没问题的,一般线上就不会有太大的问题,这样就能大幅降低调试工作量,提升开发效率。

  1. 本地接口模拟开发

本地接口模拟就是在本地模拟一个与服务器差不多的环境,能够提供数据所需的接口,进行错误模拟处理等等。

本地接口模拟开发的意义就在于能够在本地完成几乎所有的开发与调试,尽量减少线上的调试,提高开发效率。

  1. 规范的接口文档

前端与后端协作提升开发效率的一个很重要的方法就是减少沟通:能够形成纸质的文档就不要口头沟通、能够把接口文档写清楚也不要口头沟通(参数、数据结构、字段含义等),特别是线上协作的时候,面对面交流是很困难的。

一个良好的接口文档应当有以下的几点要求与信息:

格式简洁清晰
分组:当接口很多的时候,分组就很必要了
接口名、接口描述、接口地址
http 方法、参数、headers、是否序列化
http 状态码、响应数据

  1. 去缓存

前端需要做好去客户端缓存的功能,保证用户始终都是使用的最新资源,不会因为因为缓存的问题而出现 bug。

传统的去缓存是在静态资源 url 上加上版本号或者时间戳,不过因为构建工具的出现以及一些浏览器已经不支持这种方式了的缘故,这种方式已经是过去时了。

现在去缓存是将文件 hash 化命名,只要文件变动,文件名就会不一样,以此才能彻底的去缓存。如果使用 webpack 进行打包,会自动将所有文件进行 hash 化命名。

  1. 前端后并行开发

正常情况下,前端的开发在完成 UI 或者组件开发之后,就需要等后端给出接口文档才能继续进行,如果能做到前后端并行开发,也能提升开发效率。

前后端并行开发,就是说前端的开发不需要等后端给出接口文档就可以进行开发,等后端给出接口之后,再对接好后就基本上可以上线了。

在本地化接口模拟的实现下,就可以做到前后端并行开发,只是在代码层面需要对 ajax 进行封装。

  1. 友好的沟通

不管工具多么厉害,很多时候都免不了要当面沟通,友好、心平气和的沟通也是很重要的!
更多技术资讯可关注:gzitcast

点赞
收藏
评论区
推荐文章
Symbol卢 Symbol卢
3年前
聊聊前后端接口对接的那些事
前言在现在的前后端分离的项目开发中,为了不影响项目的进度,都是前后端同时进行开发。为了不影响咱们前端开发的进度,通常都是由后端同学,先提供接口文档,然后前端同学对照这接口文档来进行数据的模拟来完成前后端对接的工作。这里的数据模拟其实也就是大家平时所说的mock数据,那么前端当中有哪些方式来实现mock数据呢???…(⊙_⊙;)…咱们接着往下聊!(●^o^●)
Wesley13 Wesley13
3年前
java将前端的json数组字符串转换为列表
记录下在前端通过ajax提交了一个json数组的字符串,在后端如何转换为列表。前端数据转化与请求varcontracts{id:'1',name:'yanggb合同1'},{id:'2',name:'yanggb合同2'},{id:'3',name:'yang
Easter79 Easter79
3年前
Vue 入门
Vue.js是构建用户界面的MVVM框架 ,只关注视图层Vue将DOM和数据绑定起来,一旦创建了绑定,DOM将和数据保持同步,每当变更了数据,DOM也会相应地更新。这样就减少了不必要的DOM操作提高渲染效率,让前端程序员只需要关心业务逻辑不再关心DOM是如何渲染的MVC和MVVM的区别:MVC是后端分层开发概念,MVVM是前端视图层
Easter79 Easter79
3年前
springboot2之优雅处理返回值
前言最近项目组有个老项目要进行前后端分离改造,应前端同学的要求,其后端提供的返回值格式需形如{"status":0,"message":"success","data":{}}方便前端数据处理。要实现前端同学这个需求,其实也挺简单的,
Stella981 Stella981
3年前
React 服务端渲染完美的解决方案
最近在开发一个服务端渲染工具,通过一篇小文大致介绍下服务端渲染,和服务端渲染的方式方法。在此文后面有两中服务端渲染方式的构思,根据你对服务端渲染的利弊权衡,你会选择哪一种服务端渲染方式呢?什么是服务器端渲染使用React构建客户端应用程序,默认情况下,可以在浏览器中输出React组件,进行生成DOM和操作DOM。Re
Stella981 Stella981
3年前
AJAX学习笔记(五、AJAX+JSON与Servlet前后端交互)
前后端分离实现前后端分离的好处就不用多说了,前后端那么JavaWeb项目前后端分离是怎么实现的呢?1.浏览器发送请求2.直接到达html页面(前端控制路由与渲染页面,整个项目开发的权重前移)3.html页面负责调用服务端接口产生数据(通过ajax等等,后台返回json格式数据,json数据格式因为简洁高效而取代xml)
Stella981 Stella981
3年前
ASP.NET Core 奇技淫巧之接口代理转发
前言先讲讲本文的开发背景吧..在如今前后端分离的大背景下,咱的客户又有要求啦~要前后端分离~然因为种种原因..没办法用用纯前端的框架(其实是学习成本高,又没钱请前端开发人员)...所以最终决定了一种方案..那就是采用MVC(只处理前端视图层,单纯是为了托管在.netcore上)Webapi的方式来实现前后端分离(讲真,很奇葩)..
Stella981 Stella981
3年前
React官方团队推出了最新的 React Server Components 技术
最近react个官方团队推出了最新的ReactServerComponents这项技术。这篇文章将对其相关知识点进行介绍。那些常见的渲染模式CSR客户端渲染(ClientSideRendering)应该是前端最熟悉的一种模式了。从前端的发展历程上看,富客户端目前也已经成为现代前端应用的主流架构。从jQu
Stella981 Stella981
3年前
Serverless 实战——使用 Rendertron 搭建 Headless Chrome 渲染解决方案
为什么需要Rendertron?传统的Web页面,通常是服务端渲染的,而随着SPA(SinglePageApplication)尤其是React、Vue、Angular为代表的前端框架的流行,越来越多的WebApp使用的是客户端渲染。使用客户端渲染有着诸多优势,比如节省后端资源、局部刷新、前
Wesley13 Wesley13
3年前
Vue 服务端渲染(SSR)
Vue服务端渲染(SSR)什么是服务端渲染,简单理解是将组件或页面通过服务器生成html字符串,再发送到浏览器,最后将静态标记"混合"为客户端上完全交互的应用程序。于传统的SPA(单页应用)相比,服务端渲染能更好的有利于SEO,减少页面首屏加载时间,当然对开发来讲我们就不得不多学一些知识来支持服务端渲染。同时服务端渲染对服
WebSocket魔法师:打造实时应用的无限可能 | 京东物流技术团队
1、背景在开发一些前端页面的时候,总是能接收到这样的需求:如何保持页面并实现自动更新数据呢?以往的常规做法,是前端使用定时轮询后端接口,获取响应后重新渲染前端页面,这种做法虽然能达到类似的效果,但是依然有很多缺点,缺点就不在这里说了,感兴趣的小伙伴可以自行