前后端要不要分离以及如何做

harrychinese harrychinese     2023-03-09     525

关键词:

前后端分离要不要搞?
这个我觉得按照康威定律办就好了, 前后端如果是两拨人, 不要多想一定要分离, 如果是一拨人, 确定前后端是否要分离需要算账 , 收益是它会强制我们按照服务的理念指导系统设计, 将来的微服务也就顺理成章, 代价就是架构复杂了, 开发和运维都有些成本.

下面假定我们确定前后端要分离, 就要考虑实现的方案/技术选型/常见问题处理.

=============================
前后端分离的几种实现思路
=============================
思路1: 前端 Nginx(vue+element UI+axios) 和 后端Tomcat(Spring Boot)
思路2: 前端 Nginx(vue+element UI+axios) 和 中间层(NodeJS) 和 后端Tomcat(Spring Boot)
思路3: 前端 Nginx(vue+element UI+axios) 和 中间层Tomcat(Spring Boot路由/Render)  和 后端Tomcat(Spring Boot)

简单分析:
思路1: html render 是由前端完成, 前端通过ajax方式完成数据请求, 主要问题有: ajax 需要写死后端服务地址, 想象一下, 如果UI需要访问10个后端服务, 就需要写死10个地址, 同时没法利用上后端的服务发现技术.  前后端未分离情况下不存在这些问题. 一个解决方法是, 引入API网管.

思路2: 这是淘宝前后端分离的实践, html render 由中间层 NodeJS 完成, 中间层同时完成数据转发和路由设计工作, 也就是承担了MVC中的Controller. ajax调用不需要写死, 可以在NodeJS层从服务发现中动态提供后端服务地址.

思路3: 和思路2差不多, 就是将NodeJS换成 SpringBoot 而已. 这个思路相比思路2的优点是, 不需要引入一个全新的NodeJS架构.

我个人推荐思路3, 优点是:
1. 在不引入API网管情况下, 能解决前端需要写死后端请求地址的问题.
2. 熟悉 SpringBoot 的技术人员比 NodeJS 要多得多.  

图片取自:淘宝前后分离实践
技术图片

 


=============================
前后端分离的技术选型
=============================
前端选型, vue+element UI+axios 目前看在国内比较流行.
https://segmentfault.com/a/1190000010167910
https://blog.csdn.net/lgcjava/article/details/75331074


=============================
前后端分离经常碰到的问题
=============================
前后端分离 -- 跨域访问的实现
https://blog.csdn.net/github_33809414/article/details/81774885
https://www.cnblogs.com/hbb0b0/p/8035241.html
https://segmentfault.com/a/1190000012960641


前后端分离 -- 使用axios做网络请求 -- 使用Cookie SESSIONID
https://blog.csdn.net/dodan/article/details/78543912

八个开源的springboot前后端分离项目,一定要收藏!

八个开源的SpringBoot前后端分离项目最近前后端分离已经在慢慢走进各公司的技术栈,不少公司都已经切换到这个技术栈上面了。即使贵司目前没有切换到这个技术栈上面,我们也非常建议大家学习一下前后端分离开发,以免在... 查看详情

七个开源的springboot前后端分离项目,一定要收藏!

前后端分离已经在慢慢走进各公司的技术栈,根据松哥了解到的消息,不少公司都已经切换到这个技术栈上面了。即使贵司目前没有切换到这个技术栈上面,松哥也非常建议大家学习一下前后端分离开发,以免在公司干了两三年... 查看详情

为什么要进行前后端分离?

一、认识前后端分离可能很多人会有误解,认为web应用的开发期进行了前后端开发工作的分工就是前后端分离。但其实前后端分离并不只是开发模式,而是web应用的一种架构模式。在开发阶段,前后端工程师约定好数据交互接口... 查看详情

asp.net怎么实现前后端分离asp.net如何实现前后端分离

参考技术A1、前后端分离,那后端就不应该修改前端项目文件,并且前后端交互都应通过ajax执行。所以,后端只需要提供api,前端在html调用api即可。2、要提供api的话,aspx也可以做,但因为page的中间件会造成性能的浪费,可以... 查看详情

前后端分离介绍(代码片段)

我们为什么要尝试前后端分离尝试与改变如果你没有尝试过前后端分离的工作流程,那么可以先试想一下这样的流程改变:把流程从 PM:“我要这个功能”后端:“这个先找前端做个模板”前端:“模板做完了”后端:“我... 查看详情

