5_前后端分离

89564f 89564f     2023-03-16     256

关键词:

前后端分离属于软件架构的一种。其核心思想是把前端项目(Node.js实现的)和后端项目独立部署到不同的服务器上,前端项目在通过Ajax请求服务器端项目Restful接口实现数据交互。

使用前后端分离架构的项目在项目组中往往配备前端工程师和后端工程师。后端工程师就是我们,对于我们我们来说,不需要在项目中编写页面了,写到控制器返回数据即可,最后把项目部署到服务器上。而前端项目中主要是一些HTML、JavaScript、图片等资源,如果希望能够独立运行就需要借助基于Node.js的一些前端框架。


1交互形式

在前后端分离架构中,后端只需要负责按照约定的数据格式向前端提供可调用的API服务即可。前后端之间通过HTTP请求进行交互,前端获取到数据后,进行页面的组装和渲染,最终返回给浏览器。

 

2代码组织形式

在传统架构模式中,前后端代码存放于同一个代码库中,甚至是同一工程目录下。页面中还夹杂着后端代码。前后端工程师进行开发时,都必须把整个项目导入到开发工具中。而前后端分离模式在代码组织形式上有以下两种:

半分离
前后端共用一个代码库,但是代码分别存放在两个工程中。后端不关心或很少关心前端元素的输出情况,前端不能独立进行开发和测试,项目中缺乏前后端 交互的测试用例。

分离
前后端代码库分离,前端代码中有可以进行Mock测试(通过构造虚拟测试对 象以简化测试环境的方法)的伪后端,能支持前端的独立开发和测试。而后端代码中除了功能实现外,还有着详细的测试用例,以保证API的可用性,降低 集成风险

 

3数据接口规范流程

在开发期间前后端共同商定好数据接口的交互形式和数据格式。然后实现前后端的并行开发,其中前端工程师再开发完成之后可以独自进行mock测试,而后端也可以使用接口测试平台进行接口自测,然后前后端一起进行功能联调并校验格式,最终进行自动化测试。

 

 

前后端分离常用框架

 

对于前端工程师来说常用的就是Vue.js和React.js和angularJS。他们是前端工程师常用的三大框架。

Vue.js 小巧,灵活,功能却很强大。在市场上占有率更高,属于成熟稳定的框架。在课程中讲解此框架,后面的项目的前端页面也是基于Vue实现

React相比Vue.js更新一些,近几年有追赶Vue.js的架势。更适合做移动项目。

AngularJS相比Vue更加大量一些。只有在一些大型项目中才可能被使用。

 

Vue是一个渐进式的JavaScript框架与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,与现代化的工具以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。

 

前后端分离有什么好处

1前后端明确的工作职责

通过将开发团队前后端分离化,让前后端工程师只需要专注于前端或后端的开发工作,使得前后端工程师实现自治,培养其独特的技术特性,然后构建出一个全栈式的精益开发团队。

2提升开发效率

前后端分离以后,可以实现前后端代码的解耦,只要前后端沟通约定好应用所需接口以及接口参数,便可以开始并行开发,无需等待对方的开发工作结束。与此同时,即使需求发生变更,只要接口与数据格式不变,后端开发人员就不需要修改代码,只要前端进行变动即可。如此一来整个应用的开发效率必然会有质的提升。

3完美应对复杂多变的前端需求

如果开发团队能完成前后端分离的转型,打造优秀的前后端团队,开发独立化,让开发人员做到专注专精,开发能力必然会有所提升,能够完美应对各种复杂多变的前端需求。

4增强代码可维护性

前后端分离后,应用的代码不再是前后端混合,只有在运行期才会有调用依赖关系。

 

[刘阳java]_为什么要前后端分离

