前后端的分离

对于大部分应用,已经不需要从后端读取HTML页面或者模板,前端完全可以根据数据自行渲染页面/模板,这样,前后台交互就可以简化为数据的增删改查。利用AJAX技术,实现页面局部刷新,促使了前后台分离的可能性。

那么,如何利用前后端分离开发模式,开始一个项目呢?

1. 产品文档

产品经理会先设计好整个产品的业务模块和流程,并给出产品文档,包括UI交互,流程图,模块划分等等。
这个时候,产品,前端,后端,测试需要一起评审文档,可能需要多次评审才能确定设计方案。

2. 前端提供接口定义

第二个阶段是前后台同时开发时期。后端同学在设计数据库和表结构的时候,前端同学应该熟悉交互文档和整个业务在表现层上的流程,并且根据页面的展现方式,给出合理或者期望的数据模型(一般是JSON数据结构) 。

比如,需要哪些接口?接口API是只读的还是可修改的?接口入参是什么?接口出参是什么?......这些问题,以往都是由后端同学考虑并定义的。但是,实际上,前端同学是最熟悉交互操作的,前端同学期望的API也是最符合页面需求的,当然,如果某个接口涉及到其他业务模块时,它的复杂性可能就无法在页面上体现出来。然而,无论如何,前端同学是应该,也能够在接口定义上提供合理,富有建设性意见的方案。

因此,第二阶段,前端需要给后端同学提供一份接口定义清单。

3.后端给出接口文档,并通过review

阶段二前端同学提供的接口设计清单,毕竟只是建议,真正的接口还需要后端定义和实现。所以,第三阶段,后端需要提供正式的API文档,并且,前端同学参加review,确保所有的API(入参,出参,和HTTP请求方法)都被双方认可。

4. 前后端同步开发

API文档确定后,前后台就能够同时开发了。这时,又可能分为两种情况。

(1) 后端已经定义好接口并且发布,但是,返回值都为假数据,不支持修改操作。前端同学利用已发布的API进行测试。
(2) 后端没有发布任何接口,前端同学自行mock数据(利用本地json文件,或者在线的一些mock工具,比如easy mock等模拟数据),然后边写页面边测试。

5. 联调阶段

当后端业务代码已经完成,前端页面和数据交互部分完成,前后端就可以进行联调了。这个阶段,是磨合期,肯定会出现很多问题,也需要双方协商去解决。

当后台接口变更时,必须同步更新API文档,并第一时间通知前端同学,保证前台接口调用也同步更新。

同时,测试人员可以介入,针对接口进行单元测试。注意,这时只是针对接口的黑盒测试,不要涉及任何UI操作。

6. 冒烟测试和其他安全性测试

当联调阶段完成后,也就是开发人员(前端和后端)认为已经没有bug的情况下,项目再交由测试人员进行冒烟测试。同时,有需要的话,同时安排安全性测试。

几轮测试,几轮bug fixing之后,项目就可以上线了。

小结

可以看到,前后端分离开发模式可以让分工更明确,提高生产效率,加速项目开发和迭代,也能够让API文档化,便于后期维护。

原文地址:https://www.cnblogs.com/mayun0504/p/10265095.html

时间: 2024-08-30 01:28:03

前后端的分离的相关文章

vue发布中的前后端分离和前后端不分离

前后端分离 思路:前端和后台完全分离.前端提供静态的css和js,在运行时将css和js给后端,后端进行数据的请求(ajax) 前后端分离就是前端和后台在不同的服务器上.基本是前端一个nginx加css和js 后端nginx加index.html 当用户访问的时候,访问后端nginx的网址,执行后端的index.html,在运行到资源时,访问前端的nginx返回的css,js等 前后端不分离 思路:前端和后台不分离.前端是源代码build后的代码 后端进行数据的请求(ajax) 前后端不分离就是

前后端分离与前后端不分离

前后端不分离 在前后端不分离的应用模式中,前端页面看到的效果都是由后端控制,由后端渲染页面或重定向,也就是后端需要控制前端的展示,前端与后端的耦合度很高. 这种应用模式比较适合纯网页应用,但是当后端对接App时,App可能并不需要后端返回一个HTML网页,而仅仅是数据本身,所以后端原本返回网页的接口不再适用于前端App应用,为了对接App后端还需再开发一套接口. 请求的数据交互如下图: 前后端分离 在前后端分离的应用模式中,后端仅返回前端所需的数据,不再渲染HTML页面,不再控制前端的效果.至于