我们为什么要尝试前后端分离(代码片段)

这不是一篇纯技术文章,而是一篇分享我个人在前后端分离路上收获的点点滴滴的文章,以此来为准备尝试前后端分离或者想了解前后端分离的童鞋做一个大体的讲解。 尝试与改变如果你没有尝试过前后端分离的工作流程,... 查看详情

你是如何看待前后端分离的?

首先看看前后端分离是什么?  “前端”通常指的是,相对来说更接近用户的一端,例如:APP,网页、桌面程序等,在现实开发中大部分情况可以理解为“客户端”;  “后端”相对来说就更泛化了,可以理解为是为前端提... 查看详情

如何进行前后端分离

参考技术A在不使用vue,react,anglar这类的框架的情况下,前后端分离应该如何做?需求是这样:前端写html页面(非单页面应用),index.html首页about.html关于我们newslist.html新闻列表newsdetail.html新闻详情productlist.html产品列表productdetail.... 查看详情

前后端分离方案以及技术选型

参考技术A作者:关开发一.什么是前后端分离?理解前后端分离大概可以从3个方面理解:1.交互形式2.代码组织形式3.开发模式与流程1.1交互形式前后端不分离后端将数据和页面组装、渲染好了之后,向浏览器输出最终的html;浏... 查看详情

什么是前后端分离?为什么分离

参考技术A在不使用vue,react,anglar这类的框架的情况下,前后端分离应该如何做?需求是这样:前端写html页面(非单页面应用),index首页about关于我们newslist新闻列表newsdetail新闻详情productlist产品列表productdetail产品详情后台只提... 查看详情

node项目如何前后端分离提供接口给前端

node接口编写,vue-cli代理接口方法    通常前端使用的MocK数据的方法,去模拟假的数据,但是如果有nodeMongodb去写数据的话就不需要在去mock数据了,具体的方法如下。首先启动mongodb、node、以及前端项目。这里用加载商... 查看详情

前后端分离实践—如何解决跨域问题

随着前端越来越火,越来越多的人推崇前后端分离,后端只提供API,前端只负责消费API。这样我们就能更加专注自己的事情了,比如前端可以使用任何想要的工具(Webpack、Gulp等等),后端也不用因为集成前端的代码而苦逼加班... 查看详情

深入浅出:了解前后端分离优势以及前后端接口联调

目录:1.项目有前后端分离和前后端不分离;2.前后端接口联调;3.前端性能优化;一、项目有前后端分离和前后端不分离:  在前后端不分离架构中,所有的静态资源和业务代码统一部署在同一台服务器上。服务器接收到浏览... 查看详情

springboot+vue前后端分离学习路线

我整理了SpringBoot+vue前后端分离的学习路线。这篇博客是一个规划,之后,会按照这篇的顺序对每一个节点进行详细的知识汇总。其中包括资料,代码实践,以及我对此的理解。1.ssm框架的配置,以及应用,2.SpringBoot的介绍,如... 查看详情

前后端分离实践

前后端分离并不是什么新鲜事,到处都是前后端分离的实践。然而一些历史项目在从一体化Web设计转向前后端分离的架构时,仍然不可避免的会遇到各种各样的问题。由于层出不穷的问题,甚至会有团队质疑,一体化好好的,为... 查看详情

为什么要进行前后端分离

传统开发模式与前后端分离模式对比传统开发模式前后端分离方式对比以上两图我们可以看到,前后端分离方式流程简单多了。前后端分离概念简单来说就是后端提供API,前端调用API获取数据来渲染页面,当然这其中还有许多细... 查看详情

前后端分离构架特点

...也不需要了解后端采用的是什么样的技术实现方案,使得前后端的开发人员能够更加专注于自身业务的开发。以前的一体式Web架构示意现在的前后端分离构架示意图前后端分离后,会出现以前web一体式构架中没有出现过得问题,... 查看详情

前后端分离与不分离,一点点理解

1>为什么要前后端分离?现有开发模式的使用场景前后端职责不清开发效率的问题对前端发挥的局限2>前后端分离会带来什么变化?  1.彻底解放前端    制作页面的时候,不需要后台配置服务器环境,可以自己配置路由,前... 查看详情