热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

开发笔记:说实话:前后端分离后,比从前更痛苦了

本文由编程笔记#小编为大家整理,主要介绍了说实话:前后端分离后,比从前更痛苦了相关的知识,希望对你有一定的参考价值。
本文由编程笔记#小编为大家整理,主要介绍了说实话:前后端分离后,比从前更痛苦了相关的知识,希望对你有一定的参考价值。











优质文章,及时送达





作者 | 谢小呆呆呆



链接 | https://www.jianshu.com/p/941825521354


你有没有遇到过:





  • 前端代码刚写完,后端的接口又变了。



  • 接口文档永远都是不对的。



  • 测试工作永远只能临近上线才能开始。


为什么前后端分离了,你比从前更痛苦?



前后端分离早已经不是新闻,当真正分离之后确遇到了更多问题。要想解决现在的痛,就要知道痛的原因:

为什么接口会频繁变动?



设计之初没有想好。 这需要提高需求的理解能力和接口设计能力。


变动的成本较低。


德国有句谚语:“朝汤里吐口水。” 只有这样,才能让人们放弃那碗汤,停止不合理的行为。前后端同学坐在一起工作的时候效率会有提升,当后端同学接口变化时,只需要口头上通知一下即可,我们没有文档,我们很敏捷啊。没错,我们需要承认这样配合开发的效率会很高,但是频繁的变动会导致不断返工,造成了另一种浪费,这种浪费是可以被减少,甚至是被消除的。

为什么接口文档永远都是不对的?



接口文档在定接口时起到一定作用,写完接口就没有用了。后面接口的频繁变化,文档必定会永远落后于实际接口,维护文档的带来了一定的成本却没能带来价值。除非对外提供的接口,否则文档谁来看呢?没人看,用处又在哪?


有些公司干脆丢掉接口文档,说我们要拥抱敏捷。


所以接口文档落后的原因在于没有给我们带来价值。

为什么测试工作永远只能临近上线才能开始?



一个需求,后端开发 4 天,前端开发 4 天,联调 4 天,留给测试同学只有2天时间甚至更少,测不完只能带 bug 上线。

说实话:前后端分离后,比从前更痛苦了



现有开发流程


在开发阶段测试同学无法介入,接口在变,前端也在变, “提测” 之前只能喝茶,“提测” 之后又忙的要命。


自动化?想都别想,空有一身好本领,在 “拥抱变化” 之后只能手工测试。偶尔还要拉上前台美眉客串一下测试小妹。手工测试枯燥乏味,乏味的工作就容易出错,而且还不能快速重复,无法对测试过的功能快速回归。

怎么破?



解决以上问题要让接口文档发挥价值,提高变动接口的成本,测试尽早介入。


接口文档发挥出价值,就要赋予契约的意义,就如同签字画押谁也不许变,来约束我们只认契约不认人。


契约应该由前端同学来驱动,前后端共同协商。由于前端同学与 UX 接触比较紧密,更了解页面所需的数据以及整体的 User Journey,前端同学驱动会更加合理。


契约敲定之后要帮助我们生成 Mock Server(后面我们会介绍一个工具),前后端同学就要依照契约各自开发。Mock Server 可暂时替代后台服务,帮组前端开发,同时,测试同学也可以依照契约文档来编写测试脚本,使用 Mock Server 进行脚本验证。

说实话:前后端分离后,比从前更痛苦了



改进后的开发流程


当后端接口发生变化除了口头通知以外必须修改契约,前端同学和测试同学才能各自修改。如此一来修改契约的成本变高,人们在定契约时则会更加慎重,也会促使我们提高接口的设计能力。


看到图中没有 “联调” 的环节,并不是画错了,而是 “联调“ 不再是一项工作,在部署后只需要更改代理的配置即可。甚至使用现代前端框架(如,Vue 或者 React)只要在开发时配置一下,之后都不需要调整任何代码。


“提测” 呢?测试一直都在进行,也就不再有一个 ”提测“ 的环节,无论前后端任意一方完成开发,测试同学都可以进行测试。


理论终于扯完了,说起来容易做起来难啊,需要工具来帮助我们。接口描述的工具有很多,比较知名的 Swagger 和 Raml,我个人更倾向于 Raml 。

说实话:前后端分离后,比从前更痛苦了



API 文档


描述工具生成文档还不够,还要生成 Mock Server,如果描述工具和 Mock Server 是分离又带来了额外的工作,好在有她——raml-mocker。

raml-mocker



