以Java Web项目为例浅谈前后端分离开发模式

目录
  • 为什么要前后端分离？
  • 什么是前后端分离？
  • 前后端分离的优缺点？
  • 对于你们的团队和产品有没有必要前后端分离？

为什么要前后端分离？

以Java Web项目为例，在传统的开发模式中，前端代码（Html、js、css）写在JSP中，甚至JSP中嵌入Java代码。当用户访问网站时，页面数据也就是Html文档，由Servlet容器将jsp编译成Servlet，然后将jsp中的html，css，js代码输出到浏览器，这个过程需要经过很多步骤，才能响应用户的请求。这个过程非常繁琐，效率低下，直接造成了页面响应速度慢的效果。从项目维护的角度上，传统的开发模式，前端代码和后端代码耦合在一起，导致代码混乱不堪，极大的降低了项目的可维护性，增加了维护成本。从开发角度来看，研发人员在开发过程中，不仅要设计后端架构还要兼顾前端展示，导致开发效率低下，延长开发周期。扬长避短，为什么不让专业的人去做专业的事？

传统的开发模式下的系统数据交互图：

传统开发模式的劣势和不足：

  • 开发出的软件响应速度慢，质量差，用户体现差。
  • 前后端严重耦合，代码混乱，可维护性差。
  • 研发人员前后端兼顾，开发效率低下，研发周期变长。

为了解决传统开发模式中的这些病痛，前后端分离框架应用而生。

什么是前后端分离？

在前后端分离的开发模式中，后端仅返回前端所需的数据，前端负责渲染HTML页面，后端不再控制前端的效果，用户看到什么样的效果，从后端请求的数据如何加载到前端中，都由前端自己决定，后端仅仅需要提供一套逻辑对外提供数据即可，并且前端与后端的耦合度相对较低，在这种模式中，我们通常将后端开发的每个视图都成为一个接口，或者API，前端通过访问接口来对数据进行增删改查。总结一句话，后台负责提供数据，前端负责数据展示，职责分离，分工明确。

对应的数据交互如下图：

前后端分离的优缺点？

为优质产品打造精益团队：

术业有专攻，通过前后端分离，让前后端工程师只需要专注于前端或者后端的开发工作，有利于编写出高质量的代码，培养开发工程师独特的技术特性，然后构建出一个全栈式的精益开发团队。

提高工作效率，分工更加明确：

前后端分离的工作流程可以使得前端专心前端，后端关心后端，两者开发同时进行，提高开发效率，页面的增加和路由的修改也不必再去麻烦后端，开发更加灵活。

降低服务器负载，系统性能提升：

通过前端路由的配置，我们可以实现页面的按需加载，无需一开始加载首页便加载网站的所有资源，服务器也不再需要解析前端页面，在页面交互及用户体验上有所提升。

增强代码的可维护性

前后端分离后，应用的代码不再是前后端混合，只有在运行期才会调用依赖关系，并且分层明确，应用代码变得整洁清晰。

对于你们的团队和产品有没有必要前后端分离？

要回答这个问题，需要从团队人员分配、人力资源和研发技能储备这三个方面出发，进行探讨决定。 如果团队人员比较少、人力资源不足，项目不大我觉得没必要前后端分离。

