1.前端无法调试后端未完成的API开发(组图)

为什么要前后端分离?如何实现前后端分离怎么做前后端分离,我们认为的前后端分离所以我们现在所谈的前后端分离,更多的是基于上面我们所遇到的问题出发,即基于现有的前后端共同渲染View,但前端又能独立开发的优化角度出发。,单页应用)的架构,这种架构是天然的前后端分离的。框架,从物理上实现了前后端分离。做到了真正的前后端分离。

前后端分离总结我们遇到了哪些问题?

1. 前端无法调试后端未完成的API:如果后端同学没有完成API开发,那么前端同学就无法进行API的开发。以前,我们在代码中直接给变量赋值,或者直接在后台JSON进行调试。这样每次提交的时候很容易就删除了,有时候忘记了没有删除,那么提交历史就会变得很脏。

2. 不自动测试:前端对接口的调用不自动测试。

3.前端需要依赖后端开发环境:前端需要后端环境在本地测试,就像我们采用的方案是+虚拟机开发。这个方法其实很麻烦。不仅每次启动虚拟机都要等待一段时间,而且还占用了一定的CPU和内存资源,拖慢了机器的运行速度。然而,所有前端需要的是数据。

如何解决这些问题?——前后端分离

大多数互联网公司分为前端团队和后端团队。在软件设计中,我们有一个(Soc)的思想,也就是关注点分离的思想。既然我们采用了前后端由不同团队开发的模式,我们就应该有分而治之的思想,也就是说,我们应该尽可能地专注于我们所从事的领域。

一.为什么要分开前端和后端?

1.框架层

前后端仓库分离:

整个前端项目使用git与后端Git项目分离。后端应用程序都使用相同的前端代码库。

前端只有前端代码,启动前端项目。前端使用mock数据渲染ftl模板和页面展示

2.开发水平

前后端约定接口,分别开发;节省时间(但联调时间可能会增加),及时更新和沟通界面

在线只能上传前端或后端代码

二.如何实现前后端分离

前后端分离怎么做,我们认为是前后端分离

前端:负责View和。

后端:责任层、业务处理/数据处理等。

想象一下,如果前端掌握了,我们可以做url,我们可以根据场景决定在服务端同步渲染,或者根据view层数据输出json数据,我们也可以根据表现层的需求等等,完全是需求决定了使用方式。

其实很多成熟的网站都没有做到以上的设计。很多时候后端还要负责渲染部分View,比如很多后端模板。有时这是需要的。所以我们说的前后端分离更多是基于我们上面遇到的问题,也就是基于现有的前后端一起渲染View,但是前端可以从优化的角度独立开发.

选项 1:采用 SPA 架构

业内很多公司都会采用SPA(Page, Page )架构,前后端自然分离。所有数据都以JSON的形式从后端传输到前端。前端本身也有自己的MV*框架,在物理上将前端和后端分开。

在WEB服务中,SPA占比很小。在很多场景下,存在同步/同步+异步混合模式,SPA不能作为通用的解决方案。

方案二:淘宝UED的大前端方案(中途岛)

上图是淘宝基于Node的前后端分离分层,以及Node的职责范围。简单解释下:

-最上端是服务端,就是我们常说的后端。后端对于我们来说,就是一个接口的集合,服务端提供各种各样的接口供我们使用。因为有Node层,也不用局限是什么形式的服务。对于后端开发来说,他们只用关心业务代码的接口实现。
-服务端下面是Node应用。
-Node应用中有一层Model Proxy与服务端进行通讯。这一层主要目前是抹平我们对不同接口的调用方式,封装一些view层需要的Model。
-Node层还能轻松实现原来vmcommon,tms(引用淘宝内容管理系统)等需求。
-Node层要使用什么框架由开发者自己决定。不过推荐使用express+xTemplate的组合,xTemplate能做到前后端公用。
-怎么用Node大家自己决定,但是令人兴奋的是,我们终于可以使用Node轻松实现我们想要的输出方式:JSON/JSONP/RESTful/HTML/BigPipe/Comet/Socket/同步、异步,想怎么整就怎么整,完全根据你的场景决定。
-浏览器层在我们这个架构中没有变化,也不希望因为引入Node改变你以前在浏览器中开发的认知。
-引入Node,只是把本该就前端控制的部分交由前端掌控。

淘宝UED的大前端解决方案的思路很先进。在前端HTML/CSS/JS和后端Java之间设置了一层。View层和层都是前端团队开发的,后端团队只负责。地面。但是,这种方案会给项目带来非常大的改动,改造的成本也会非常高。实现了真正的前后端分离。这不是我们要讨论的内容。有兴趣的可以搜索相关文章。

选项 3:构建 Mock

Mock 的概念非常简单。就是在开发环境中搭建模拟服务器,然后搭建假数据(Mock Data),然后利用搭建的假数据进行开发。

这种方法的好处:

灵活性高:它小到可以只拦截一个 HTTP 请求,对某一个 API 进行调试;大到前端可以完全使用 Mock Server 进行开发,在本地完全不需要跑后端服务器。所以它可以以非常平滑柔和的方式融入到前端项目的开发当中。
构建简单:我们甚至只需要通过 Fiddler 或者 Charles 等抓包拦截软件,就可以完成一个 Mock Server 的构建。
能自动生成 API:由于数据和接口都是确定的,所以我们可以利用它来创建 API 文档,便于前后端开发。
能为自动化测试铺路:同样是由于数据和接口都是确定的,所以我们还可以利用它来做单元测试。

三.如何改造我们的项目?

四. 具体实现

我们想要的模拟数据如下所示:

1.全工程的数据都要Mock;2.在固定平台上创建接口,接口的请求参数和返回参数灵活配置;3.能通过简单的命令实现数据的Mock;4.只启动前端工程,不启动后端工程;

网上有很多开源技术,可以实现模拟数据的功能;

1.

2. rap 的项目,RAP

以上开源技术的优缺点:

特点:友好的图形界面,完整的界面文档

缺点:界面完全托管在网站上,存在安全隐患

简单数据伪造,仅本地数据伪造(无接口文件)

1.Mock.js

使用参考

2..js

接口参考

特点:安全性高,生成本地数据;根据语法生成相应的数据

缺点:没有图形界面,手动界面文档

很多时候,我们在写单页应用的时候,需要启动一个本地,这里推荐puer。简而言之,普洱是一个可以实时编辑和刷新的前端服务器;同时,它还具有模拟数据的功能。

文件类型

特点:漂亮的界面文档

缺点:无图形界面,文档编写和学习成本高;适合后端编写接口文档

总结:

如果要做工程,我们必须建立一个固定的站点,我们开始引入,图形化的输入和显示界面;并结合工程建立模拟数据功能。

如果我们只是开发单页应用,我们可以使用 Mock.js 来模拟奇异化的数据。

如果要写接口文档,推荐。

先简单的做一下上面的介绍。

【参考】:

免责声明:本文来自网络用户投稿,不代表本站观点和立场。如有侵权请发送邮件至tzanseo@163.com告知本站删除,本站不负任何责任及承诺。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。

发表评论

登录后才能评论