[转] 前端如何高效的与后端协作开发

1. 前后端分离

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

可以参考：前后端分离、web与static服务器分离(https://segmentfault.com/a/1190000015297319)。

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

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

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

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

可以参考：细说后端模板渲染、客户端渲染、node 中间层、服务器端渲染（ssr）(https://segmentfault.com/a/1190000016704384)。

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

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

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

4. 本地接口模拟开发

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

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

一些常用库：

  • browser-sync(https://github.com/BrowserSync/browser-sync)：能让浏览器实时、快速响应文件更改（ html、 js、css、 sass、 less 等）并自动刷新页面，并且可以同时在PC、平板、手机等设备下进行调试。
  • webpack-dev-middleware(https://github.com/webpack/webpack-dev-middleware)：A development middleware for webpack。
  • webpack-hot-middleware(https://github.com/webpack-contrib/webpack-hot-middleware)：热更新本地开发浏览器服务。

另外，本地接口模拟开发需要后端开发人员有规范的接口文档。

可以参考：本地化接口模拟、前后端并行开发(https://segmentfault.com/a/1190000015297352)。

5. 规范的接口文档

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

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

  1. 格式简洁清晰：推荐用 API Blueprint(https://apiblueprint.org/)
  2. 分组：当接口很多的时候，分组就很必要了
  3. 接口名、接口描述、接口地址
  4. http 方法、参数、headers、是否序列化
  5. http 状态码、响应数据

接口文档可以用一些文档服务（如 leanote(https://github.com/leanote/leanote)）来管理文档，也可以用 git 来管理；书写方式可以用 markdown，也可以 YAML、 JSON 等。

推荐使用 markdown 方式写文档，用 git 管理文档。

可以参考：

  • 本地化接口模拟、前后端并行开发(https://segmentfault.com/a/1190000015297352)
  • API Blueprint(https://apiblueprint.org/)

6. 去缓存

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

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

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

可以参考：webpack output-filename(https://webpack.js.org/configuration/output/#output-filename)。

7. 做好错误处理

前端与后端都需要各自做好错误处理，以便发生错误能够有友好的提示，也能在用户反馈时快速准确定位错误来源和原因。

一般前端的错误分为：

  • 脚本运行错误： js 脚本错误，找到堆栈信息，然后解决
  • 接口错误：服务器报错、数据返回不对、没有响应数据、超时等

而接口错误分为：

  • 状态码错误（状态码非 2XX）：服务器报错、超时等
  • 数据错误：没有响应数据、数据格式不对、数据内容不对

可以参考：HTTP状态码(https://baike.baidu.com/item/HTTP%E7%8A%B6%E6%80%81%E7%A0%81/5053660?fr=aladdin)。

8. 运行时捕捉 js 脚本错误

当用户在用线上的程序时，怎么知道有没有出 bug；如果出 bug 了，报的是什么错；如果是 js 报错，怎么知道是那一行运行出了错？

所以，在程序运行时捕捉 js 脚本错误，并上报到服务器，是非常有必要的。

这里就要用到 window.onerror 了：

window.onerror = (errorMessage, scriptURI, lineNumber, columnNumber, errorObj) => {  const data = {    title: document.getElementsByTagName(‘title‘)[0].innerText,    errorMessage,    scriptURI,    lineNumber,    columnNumber,    detailMessage: (errorObj && errorObj.message) || ‘‘,    stack: (errorObj && errorObj.stack) || ‘‘,    userAgent: window.navigator.userAgent,    locationHref: window.location.href,    cookie: window.document.cookie,  };

  post(‘url‘, data); // 上报到服务器};

线上的 js 脚本都是压缩过的，需要用 sourcemap 文件与 source-map(https://github.com/mozilla/source-map) 查看原始的报错堆栈信息。

可以参考：

  • webpack - devtool(https://webpack.js.org/configuration/devtool/)
  • source-map(https://github.com/mozilla/source-map)

9. 移动端远程调试、vConsole、TBS Studio

因为移动端的开发无法像 pc 端开发一样使用 Chrome 的开发者调试工具，所以调试移动端需要一些额外的技巧。

移动端应用一般都运行在微信浏览器中、 webview 中、手机浏览器中。

远程调试（Remote Debugging）

远程调试就是通过 USB 连接、端口转发、搭建代理等方式，将一个设备的 web 页面映射到另一个设备上，比如将手机的 webview 映射到 pc 上，达到调试的目的。

移动端 web 应用调试难题从一开始就有，不过后来浏览器厂商基本都推出自己的远程调试工具来解决这个问题，包括 OperaMobile、 iOSSafari、 ChromeforAndroid、UC 浏览器等，另外还有一些第三方开发的远程调试工具，比如 weinre(http://people.apache.org/~pmuellr/weinre/docs/1.x/1.5.0/) 等。

以 Android 为例，可以将 webview、 ChromeforAndroid 中的页面映射到 pc 端的 ChromeDevTools，然后就可以在 pc 端调试移动端的页面了。

可以参考：移动端Web开发调试之Chrome远程调试(Remote Debugging)(https://blog.csdn.net/freshlover/article/details/42528643/)。

vConsole

一个轻量、可拓展、针对手机网页的前端开发者调试面板（ chrome 开发者工具的便利实现）。

这个是内嵌的页面当中的便捷调试器，基本上能够满足一般的需要远程调试的页面。

  • github：https://github.com/Tencent/vConsole
  • demo：https://wechatfe.github.io/vconsole/demo.html

TBS Studio

因为微信浏览器是定制的浏览器，一般的远程调试方式都不可用，需要配合特定的工具，如微信开发者工具。

TBS Studio(https://x5.tencent.com/tbs/guide.html) 是另一个可以像 Chrome 一样调试远程微信浏览器页面的强大工具。

可以参考：

  • tbs studio - 腾讯浏览服务-调试工具(https://x5.tencent.com/tbs/guide/debug/season1.html)
  • TBS Studio(https://x5.tencent.com/tbs/guide.html)

10. 前端后并行开发

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

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

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

可以参考：本地化接口模拟、前后端并行开发(https://segmentfault.com/a/1190000015297352)。

11. 友好的沟通

不管工具多么厉害，很多时候都免不了要当面沟通，友好、心平气和的沟通也是很重要的哩！

原文地址：https://www.cnblogs.com/chris-oil/p/10009978.html

时间： 2024-10-10 16:52:13

[转] 前端如何高效的与后端协作开发的相关文章

json数据在前端（javascript）和后端（php）转换

学习目的:前后端数据交换 思路: json数据格式是怎么样? 后端各种语言怎么将自己内容转换成json格式的内容? 前端怎么接收json数据?有几种方式? js中怎么将json数据转换成js中的数组,对象来使用? 遇到问题: 用ajax接收数据直接赋值给了变量,发现里面是一个数组. 在php中不知道怎么传递数据?(或者说ajax的xmlhttp.responseText是怎么获取后端数据的?) php中把对象和数组转换成json数据格式的方法. 学习过程: 1.json知识普及 从结构上看,所有

前端js上传文件后端C#接收文件

本文粗略的讲下前端文件上传和后端文件接收的原理 前端代码 html <form onsubmit="uploadFile(event)"> <input type="file" /> <button type="submit">文件上传</button> </form> js function uploadFile(event) { var files = event.target[0]

java实现word转pdf在线预览（前端使用PDF.js；后端使用openoffice、aspose）

背景 之前一直是用户点击下载word文件到本地,然后使用office或者wps打开.需求优化,要实现可以直接在线预览,无需下载到本地然后再打开. 随后开始上网找资料,网上资料一大堆,方案也各有不同,大概有这么几种方案: 1.word转html然后转pdf 2.Openoffice + swftools + Flexmapper + jodconverter 3.kkFileView 分析之后最后决定使用Openoffice+PDF.js方式实现 环境搭建 1.安装Openoffice,下载地址:

前后端分离开发,基于SpringMVC符合Restful API风格Maven项目实战（附完整Demo）！

摘要: 本人在前辈<从MVC到前后端分离(REST-个人也认为是目前比较流行和比较好的方式)>一文的基础上,实现了一个基于Spring的符合REST风格的完整Demo,具有MVC分层结构并实现前后端分离,该项目体现了一个具有REST风格项目的基本特征,即具有统一响应结构. 前后台数据流转机制(HTTP消息与Java对象的互相转化机制).统一的异常处理机制.参数验证机制.Cors跨域请求机制以及鉴权机制.此外,该项目的完整源码可移步到我的Github参考:RestSpringMVCDemo.喜欢

前端全栈架构，组件式开发，响应式开发，全栈工程师架构，用户界面架构，企业级架构项目实战

我本是一名文科专业半路出家的前端开发人员,从最初只会切图和写CSS.Html到现在会写点JS,一路坑坑洼洼,也是经历了很多,从2010年开始就用WordPress开设了自己的博客,虽然内容零零散散的并不多,但是多多少少也留下了时光的缩影,一直希望自己有一个自留地.用Node.js做服务端替换WordPress是去年的一个想法,由于一直腾不出时间,所以拖到了现在.当然了WordPress作为全球用户量最广的开源博客程序,易用性等诸多好处无可厚非,光自己的博客在过去几年就用了很多套模板,也用它做过很

团队高效率协作开发的秘密武器-APIDOC

团队高效率协作开发的秘密武器 1.前言 在团队协作开发中,不知道各位有没有遇到这样的问题: l 新人接手了项目代码,因没有项目文档,只能靠追踪路由,寻读代码分析业务逻辑 l 前端同学写好了页面,苦等后端接口规则,来写交互请求,获取数据 l 测试同学写测试用例,因项目还没完成,而迟迟无法开工 如何愉快地解决以上问题呢?答案就是它——APIDOC. 2.APIDOC是什么 APIDOC是一款Web API文档生成工具,可以根据代码注释自动生成静态html网页文档,不仅支持项目版本号,还支持接口版本号

vue+mockjs 模拟数据，实现前后端分离开发

在项目中尝试了mockjs,mock数据,实现前后端分离开发. 关于mockjs,官网描述的是 1.前后端分离 2.不需要修改既有代码,就可以拦截 Ajax 请求,返回模拟的响应数据. 3.数据类型丰富 4.通过随机数据,模拟各种场景. 等等优点. 总结起来就是在后端接口没有开发完成之前,前端可以用已有的接口文档,在真实的请求上拦截ajax,并根据mockjs的mock数据的规则,模拟真实接口返回的数据,并将随机的模拟数据返回参与相应的数据交互处理,这样真正实现了前后台的分离开发. 与以往的自己

[转] 前后端分离开发模式的 mock 平台预研

引入 mock(模拟): 是在项目测试中,对项目外部或不容易获取的对象/接口,用一个虚拟的对象/接口来模拟,以便测试. 背景 前后端分离 前后端仅仅通过异步接口(AJAX/JSONP)来编程 前后端都各自有自己的开发流程,构建工具,测试集合 关注点分离,前后端变得相对独立并松耦合 开发流程 后台编写和维护接口文档,在 API 变化时更新接口文档 后台根据接口文档进行接口开发 前端根据接口文档进行开发 开发完成后联调和提交测试 面临问题 没有统一的文档编写规范,导致文档越来越乱,无法维护和阅读 开

前后端协同开发

来源:http://www.jb51.net/article/63588.htm 此文章适合前后端协同开发经验不足的新手阅读.(转) HTML赋值 输出到 Element 的 value 或 data-name ? 1 2 <input type="hidden" value="<?php echo $user_avatar;?>" /> <div data-value="<?php echo $user_avatar;