动静分离 特点 分布式, 因为将前端和后端分开了, 不再由后端返回页面, 可以减少服务器的压力 前后端解耦, 可以独立开发, 前后端并行 静态归于Nginx发布 接口服务化, 统一只提供数据 数据特点 js/html/images/audios/videos 动态数据 得到的数据可能会和上一次不一样 实现方式 CDN 很多的大型网站都是采用了CDN加速的, 当然CDN是花钱的~ Nginx 如果前端的访问压力不是很大的话 因为静态资源的压力并不是很大, 一台Nginx完全扛得住, 只需要将接口服务部署为集群即可, 如果静态资源的压力在后续上升, 那么可以将静态资源抽离, 单独部署在一个Nginx集群中, 第一台Nginx只做路由转发即可 动静分离的问题
通过前后端分离,前端负责对应的交互业务,后端负责数据的处理。 5.使得代码的耦合度更高。 这里可以从一种软件设计模式来分析。 不管是前端还是后端,都可以针对不同的端,实现一些工程化的东西。 3.提高了处理复杂业务的能力。后端可以只专注后端业务,前端可以只专注于前端的业务。 三、前后端分离有哪些缺点 1.团队沟通成本。 前后端分离,后端的代码和前端的代码都需要单独部署。在开发中也需要针对开发需求部署不同的环境。 4.增加繁杂的配置。 前后端分离,需要设置跨域一系列的其他操作。 同时也会针对前后端的一些监控处理,都将会增加工作量。 四、前后端分离涉及到开发的哪些环节 所谓的前后端并不是单纯的指前端工程师负责的内容和后端工程师负责的内容之间可以独立进行。 总体归纳如下几点: 1.产品设计 2.设计 3.前端开发 4.后端开发 5.测试 6.部署 这几个环节,其实很多都可以并行运行。
本文主要以 vivo 商城项目的前后端分离经验,总结前后端分离思路,整理前后端分离方案,以及分离过程中遇到的问题及解决方案。 为此,我们在2019年开始进行商城项目的架构升级,进行前后端分离,前端技术升级,接口规范化,以便应对未来更多的业务挑战。 二、背景 架构升级,第一步面临的问题便是前后端分离,前后端不分离的痛点已经无需赘述,既影响开发效率,又影响开发体验,但商城仍然处于业务高速发展时期,不能因为技术重构而停下业务版本的迭代。 让我们带着这些问题来看看vivo商城是如何一步步实现前后端分离。 纯前端业务上线发布速度提升10+倍 释放研发人力,专业的人做专业的事,开发效率最高提升1倍 打好native化、多端渠道拓展基础 积累技术经验、赋能更多业务 五、总结 整个前后端分离过程漫长而曲折,在这个过程中我们面临的最大问题就是如何在人力成本
前后端分离 前后端分离就是将一个应用的前端代码和后端代码分开写,为什么要这样做? 如果不使用前后端分离的方式,会有哪些问题? 前端–》HTML静态页面–》后端—》JSP 这种开发方式效率极低,可以使用前后端分离的方式进行开发,就可以完美解决这一问题。 前端只需要独立编写客户端代码,后端也只需要独立编写服务端代码提供数据接口即可。 前端通过AJAX请求来访问后端的数据接口,将Model展示到View中即可。 单体—》前端应用+后端应用 前端应用:负责数据展示和用户交互 后端应用:负责提供数据处理接口。 前端HTML—》Ajax—》RESTFUL后端数据接口。 (例:Java开发、spring boot开发) 传统单体应用 前后端分离的结构 前后端分离就是将一个单体应用拆分成两个独立的应用,前端应用和后端应用以JSON格式进行数据交互。
前后端分离项目介绍 前后端分离的开发模式,前后端程序猿只需要提前约定好接口文档(参数、数据类型),然后并行开发即可,最后完成前后端集成,遇到问题同步修改即可,真正实现了前后端应用的解耦合,可以极大地提升开发效率 [image-20210516104605630] 1.微人事 1.1 项目介绍 微人事是一个前后端分离的人力资源管理系统,项目采用 SpringBoot+Vue 开发,项目加入常见的企业级应用所涉及 Vue 开发经验或者前后端分离开发的朋友,技术栈基于Spring Boot + Vue,带有超级详细开发文档和讲解视频。 image-20210516110803380.png) [image-20210516110723304] 5.3 项目地址 https://gitee.com/ShaoxiongDu/eladmin 6. 美人鱼 6.1项目介绍 NiceFish(美人鱼) 是一个系列项目,目标是示范前后端分离的开发模式:前端浏览器、移动端、Electron 环境中的各种开发模式;后端有两个版本:SpringBoot 版本和
前后端开发者只需要提前约定好接口文档(URL、参数、数据类型…),然后分别独立开发即可,在初期前端可以先造假数据进行测试(json),完全不需要依赖后端,后期完成前后端集成即可,实现了前后端应用的解耦合 总结:就是为了适应技术和业务发展的需求,前端开发需要从之前的前后端混合在一起的组织架构中分离出来,形成独立的前端部门和后端部门 实际应用中理解为:前后端分离就是将前端视图和后端数据进行分离,后端只需要提供接口 (后端数据)给前端,前端提供的独立的视图系统,并且前后端分离项目在进行项目部署的时候可以分开,不仅开发效率提高了,而且一定上减少了程序的耦合。 以前架构 前后端分离技术架构:
什么是前后端分离,要区分前端和后端,需要有个明确的界限。一般,用户可以直接看到的东西,都是属于前端的范畴,除了前端之外都属于后端了。 前后端分离,不只是简单的代码的分离。 首先是要架构上分离解耦,逐渐摆脱前后端在架构上的依赖,前后端各司其职,分开部署在不同的服务器上,通过RESTful接口传递数据。 其次是逻辑分离,不分离的时候,对于业务代码的界限很不明确,业务逻辑基本都放在后端,分离之后,前端也承担了一部分不该后端来写的业务逻辑,数据处理更加清晰。 同样,对于前端应用来说,可以更方便的调用多个后端服务器的接口,处理和展示多个系统间的数据。 为什么要前后端分离 前后端分离,让软件开发的流程更加清晰,解决了开发阶段的痛点。 前后端分离后,需要考虑哪些事情 分离后的前端,不再是一个简单的HTML文件,已经是一个独立的应用系统。除了要考虑页面的数据渲染展示,还要用工程化的思想来考虑前端的架构,前后端的交互和数据安全等事情。
前后端分离项目介绍 前后端分离的开发模式,前后端程序猿只需要提前约定好接口文档(参数、数据类型),然后并行开发即可,最后完成前后端集成,遇到问题同步修改即可,真正实现了前后端应用的解耦合,可以极大地提升开发效率 1.微人事 1.1 项目介绍 微人事是一个前后端分离的人力资源管理系统,项目采用 SpringBoot+Vue 开发,项目加入常见的企业级应用所涉及 到的技术点,例如 Redis、RabbitMQ 等 ### 1.3 项目地址 https://github.com/shaoxiongdu/vhr 2.个人博客 2.1 项目介绍 这个前后端分离的博客项目项目适合没有 Vue 开发经验或者前后端分离开发的朋友 5.3 项目地址 https://gitee.com/ShaoxiongDu/eladmin 6.美人鱼 6.1项目介绍 NiceFish(美人鱼) 是一个系列项目,目标是示范前后端分离的开发模式 :前端浏览器、移动端、Electron 环境中的各种开发模式;后端有两个版本:SpringBoot 版本和 SpringCloud 版本。
3、半分离时代 前后端半分离,前端负责开发页面,通过接口(Ajax)获取数据,采用 Dom 操作对页面进行数据绑定,最终是由前端把页面渲染出来。 4、分离时代 大家一致认同的前后端分离的例子就是 SPA(Single-page application),所有用到的展现数据都是后端通过异步接口(AJAX/JSONP)的方式提供的,前端只管展现。 SPA 式的前后端分离,从物理层做区分(认为只要是客户端的就是前端,服务器端就是后端)这种分法已经无法满足前后端分离的需求,我们认为从职责上划分才能满足目前的使用场景: 前端负责 view 和 controller 最重要的一点是,前端不用再学一门其他的语言了,对前端来说,上手度大大提高。 前后端分离时代 可以就把 Nodejs 当成跟前端交互的 api。 举个例子,即使做了页面静态化之后,前端依然还是有不少需要实时从后端获取的信息,这些信息都在不同的业务系统中,所以需要前端发送5、6个异步请求来。
前后端分离的开发模式,前后端程序猿只需要提前约定好接口文档(参数、数据类型),然后并行开发即可,最后完成前后端集成,遇到问题同步修改即可,真正实现了前后端应用的... 前后端分离项目介绍 前后端分离的开发模式,前后端程序猿只需要提前约定好接口文档(参数、数据类型),然后并行开发即可,最后完成前后端集成,遇到问题同步修改即可,真正实现了前后端应用的解耦合,可以极大地提升开发效率 个人博客 2.1 项目介绍 这个前后端分离的博客项目项目适合没有 Vue 开发经验或者前后端分离开发的朋友,技术栈基于 Spring Boot + Vue,带有超级详细开发文档和讲解视频。 5.2 项目截图 5.3 项目地址 https://gitee.com/ShaoxiongDu/eladmin 6. 美人鱼 6.1 项目介绍 NiceFish(美人鱼) 是一个系列项目,目标是示范前后端分离的开发模式:前端浏览器、移动端、Electron 环境中的各种开发模式;后端有两个版本:SpringBoot 版本和
1.背景 1.1背景介绍 前后端分离的架构中,前后端同学约定好接口后就可以并行开发,最后双方再进行接口的联调。 1.2联调的痛点 “等接口” 前端和后端开发的进度不一致,例如前端同学已经按照交互完成了页面的开发,但是后端同学此时还不能及时提供出接口,此时前端同学会陷入“等接口”的境地。 Code: 100, Data: null, Message: "xxx接口发生错误" } } } 优点: 前后端分离 这里重点介绍RAP2和Easy Mock,其他常见前端接口模拟工具的特性也会在后面列出。 3.RAP2 前后端分离开发,Mock.js可以解决前端依赖后端提供接口后,才能请求数据的限制。 了解更多:https://app.apiary.io/ 6.小结 在前后端分离的架构中,为了让前端同学在前后端联调时摆脱“等接口-改接口-调接口”的尴尬境地,减少双方的沟通成本、时间成本,提高项目整体开发效率
原文链接:https://mp.weixin.qq.com/s/5SwQMIJ6Amv4m_8cIOaw3Q 前后端分离 回顾一下自己学JavaWeb的历程: 这里压根就不需要JSP了(纯HTML+AJAX),这算是前后端分离的一种了 在开发上体验:如果完全使用HTML+AJAX的话,会发现其实需要写非常非常多的JavaScript代码,而且这些JavaScript …流下不学无术的泪水 目前我了解到的前后端分离,首先部署是分离的(至少不会跟Java绑定在一起部署): ? 前端和Java部署机器分离 Java接口只返回JSON数据: ? 如果请求是调用后端服务,则经过Nginx转发到后端服务器,完成响应后经Nginx返回到浏览器。 参考: https://mp.weixin.qq.com/s/5SwQMIJ6Amv4m_8cIOaw3Q
来源 | https://www.cnblogs.com/milo-wjh/p/6424246.html 前后端分重构完成,再书写交互时遇到后台接口尚未完成,无法得到接口返回的测试数据,但是我们又需要一些数据来测试我们的前端功能的时候 但是这样一点也不符合咱们早完事早收工的工作理念,所以呢,今天学习的关于前端模拟AJAX的三种办法,用于应对以上情况,加快开发效率; 解决办法: 1、mockjax.js和mockjsON.js 2、mock.js 来快速创建批量的数据 使用mockJSON创建批量数据的书写方式: responseText: $.mockJSON.generateFromTemplate({ "user|3-6" : [{ 随机3-6个 "id|+1": 1, +1递增 "name": "@MALE_FIRST_NAME", 随机姓名 angularjs,有完善的API文档和维护,适用性强 用法:简单是试用了jquery下的使用,跟方法一的用法类似,其他环境下没使用过也不好说啥,具体使用方法和介绍可以查看官网或则《使用Mock.js进行独立于后端的前端开发
本教程总共6篇,每日更新一篇,请关注我们!你可以进入历史消息查看以往文章,也敬请期待我们的新文章! --2018.01.15 4、React项目配置4(如何在开发时跨域获取api请求)---2018.01.16 5、React项目配置5(引入MockJs,实现假接口开发)---2018.01.17 6、 React项目配置6(前后端分离如何控制用户权限)---2018.01.18 7、React项目配置6(ES7的Async/Await的使用)---2018.01.19(新增) 开发环境:Windows 因为前端是不能控制用户权限的,即便你做了,也可以修改!这块主要是后端来做! 但是好多童鞋问,估计是因为没有想通! 传统的控制权限,都是经过后台过滤,然后生成html到前端的! 而现在的前端开发,在前后端分离情况下,如何控制权限? 也是通过后台来控制! 说白了,前端就是负责渲染用户界面! 我说下我们的做法,可能不是最好的!
什么是前后端分离前端单独进行部署后端也是单独进行部署两个系统之间使用 JSON 进行传输建立前端工程前端是基于 Vue 来进行开发的,所以我本次使用的 UI 为 vue-element-amdin 进行二次开发 , 不过使用的是 template 模板 admin 那套内容太多了,所以在这里我将一步一步的来完善该系统前端使用的开发工具为 WebStorm 可以和我一样也可以不一样,本次编写博主使用的为 WebStormUI https://registry.npm.taobao.org配置运行脚本如下图,就不用每次运行都在终端当中自己打对应的运行脚本了如上如果都配置好了,那么就直接点击启动的按钮启动工程,最终得到的效果图如下前端开发步骤路径对应路由 , 路由当中会对应我们的页面添加路由引入路由的页面进入到组件当中, 编写页面, 加载对应的 js, 发送网络请求发送网络请求在 api 当中创建对应的 js 文件, 定义接口地址参数前端界面修改添加 Logo height: 60px; margin-right: 10px; vertical-align: top;}margin-bottom: 20px;修改 favicon.ico修改 Title前端请求流程替换前端请求服务器地址编写服务器登录请求接口
最早从Web2.0 Ajax技术开始兴起,就有提前后端分离了。从Gmail的单页应用,到现在的单页应用层出不穷。浏览器渲染引擎也一直在突破,越来越多的交互、计算放在了浏览器这一层。 为什么要做前后端分离 当前项目从立项到2018年,已经有10余年的历史了。前端的技术栈是jQuery。后台是基于10年前的PHP框架,中间也经历过多次重构。 2)团队成员本身具有全栈开发的能力,转换成前后端分离的模式成本较低。 从业务本身来看:产品天生适合采用单页应用,无需SEO。 前端方案选型 基于上述原因,促成团队下定决心进行正式的改造。 前后端分离对后端而言,最大的改造点,在于接入层的处理,即数据的输入输出方式。对接口而言,性能对前后端分离的体验至关重要,也是我们重点考虑的问题,我们加入了HTTP协议层的缓存。 最后基于前后端分离流程的完善,我们使用Apidoc作为接口文档的管理工具。 后续的工作 前端 开发规范:Js代码规范、CSS规范、组件规范,自动检测工具支撑。 代码结构:文件结构划分。
一 传统的开发模式 前后端分离前我们的开发协作模式一般是这样的: image.png 前端写好静态的HTML页面交付给后端开发。静态页面可以本地开发,也无需考虑业务逻辑只需要实现View即可。 这种模式的问题 在前端调试的时候要安装完整的一套后端开发工具,要把后端程序完全启动起来。遇到问题需要后端开发来帮忙调试。我们发现前后端严重耦合,还要要求后端人员会一些HTML,JS等前端语言。 二 前后端分离的开发模式 前后端分离并不只是开发模式,而是web应用的一种架构模式。 在开发阶段,前后端工程师约定好数据交互接口,实现并行开发和测试;在运行阶段前后端分离模式需要对web应用进行分离部署,前后端之前使用HTTP或者其他协议进行交互请求。 1. 前后端代码库分离,前端代码中有可以进行Mock测试(通过构造虚拟测试对 象以简化测试环境的方法)的伪后端,能支持前端的独立开发和测试。
通过这样的架构改造,前后端实际就已经分离开了。抛开其它类型的前端不提,这里只讨论 Web 前端和后端。 前后技术分离 前端可以不用了解后端技术,也不关心后端具体用什么技术来实现,只需要会 HTML/CSS/JavaScript 就能入手;而后端只需要关心后端开发技术,除了省去学习前端技术的麻烦,连 Web 毕竟后端思维和前端思维还是有所不同——前端思维倾向于用户体验,而后端思维则更倾向于业务的技术实现。 除此之外,前后分离在安全性上的要求也略有不同。 前后分离的测试 前后分离之后,前端的测试将以用户体验测试和集成测试为主,而后端则主要是进行单元测试和 Web API 接口测试。 不管是否前后端分离,Web 开发中都有一个共识:永远不要相信前端!既然后端必须保证数据的安全性和有效性,那么前端省略这一步骤并不会对后端造成什么实质性的威胁,最多只是用户体验差一点。
关于验证码部分,在我这篇文章里说的挺详细的了:Python高级应用(3)—— 为你的项目添加验证码 这里还是再给一个前后端分离的实例,因为极验官网给的是用session作为验证的,而我们做前后端分离的用的是 在启动项目之前,需要设置一个中间件,不然会有跨域请求问题,有跨域请求解决问题,请移步:前后端分离djangorestframework——解决跨域请求 这里就不多介绍了 在utils目录下创建一个中间件 import json pc_geetest_id = "b46d1900d0a894591916ea94ea91bd2c" pc_geetest_key = "36fc3fe98530eea08dfc6ce76e3d24c4 redis自行配置 view部分: 注意这里有个小坑: 极验官方给的例子里用的是request.POST,而我们用了djangorestframework之后,前端传来的数据已经不再是用request.GET pc_geetest_id = "b46d1900d0a894591916ea94ea91bd2c" pc_geetest_key = "36fc3fe98530eea08dfc6ce76e3d24c4
前段时间我针对手头上的项目前端配置进行了反思以及总结并且写了两篇文章:webpack传统后端渲染的项目前端配置,webpack配置之前后端不分离, 很显然这些配置能满足一时的需求, 但是也有不足. 毕竟配置工程师(逃 静态资源管理 传统后端主导的项目中对静态资源很少处理, 毕竟后端主要还是处理业务逻辑, 但是这样一来前端的命门就被后端抓在手里而且还不受重视, 这就导致这么一个情况: 前端写好静态页面和 甚至极端情况下html文件也应该是前端的事情, 所以spa(单页应用)诞生了: 后端不再直接参与前端逻辑和静态资源的处理, 这样当然有好处: 前后端算是完全分离了, 页面由前端渲染, 但是弊处也相当明显 再者前端无法控制后端的接口质量, 导致分工倒是分了, 但是项目进度反而是慢了, 老项目也不可能进行完全的分离, 我认为操作性很强的web应用(注意是应用)完全可以直接spa, 好处也毋庸置疑. 总结 上面不涉及具体代码以及配置, 但是思路在那里, 不管后端是什么, 我们前端可以都写的很爽, 同样, 前后端分离不是说什么都是给前端干, 完全可以协调工作量.