raml-mocker (https://github.com/xbl/raml-mocker) 是一个基于 Raml 使用 Nodejs 开发的 Mock Server 工具,使用 Raml 描述接口中设置 response 的
example
指令即可,raml-mocker 会解析 Raml 文件,并启动一个 Mock Server,将  
example
的内容返回给浏览器。

开始


初始化项目



git clone https://github.com/xbl/raml-mocker-starter.git raml-api
cd raml-api
git remote rm origin




安装


启动 mock server





yarn start
# or
npm start




测试





curl -i http://localhost:3000/api/v1/users/1/books/
# or
curl -i http://localhost:3000/api/v1/users/1/books/1




生成 API 可视化文档





yarn run build
# or
npm run build




此功能使用了raml2html


配置 .raml-config.json





{
  "controller": "./controller",
  "raml": "./raml",
  "main": "api.raml",
  "port": 3000,
  "plugins": []
}







  • controller: controller 目录路径,在高级篇中会有更详细说明



  • raml: raml 文件目录



  • main: raml 目录下的入口文件



  • port:  mock server 服务端口号



  • plugins: 插件


入门篇:Mock Server



raml-mocker 只需要在response 添加
example
:


/books:
  /:id:
    post:
      body:
        application/json:
          type: abc
      responses:
        200:
          body:
            application/json:
              type: song
              
              example: !include ./books_200.json



books_200.json


{
  "code": 200,
  "data": [
    {
      "id": 1,
      "title": "books title",
      "description": "books desccription1"
    },
    {
      "id": 2,
      "title": "books title",
      "description": "books desccription2"
    }
  ]
}



通过 curl 请求:


curl -i http://localhost:3000/api/v1/users/1/books



就会得到
example
的数据,唯一不足是无法根据参数动态返回不同数据。别急,请往下看。

高级篇:动态 Server



如果静态的 Mock 数据不能满足你的需求,Raml-mocker 还提供了动态的功能。


在 raml 文档中添加
(controller)
指令,即可添加动态的 Server,如:


/books:
  type:
    resourceList:
  get:
    description: 获取用户的书籍
    (controller): user
    responses:
      200:
        body:
          type: song[]
          example: !include ./books_200.json



在文档中
(controller)
 表示 controller 目录下 user.js 中 getBook 函数。


controller/user.js


exports.getBook = (req, res, webApi) => {
  console.log(webApi);
  res.send('Hello World!');
}



Raml-mocker 是在 expressjs 基础上进行开发,req、res 可以参考 express 文档。


webApi 会返回文档中的配置:


{
  "absoluteUri": "/api/:version/users/:user_id/books",
  "method": "get",
  "controller": "user#getBook",
  "responses": [
    {
      "code": "200",
      "body": "... example ...",
      "mimeType": "application/json"
    }
  ]
}



如此,raml-mocker 提供了更多可扩展空间,我们甚至可以在 controller 中实现一定的逻辑。

插件



Raml-mocker 提供了插件机制,允许我们在不使用
controller
指令的时候对 response 的内容进行处理,例如使用 Mockjs。


.raml-config.json


{
  "controller": "./controller",
  "raml": "./raml",
  "main": "api.raml",
  "port": 3000,
  "plugins": ["./plugins/mock.js"]
}



./plugins/mock.js


var { mock } = require('mockjs');

module.exports = (body) => {
  try {
    return mock(JSON.parse(body));
  } catch(e) {}
  return body;
}



Enjoy it!

总结



前后端分离可以让我们的职责更清晰,打破前端发挥的局限,工作解耦之后能更好的提高开发效率。然而因为没有规划好开发流程,导致了我们没有发挥出其应有的价值,造成了更多的浪费。


raml-mocker 能够帮助我们在工具上解决一定的问题,更重要的是持续改进的思想,只有团队的思想是统一的才有可能达到快速交付。


希望能对你有所帮助,谢谢!

【END】




如果看到这里,说明你喜欢这篇文章,请转发、点赞。微信搜索「web_resource」,关注后回复「进群」或者扫描下方二维码即可进入无广告交流群。


扫描二维码进群↓


说实话:前后端分离后,比从前更痛苦了











读 


1. 


2.
 


3. 


4. 

5.  





在看 



推荐阅读
  • 基于Node.js的高性能实时消息推送系统通过集成Socket.IO和Express框架,实现了高效的高并发消息转发功能。该系统能够支持大量用户同时在线,并确保消息的实时性和可靠性,适用于需要即时通信的应用场景。 ... [详细]
  • 利用爬虫技术抓取数据,结合Fiddler与Postman在Chrome中的应用优化提交流程
    本文探讨了如何利用爬虫技术抓取目标网站的数据,并结合Fiddler和Postman工具在Chrome浏览器中的应用,优化数据提交流程。通过详细的抓包分析和模拟提交,有效提升了数据抓取的效率和准确性。此外,文章还介绍了如何使用这些工具进行调试和优化,为开发者提供了实用的操作指南。 ... [详细]
  • 在开发过程中,我最初也依赖于功能全面但操作繁琐的集成开发环境(IDE),如Borland Delphi 和 Microsoft Visual Studio。然而,随着对高效开发的追求,我逐渐转向了更加轻量级和灵活的工具组合。通过 CLIfe,我构建了一个高度定制化的开发环境,不仅提高了代码编写效率,还简化了项目管理流程。这一配置结合了多种强大的命令行工具和插件,使我在日常开发中能够更加得心应手。 ... [详细]
  • Vue应用预渲染技术详解与实践 ... [详细]
  • 在CentOS上部署和配置FreeSWITCH
    在CentOS系统上部署和配置FreeSWITCH的过程涉及多个步骤。本文详细介绍了从源代码安装FreeSWITCH的方法,包括必要的依赖项安装、编译和配置过程。此外,还提供了常见的配置选项和故障排除技巧,帮助用户顺利完成部署并确保系统的稳定运行。 ... [详细]
  • 本文详细介绍了在 React Native 开发过程中遇到的 'Could not connect to development server' 错误及其解决方法。该问题不仅影响开发效率,而且难以通过网络资源找到确切的解决方案。本文将提供详细的步骤,帮助开发者快速解决这一常见问题。 ... [详细]
  • React项目基础教程第五课:深入解析组件间通信机制 ... [详细]
  • 在过去,我曾使用过自建MySQL服务器中的MyISAM和InnoDB存储引擎(也曾尝试过Memory引擎)。今年初,我开始转向阿里云的关系型数据库服务,并深入研究了其高效的压缩存储引擎TokuDB。TokuDB在数据压缩和处理大规模数据集方面表现出色,显著提升了存储效率和查询性能。通过实际应用,我发现TokuDB不仅能够有效减少存储成本,还能显著提高数据处理速度,特别适用于高并发和大数据量的场景。 ... [详细]
  • 在CentOS 7上部署WebRTC网关Janus
    在CentOS 7上部署WebRTC网关Janus ... [详细]
  • React 实现 Post 请求下载 PDF 文件的解决方案
    在 React 应用中实现通过 POST 请求下载 PDF 文件的功能,本文提供了完整的代码示例。具体实现包括设置状态以显示加载提示,并通过控制台日志记录下载索引,确保请求的正确性和用户体验。此外,还详细介绍了如何处理响应流并将其转换为可下载的 PDF 文件,适用于需要安全传输数据的场景。 ... [详细]
  • 本文详细介绍了使用响应文件在静默模式下安装和配置Oracle 11g的方法。硬件要求包括:内存至少1GB,具体可通过命令`grep -i memtotal /proc/meminfo`进行检查。此外,还提供了详细的步骤和注意事项,确保安装过程顺利进行。 ... [详细]
  • Go语言实现Redis客户端与服务器的交互机制深入解析
    在前文对Godis v1.0版本的基础功能进行了详细介绍后,本文将重点探讨如何实现客户端与服务器之间的交互机制。通过具体代码实现,使客户端与服务器能够顺利通信,赋予项目实际运行的能力。本文将详细解析Go语言在实现这一过程中的关键技术和实现细节,帮助读者深入了解Redis客户端与服务器的交互原理。 ... [详细]
  • 这篇文章将揭示 Vue 和 React 组件库中五个鲜为人知的强大工具。这些工具均以纯 JavaScript 实现,功能卓越。其中,async-validator 是一个数据验证插件,不仅预置了 URL 和电子邮件的验证规则,还支持异步验证功能。 ... [详细]
  • 本文介绍了在Windows 10系统下使用VirtualBox虚拟机环境部署CentOS 7.2,并在其上安装Docker的具体步骤。针对宝塔面板在Docker容器中磁盘空间限制为8GB的问题,提供了详细的解决方案和优化建议,确保用户能够高效利用有限的存储资源。 ... [详细]
  • 01基本环境win10vs2015Gitpython3.5.3cmake-gui(3.7.2)caffe2github地址:https:github.com ... [详细]
author-avatar
机敏的柑桔hs5
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有