到此这篇关于以Java Web项目为例浅谈前后端分离开发模式的文章就介绍到这了,更多相关Java前后端分离开发模式内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • java web SpringMVC后端传json数据到前端页面实例代码

    下面的后台的代码:目的的查询数据库中的所有省的列表,然后转化为json传到前端页面 @Controller public class DistrictController { @Resource private ProvinceService provinceServiceImp; @Resource private CityService cityServiceImp; @Resource private TourSpotService tourSpotServiceImp; /** * 获取

  • 以Java Web项目为例浅谈前后端分离开发模式

    以Java Web项目为例浅谈前后端分离开发模式

    目录 为什么要前后端分离? 什么是前后端分离? 前后端分离的优缺点? 对于你们的团队和产品有没有必要前后端分离? 为什么要前后端分离? 以Java Web项目为例,在传统的开发模式中,前端代码(Html.js.css)写在JSP中,甚至JSP中嵌入Java代码.当用户访问网站时,页面数据也就是Html文档,由Servlet容器将jsp编译成Servlet,然后将jsp中的html,css,js代码输出到浏览器,这个过程需要经过很多步骤,才能响应用户的请求.这个过程非常繁琐,效率低下,直接造成了页

  • 详解从NodeJS搭建中间层再谈前后端分离

    之前在知道创宇的项目中有用到过nodejs作中间层,当时还不太理解其背后真正的原因:后来在和一位学长交谈的过程中,也了解到蚂蚁金服也在使用类似的方法,使用nodejs作为中间层去请求真实后台的数据:之后人到北京,也见到现在的公司也在往nodejs后端方向靠拢.随着知识的增加,加之自己查阅资料,慢慢总结出了一些原理. 为什么要前后端分离 1.开发效率高 前端开发人员不用苦苦地配置各种后端环境,安装各种莫名的插件,摆脱对后端开发环境的依赖,一门心思写前端代码就好,后端开发人员也不用时不时的跑去帮着前

  • 一个Java程序猿眼中的前后端分离以及Vue.js入门(推荐)

    一个Java程序猿眼中的前后端分离以及Vue.js入门(推荐)

    松哥的书里边,其实有涉及到 Vue,但是并没有详细说过,原因很简单,Vue 的资料都是中文的,把 Vue.js 官网的资料从头到尾浏览一遍该懂的基本就懂了,个人感觉这个是最好的 Vue.js 学习资料 ,因此在我的书里边就没有多说.但是最近总结小伙伴遇到的问题,感觉很多人对前后端分离开发还是两眼一抹黑,所以今天松哥想和大家聊一下前后端分离以及 Vue.js 的一点事,算是一个简单的入门科普吧. 前后端不分 后端模板:Jsp.FreeMarker.Velocity 前端模板:Thymeleaf 前

  • Spring Boot和Vue前后端分离项目架构的全过程

    Spring Boot和Vue前后端分离项目架构的全过程

    目录 Spring Boot+Vue 前后端分离项目架构 1. SpringBoot 后端项目 2. Vue 前端项目 总结 Spring Boot+Vue 前后端分离项目架构 项目流程: 1. SpringBoot 后端项目 1.新建一个 SpringBoot 工程,并添加项目开发过程中需要的相关依赖: 2.数据库新建 book 数据表: -- ---------------------------- -- Table structure for book -- ---------------

  • Java axios与spring前后端分离传参规范总结

    目录 前言 一.@RequestParam注解对应的axios传参方法 1.1.params传参(推荐) 1.2.FormData传参 1.3.qs.stringfy传参 二.@RequestBody的axios传参方法 前言 前后端分离开发的场景下,开发人员的工作内容更加专注与专业,但是也产生了一些额外的沟通成本.比如:本文中为大家说明的前后端参数传递与接受方法.本文主要是面对前端使用axios,后端使用Spring进行参数接受的情况进行说明.在使用spring的时候,与前端配合开发,容易出现

  • vue项目使用node连接数据库的方法(前后端分离)

    目录 写在前面 编写顺序 开始 2.制作后端 node 服务器 3.编写 node 连接数据库 4.实现登录.修改密码和获取用户信息接口 5.完成前后端交互 结束 学习关键语句:vue连接mysql数据库vue项目连接后台数据库配置vue通过node连接MySQL数据库 写在前面 为了快速学习nodejs制作后端并和数据库进行交互的方法,所以赶紧写一篇这样的文章出来,如果你对这篇文章中提到的内容有所疑惑,请飞快的将你的疑惑输入到下方评论区中!另外一个真实原因是我在做这个练习时很难找到完整的教学性

  • 关于idea中Java Web项目的访问路径问题

    关于idea中Java Web项目的访问路径问题

    说明 这里只以 servlet 为例,没有涉及到框架,但其实路径的基本原理和框架的关系不大,所以学了框架的同学如果对路径有疑惑的也可以阅读此文 项目结构 在 idea 中新建一个 Java Web 项目,项目的初始结构如下 ( 不同版本的 idea 可能略有区别 ) : 默认访问路径 当我们将项目的基本配置设置好后,启动 Tomcat,会发现直接出现的是 index.jsp 页面,此时浏览器的地址栏显示的是:localhost:8080,也就是说项目默认跳转到了 index.jsp 页面,而且打

  • 详解CentOS安装tomcat并且部署Java Web项目

    详解CentOS安装tomcat并且部署Java Web项目

    1.准备工作 a.下载tomcat linux的包,地址:http://tomcat.apache.org/download-80.cgi,我们下载的版本是8.0,下载方式如图: b.因为tomcat的安装依赖于Java jdk,所以我们需要在判断linux系统下面是否安装jdk b.1 使用(Xshell)连接到Linux系统下面 b.2 输入命令:java -version,如果显示jdk版本号,则证明已经安装,如果不显示,则证明没有安装,如果没有安装,请参考下面地址进行安装:http://

  • Java Web项目中使用Socket通信多线程、长连接的方法

    很多时候在javaweb项目中我们需要用到Socket通信来实现功能,在web中使用Socket我们需要建立一个监听程序,在程序启动时,启动socket监听.我们的应用场景是在java项目中,需要外接如一个硬件设备,通过tcp通信,获取设备传上来的数据,并对数据做回应. 先看一下web的监听代码: import javax.servlet.ServletContextEvent; import javax.servlet.ServletContextListener; public class

  • linux下用renameTo方法修改java web项目中文件夹名称的实例

    经测试,在Linux环境中安装tomcat,然后启动其中的项目,在项目中使用java.io.File.renameTo(File dest)方法可行. 之前在本地运行代码可以修改,然后传到Linux服务器上一直无法实现功能,自己一直在捣鼓,以为是window环境和Linux环境不同的原因导致,后面发现在项目中使用renameTo方法修改文件夹名称不行是因为之前改了java web项目中的js,在js中传入值到后台,后台根据值来修改文件夹名称.由于没清除缓存导致js中的代码没有刷新,所以一直出现错

随机推荐