前后端分离已成为互联网项目开发的业界标准使用方式,通过nginx+tomcat的方式(也可以中间加一个nodejs)有效的进行解耦,并且前后端分离会为以后的大型分布式架构、弹性计算架构、微服务架构、多端化服务(多种客户端,例... 查看详情

前后端分离的方法

网站前后端分离的方法  如何进行前后端分离:http://blog.csdn.net/github_26672553/article/details/51864112 https://segmentfault.com/q/1010000004494530解释了前后端的分离方法http://www.csdn.net/article/2015-10-25/2826033& 查看详情

django前后端不分离代码结构详解

Demo: hello_pycharm根目录文件:hello_pycharm[__init__.py __pycache__ settings.py  urls.py  wsgi.py]App:hello[admin.py  apps.py __init__.py migrations&n 查看详情

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

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

前后端分离式开发02(代码片段)

文章目录4前后端练习-商品分类4.1需求4.2数据库设计4.3前端开发4.3.1修改index.js4.4后端开发4.4.1项目结构4.4.2创建POJO层4.4.3创建Dao层4.4.4创建Service层4.4.5创建Controller层4.4.6测试4.5????优化Service层5前后端练习-商品列表5.1需求5.2数据库... 查看详情

springboot_实现基本增删改查(前后端分离版)(代码片段)

目录自学自编实现一个简单的增删改查(前后端分离版本)与大家一起分享,一起交流和学习!(1)程序入口(2)建立数据库文件(3)建立User实体类(4)建立UserMapper接口(5&#x... 查看详情

由react引发的前后端分离架构的思考

...主分享我们在大规模企业应用建设过程中遇到的问题,对前后端分离架构的思考,前后端分离的技术方案,前后端分离过程中的实践经验,前后端分离带来的效果与价值,以及目前存在的问题与未来可能的尝试。应用的现状我们... 查看详情

大前端前后端分离带来的好处

大前端前后端分离带来的好处:1.前后端分离开发,相互之间的影响很小2.使用webpack,模块化打包前端代码3.在开发时,可以做到代码热替换,可以使用babel,可以使用css预处理器等等4.打包时,打包代码的同时还可以做到按需加... 查看详情

推荐9个yyds前后端分离项目

参考技术A前后端分离是现在主流的架构设计模式,它初衷是用「单一职责」原则把代码质量提上去从而达到节省人力和减少沟通时的信息损失的目的。本文推荐九个前后端分离的开源项目,都是采用最流行的技术栈。本文推荐... 查看详情

浅谈前后端分离开发模式

https://blog.csdn.net/gybshen/article/details/91594272?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-3.edu_weight&depth_1-utm_source=distribute.pc_relevant.none- 查看详情

springboot+springsecurity+jwt实现前后端分离登录认证及权限控制(代码片段)

借鉴文章:Springboot+SpringSecurity实现前后端分离登录认证及权限控制_I_am_Rick_Hu的博客-CSDN博客_springsecurity前后端分离登录认证最近一段时间,公司给我安排了一个公司子系统的后台管理系统,让我实现权限管理。此... 查看详情

springboot+vue+shiro实现前后端分离权限控制

...Controller层还必须返回Freemarker模版的ModelAndView,逐渐有了前后端分离的想法,由于之前,没有接触过,主要参考的还是网上的一些博客教程等,初步 查看详情

前后端分离实践

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

前后端混合开发模式和前后端分离开发模式

前后端混合开发模式和前后端分离开发模式一、前后端混合开发模式二、前后端分离开发模式 查看详情

前后端分离式开发01(代码片段)

文章目录1前后端练习-模拟用户登录1.1需求1.2数据库表设计1.3后端项目结构1.4后端开发1.4.1修改pom.xml1.4.2创建VO-SysResult类1.4.3创建启动类1.4.4创建核心配置文件application.yml1.4.5创建pojo1.4.6创建Controller层1.4.7创建Service层1.4.8创建Dao层1.... 查看详情

前后端分离浅析

什么是前后端分离?前后端为什么要分离?前后端怎么样分离的?前后端分离给我们前端技术人员的开发带来什么样的好处?下面我就带着这些问题,来简单谈谈我了解到的前后端分离情况。 在讲前后端分离之前,让我们先... 查看详情

前后端分离项目启动参考

1.安装nodejs:http://nodejs.cn/download/,下载msi版本,安装后命令行node-v,查看是否安装成功2.切换到项目根目录3.在项目根目录执行:npminstall-gcnpm--registry=https://registry.npm.taobao.org,切换模块下载镜像地址4.项目根目录执行cnpminstall,下载... 查看详情

django前后端分离跨域请求问题(代码片段)

一、问题背景  之前使用django+vue进行前后端分离碰到跨域请求问题,跨域(域名或者端口不同)请求问题的本质是由于浏览器的同源策略导致的,当请求的响应不是处于同一个域名和端口下,浏览器不会接受响应,同源策略... 查看详情