什么是前后端分离##传统开发模式相信很多Web开发童鞋

为什么要前后端分离前后端分离,让软件开发的流程更加清晰,解决了开发阶段的痛点。前后端分离后,需要考虑哪些事情分离后的前端,不再是一个简单的HTML文件,已经是一个独立的应用系统。静态资源路径问题如果你的项目有上传资源功能,那自然就会产生用户资源,那前后端分离后,如何来处理这个问题呢?

[TOC]#什么是前后端分离##传统的开发模式相信很多做过Web开发的孩子应该都经历过这样的开发模式,使用后端提供的模板引擎编写HTML/XML页面的语言,如:* PHP开发有模板引擎* Java web项目有jsp页面* 每个web框架都有自己的模板引擎* 你们都有一个共同的特点,服务器端后台语言生成解析后的HTML/XML格式返回给客户端,例如浏览器端访问直接返回解析后的HTML,浏览器直接解释执行。在ASP、JSP、PHP等传统开发模型中,前端处于混乱状态,可以说完全没有独立的“个性”。前端负责裁剪图片和编写静态页面模板,后端将数据渲染到前端提供的页面模板中,最后将页面渲染到浏览器中进行展示。在这个过程中,前端只提供页面模板或者编写一些脚本,有的甚至是JS脚本由后端编写。前端的作用仅限于裁剪图片和样式模板文件。这个角色就是传说中的“剪小子”。前后端分离不仅仅是简单的代码分离,首先是架构的分离和解耦,逐步摆脱前后端的依赖架构上,前后端各司其职,分别部署在不同的服务器上,通过接口传输数据。

减轻后端服务器的压力,后端服务器不再负责页面渲染,只负责输入数据,吞吐量提升数倍。二是逻辑分离。没有分离的时候,业务代码的边界很不清晰,业务逻辑基本都放在后端。分离后前端还承担了一些不应该由后端编写的业务逻辑,数据处理更加清晰。 最后是系统分离。同一个后端系统可以为PC端、终端、终端等不同的前端终端提供相同的接口数据,无需为每个终端提供一套接口。同样,对于前端应用来说,调用多个后端服务器的接口来处理和展示多个系统之间的数据会更加方便。 # 为什么要前后端分离,让软件开发流程更清晰,解决开发阶段的痛点。以前前端不仅要学习后端的模板渲染语法,还要配置后端的开发环境,不断的同步后端的代码,非常痛苦前端。现在,前端有了自己的服务器,项目运行就不需要再依赖后端服务器了。如果处于开发阶段,还可以使用mock数据(接口数据结构必须先与后端确定),摆脱对后端接口的依赖。 ,大大提高了开发效率,系统分工也更加清晰。 # 前后端分离后,需要考虑什么?分离的前端不再是一个简单的 HTML 文件,而是一个独立的应用系统。除了考虑页面的数据渲染和展示外,前端架构、前后端交互、数据安全等方面也要有工程思想考虑。

##架构**前端应用部署在、、或组合服务器上,通过反向代理将页面请求转发到后端服务器,相当于在传统流程中增加了这一层**。当然,服务器也可以用来承担部分负载均衡工作,业务逻辑也可以在这一层处理。例如,通过判断请求是来自PC还是APP,将请求发送到不同的后端服务器。在 的架构中,层级如下: ![]() 让我们回顾一下软件开发过程中的几个关键环节:(1)产品经理提需求,绘制原型;(2)UI设计)工程师根据原型绘制设计图;(3)测试组根据产品原型编写测试用例,制定测试计划;(4)架构师根据原型编写API文档;(5)前后端工程师均以原型为基础)API文档完成业务开发;(6)测试、bug修复、发布。API文档链接直接相关前后端开发团队,也是整个软件开发过程中最耗时的环节![]( )##界面交互的前后端分离后,更多接口用于与后端进行数据交互。(如果你的项目还在使用静态API文档s,比如word文档,那么你一定会经历巨大的痛苦)REST是“ ()”的首字母缩写,一种API的架构风格,通过客户端和服务器之间的表示状态的转移来驱动应用程序状态的演进。

在 REST 样式的 Web 服务中,每个资源都有一个地址。资源本身就是方法调用的目标,所有资源的方法列表都是一样的。这些方法是标准方法,包括 HTTP GET、POST、PUT,可能还有 . API设计允许后端通过接口向前端传递数据,数据的格式通常是JSON等常见格式。对于前端来说,只要后端返回正确的数据,不管后端是Java还是PHP写的,都请依赖后端,让前端系统独立。 REST服务的调试:[]()和[]()##使用模板引擎分离前后端后,前端工程师需要将通过API获取的数据渲染到页面中,虽然是也可以给页面一个一个赋值,但是这样太低效了,或者可以在里面拼接HTML,但是这种方式对HTML代码的维护难度太大,也很难阅读。所以最好的方法是使用模板引擎。前端模板引擎和后端模板引擎很相似,比如JSP或者(),它们的语法很相似,实现的功能也几乎一样:绑定数据到HTML模板。并且两者都可以充当这样的模板引擎。