前后端分离与前后端不分离的区别

前后端不分离 在前后端不分离的应用模式中,前端页面看到的效果都是由后端控制,由后端渲染页面或重定向,也就是后端需要控制前端的展示,前端与后端的耦合度很高. 这种应用模式比较适合纯网页应用,但是当后端对接App时,App可能并不需要后端返回一个HTML网页,而仅仅是数据本身,所以后端原本返回网页的接口不再适用于前端App应用,为了对接App后端还需再开发一套接口. 请求的数据交互如下图: 前后端分离 在前后端分离的应用模式中,后端仅返回前端所需的数据,不再渲染HTML页面,不再控制前端的效果.至于

前后端不分离

今天找文件的时候突然发现了一枚总结文档,觉得有必要留存,以防下次找不着就一不小心发了这篇,哈哈哈 一直做后台管理系统,采用react前后端分离,以接口的形式相互交流,猝不及防得来了三个页面开发,然后: 项目概况:二月开始接手A项目,该项目由前端写静态页面,php开发嵌套数据的形式展现,为期一个月,给前端时间为两周,然后交付到数据嵌套的人员:三月中旬开始接手B项目,该项目有两个端,支付宝端C端以及后台管理平台,这两个项目统统由前端写静态页面,java来嵌套数据. 项目详情: 1.A项目:由于一直没

【转载】java前后端 动静分离,JavaWeb项目为什么我们要放弃jsp?

原文:http://blog.csdn.net/piantoutongyang/article/details/50878214 今天看到两篇文章,讲解 为什么web开发启用jsp,确实挺有道理,整理如下: 使用jsp的痛点: 1.jsp上动态资源和静态资源全部耦合在一起,服务器压力大,因为服务器会收到各种静态资源的http请求,动态代码的等等,除非你使用nginx. 万一你的java代码出现了bug,你的页面是显示不出来的,直接蹦到了5xx页面,用户体验极差. (现在javaWeb项目业界的标

什么是前后端分离与前后端不分离

我起初认为前后端分离是,在软件开发过程中前后端分工就叫做前后端分离,其实是前端所有用到的数据都是后端通过异步接口的方式提供的,前端只管页面的展示及效果. 前端和后端不分离的时候,前端的页面也是由后端控制渲染的,两者的耦合度非常高.在业务逻辑复杂的系统里,我们最怕维护前后端混杂在一起的代码,因为没有约束,M-V-C每一层都可能出现别的层的代码,日积月累,完全没有维护性可言.这个时候出现了前后端分离这种模式,虽然前后端分离没办法完全解决这种问题,但是可以大大缓解. 那该怎么做到前后端分离呢? 前端:

.NET Core WebApi 前后端开发分离后的配置和部署

转自博客:https://www.cnblogs.com/Vam8023/p/10670741.html 背景:现在越来越多的企业都采用了在开发上前后端分离,前后端开发上的分离有很多种,那么今天,我来分享一下项目中得的前后端分离. B/S Saas 项目:(这个项目可以理解成个人中心,当然不止这么点功能) 前端:node.js + vue 后端:.NET Core WebApi 前端安装 node.js 跟创建vue项目这些不是这篇文章的重点,重点在于项目完成后的部署. .NET Core We

【转】django 与 vue 的完美结合 实现前后端的分离开发之后在整合

https://blog.csdn.net/guan__ye/article/details/80451318 最近接到一个任务,就是用django后端,前段用vue,做一个普通的简单系统,我就是一搞后端的,听到vue也是比较震惊,之前压根没接触过vue. 看了vue的一些文档,还有一些项目,先说一下django与vue的完美结合吧! 首先是创建一个django项目 django-admin startproject mysite # 创建mysite项目 django-admin starta

【Liunx】前后端项目分离部署

一.部署前端代码 部署前端代码,就是一些静态文件,丢给nginx去解析前端node js + vue的部署 + nginx的部署 1.下载vue的代码 wget https://files.cnblogs.com/files/songzhixue/07-luffy_project_01.zip 2.编译vue的代码 编译vue的代码,生成dist静态文件夹,需要用到node js解释器环境 # 下载nodejs的源代码包 wget https://nodejs.org/download/rele