我们最终选择不选择它的原因只有一个,那就是它是真正的响应式,而且更改后需要手动调用更新UI,这完全无法忍受。为此,我们只能选择作为模板引擎。 ##工程建设不仅可以作为前端服务器,在开发阶段也可以发挥很大的作用。前端生态系统的发展围绕着它展开。使用 npm 管理项目依赖关系可以很好地维护和运行在环境中。打包工具、gulp等,都运行在上面,结合语法编译、打包、部署等插件,将应用输入成一个完整的应用。如果你使用Vue框架或Vue框架,或者你使用浏览器尚不兼容的ES6语法,在打包应用程序之前,你还需要将语法编译成浏览器可识别的ES5语法。 ##是单页Web应用程序(page web,SPA)的缩写,它是一个只有一个网页的应用程序,一个加载单个HTML页面并在用户与应用程序交互时动态更新页面的Web应用程序。 like,或者Vue是专为SPA设计的,结合前端路由库(-,vue-)和状态热存储(,vuex)等,可以开发出媲美APP的Web APP,用户体验得到很大提升.

当然,SPA并不完美,也不适合所有的web应用,需要根据项目和场景来选择。 SPA 有以下缺点: * 初始加载时间增加。您可以通过代码拆分和延迟加载来提高性能,并减少初始加载所需的时间。 *对 SEO 不友好,现在可以通过 **** 或 ** ** 部分解决。 * 页面前后端需要开发者自己写,但是现在一些路由库已经帮我们基本解决了。 * 对开发者的要求很高。由于SPA需要了解一整套技术栈,所以需要考虑后期是否有合适的人选进行维护。 ## mock(模拟数据)前后端分离框架中的API 要实现真正的前后端分离,必须使用API​​ mock(模拟数据)。使用mock数据有两个好处:1.前端开发者可以根据API文档生成mock数据,在后端开发者发布API之前就可以完成整个业务流程的开发; 2. 使用 Mock 数据可以通过直接修改 mock 数据来更便宜、更快速地调试页面样式和页面功能。 ### 全局模拟开关 为什么要设置这样一个全局模拟开关?主要基于以下两个考虑: 1. 设置全局mock开关后,不再需要为每个页面设置mock开关,更易于维护,也避免了由于统一开关状态带来的困难到项目中的多个模拟开关; 2.如果发布时忘记关闭mock开关,发布者一运行就会发现mock开关忘记关闭了,可以在重新发布前快速修复,从而避免意外更新官方服务器以模拟数据源。

由于上述两个考虑因素,我们的全局模拟开关可以帮助程序开发人员和发布者减少出错的可能性。 # 前后端分离解决请求问题后,只需要告诉我们Api URL,那么这会导致一个问题:Ajax跨域。这里我们不能使用通用的跨域解决方案,比如 等,因为我们还有 POST 请求。所以Http类工具很有用。比如我会添加中间件来判断每个请求。如果是/api前缀,则代理到API端,API端收到数据后返回数据,再返回给浏览器端。这样就解决了跨域请求的问题。生产环境中有两个部署。一种是放到后台项目中,这个没什么好说的。另一种是前后端分开部署。很好,如果你支持它。 # 静态资源路径问题如果你的项目有上传资源的功能,自然会生成用户资源。前后端分离后,如何处理这个问题?您必须先查看模式。资源与后台项目放在一起。后台处理完成后,需要返回一个相对路径到前台。如果资源是单独的服务器,则需要返回资源的绝对URL。

# web 项目最头疼的问题是无状态会导致 问题。传统的web项目都使用/,但是前后端是分开的,这显然在集群部署模式上有太多的缺陷。这种方式已经是目前Web端解决会话的主流,并且有很多开源好用的代管程序,基本可以使用。 #参考【实现前后端分离示例】()#其他【前端开发中缓存优化解析】() 前端性能优化中应用HTTP缓存三部曲【前端开发中,图片的优化技巧有哪些? ]()[缓存机制分析:移动端Web加载性能优化]()[web项目发布缓存客户端js css文件有哪些解决方案,如何更合理? ]()[前端工程精髓(一):静态资源版本更新与缓存]()%E5%BC%A0%E4%BA%91%E9%BE%99 调试部署监控文件自动更改和刷新 () 文件指纹、哈希值生成 FTP 发布部署 ZIP 项目打包

免责声明:本文来自网络用户投稿,不代表本站观点和立场。如有侵权请发送邮件至tzanseo@163.com告知本站删除,本站不负任何责任及承诺。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。

发表评论

登录后才能评论