欢迎来到石家庄网站建设官方网站!
打开客服菜单
石家庄网站建设
石家庄网站建设 > 建站知识 > 做网站-前后端分离思路
做网站-前后端分离思路
时间 : 2019-01-31 08:32 浏览量 : 16

什么是前后端分离

传统开发模式

相信很多做过Web开发童鞋应该都会经历这样一种开发模式,利用后端语言提供的模版引擎编写HTML/XML页面,比如:

  • PHP 开发有 Smarty模板引擎

  • Java web工程有jsp页面

  • Python 各个Web框架都有各自的模板引擎

  • NodeJS 的express你懂得

都有一个共同的特点,服务器端后台语言生成解析后的HTML/XML格式返回给客户端,例如浏览器端访问直接返回解析好的HTML,浏览器直接就解释执行。

在传统的像ASP,JSP和PHP等开发模式中,前端是处在一个混沌的状态中,可以说是没有独立的“人格”可言。

前端负责切图和编写静态页面模板,后端将数据渲染到前端提供的页面模板中,最后将页面渲染到浏览器展示。

这个过程中,前端只提供页面模板或者写一些JavaScript脚本,有的甚至JS脚本都是后端来写,前端的作用只局限于切图和样式模板文件,这种角色就是传说中的“切图仔”。

前后端分离,不只是简单的代码的分离。

首先是要架构上分离解耦,逐渐摆脱前后端在架构上的依赖,前后端各司其职,分开部署在不同的服务器上,通过RESTful接口传递数据。减轻后端服务器的压力,后端服务器不再负责页面渲染,只负责输入数据,吞吐量提升了好几倍。

其次是逻辑分离,不分离的时候,对于业务代码的界限很不明确,业务逻辑基本都放在后端,分离之后,前端也承担了一部分不该后端来写的业务逻辑,数据处理更加清晰。

最后是系统分离,同一个后端系统,可以将同样的接口数据提供给PC端、Mobile端和Native端等不同的前端终端,不需要为每一种终端提供一套接口。同样,对于前端应用来说,可以更方便的调用多个后端服务器的接口,处理和展示多个系统间的数据。

为什么要前后端分离

前后端分离,让软件开发的流程更加清晰,解决了开发阶段的痛点。

从前,前端不止要学习后端的模板渲染语法,还要配置后端的开发环境,并不断同步后端的代码,这对于前端来说是非常痛苦的。

而现在,前端有自己的服务器,不需要再依靠后端服务器来支持项目运行,如果在开发阶段,还可以使用mock数据(要先和后端确定接口数据结构),摆脱对后端接口的依赖,这样极大的提高了开发效率,系统分工也更加明确。

前后端分离后,需要考虑哪些事情

分离后的前端,不再是一个简单的HTML文件,已经是一个独立的应用系统。除了要考虑页面的数据渲染展示,还要用工程化的思想来考虑前端的架构,前后端的交互和数据安全等事情。

架构

**前端应用部署在Nodejs、Nginx或者Nodejs和Nginx组合的服务器上,通过反向代理转发页面请求到后端服务器,相当于在传统的流程中加了Nodejs这一层。**当然,也可以用Nodejs服务器来承担一部分负载均衡的工作,业务逻辑也可以放在Nodejs这一层来处理,例如:通过判断请求是来自 PC 还是 APP ,将请求发到不同的后端服务器。

Nodejs的架构中,分层如下

让我们来回想一下软件开发流程中的几个关键环节:

(1)产品经理提需求,画原型;

(2)UI设计师根据原型出设计图;

(3)测试团队根据产品原型编写测试用例,制定测试计划;

(4)架构师根据原型编写API文档;

(5)前后端工程师基于API文档完成业务开发;

(6)测试、改BUG、发布。

API文档环节直接关系到了前端和后端两个开发团队,也是整个软件开发流程中耗时最大的环节。

RESTful接口交互

前后端分离之后,更多的是采用 RESTful 风格的接口与后端进行数据交互。(如果你们的项目还在使用静态的API文档,比如word文档,那你们必定经历着巨大的痛苦)

REST是“呈现状态转移(REpresentational State Transfer)”的缩写,一种API的架构风格,在客户端和服务端之间通过呈现状态的转移来驱动应用状态的演进。

在 REST 样式的 Web 服务中,每个资源都有一个地址。资源本身都是方法调用的目标,方法列表对所有资源都是一样的。这些方法都是标准方法,包括 HTTP GET、POST、PUT、DELETE,还可能包括 HEADER 和 OPTIONS。
RESTful的API设计,使得后端通过接口向前端传递数据,数据的格式通常是JSON这种通用的格式。对前端来说,只要后端返回过来的是RESTful的数据就行,不管后端是用Java写,还是用python或PHP,拜托对后端的依赖,做到前端系统的独立。

REST服务的调试:Postman 和 Insomnia

使用模板引擎

前后端分离之后,前端工程师需要将通过API获取的数据呈现到页面上,虽然也可以通过jQuery对页面一个一个赋值,但是这种效率太低了,或者也可通过在JavaScript中拼接HTML,但是这种方式太难维护HTML代码了,也很难阅读。因此最好的方式就是使用模板引擎。

前端的模板引擎跟后端模板引擎很相似,比如JSP或cshtml(razor),他们的语法都非常相似,他们所实现的功能也几乎一样:将数据绑定到HTML模板。VueJs和react都可以充当这样的模板引擎。我们最终没有选用react而是选用了VueJs的原因只有一个,那就是VueJs是真正的响应式,而react改变model之后需要手工调用setState才会更新UI,这是完全无法忍受的。

因为这个原因,我们只能选择VueJS作为模板引擎。

工程化构建

Nodejs不止可以用来做前端服务器,在开发阶段,它也能发挥很大的作用。
前端生态的发展,是围绕着Nodejs进行的。用npm来管理项目依赖,可以很好的维护和运行在Nodejs环境上。
打包工具grunt、gulp、webpack和rollup等,都是运行在nodejs上,再结合语法编译、打包部署等插件,将应用输入成一个完整的应用。
如果你使用了Angular、React或Vue框架,或者你使用浏览器暂时还不兼容的ES6语法,还需要在应用打包前用babel将语法编译成浏览器可识别的ES5的语法。

SPA

SPA是单页Web应用(single page web application,SPA)的简写,就是只有一张Web页面的应用,是加载单个HTML 页面并在用户与应用程序交互时动态更新该页面的Web应用程序。

像Angular、React或Vue就是为了SPA而设计的,结合前端路由库(react-router、vue-router)和状态热存储(redux、vuex)等,可以开发出一个媲美Native APP的Web APP,用户体验得到了很大的提升。

当然,SPA也不是完美的,也不是适合所有的web应用,需要结合项目和场景来选择。

SPA有如下缺点:

  • 初次加载耗时增加。可以通过代码拆分、懒加载来提升性能,减少初次加载耗时。

  • SEO不友好,现在可以通过 Prerender 或 Server render 来解决一部分。

  • 页面的前进和后端需要开发者自己写,不过现在一些路由库已经帮助我们基本解决了。

  • 对开发者要求高,由于做SPA需要了解一整套技术栈,所以,要考虑后期是否有合适的人选进行维护。

mock(模拟数据)

前后端分离框架中的API mock思路
想要实现真正的前后端分离,那就必须得用好API mock(模拟数据)。使用mock数据的好处有两个:

  1. 前端开发人员可以基于API文档生成mock数据,在后端开发人员将API发布出来之前就可以完成整个业务流程的开发;

  2. 使用mock数据能够更低成本、更快速地,通过直接修改mock数据的方式,调试页面样式、调试页面功能。

全局的mock开关

为什么要设置这样一个全局的mock开关呢?主要基于以下两点考虑:

  1. 设置全局的mock开关之后就不再需要针对每一个页面设置mock开关,更容易维护,避免项目中有多个mock开关而难以统一开关状态;

  2. 如果发布时忘记将mock开关给关掉,那么发布之后一运行发布者就会发现mock开关忘了关,然后可以快速修复之后再重新发布,从而避免不小心将正式服更新为mock数据源。

正是由于以上两点考虑,我们的全局mock开关可以帮助程序开发者和发布者更不容易犯错。

解决请求问题

前后端分离后,我们只需要Server端告诉我们Api URL即可,那么这会产生一个问题:Ajax跨域。这里就不能使用一般的跨域解决方法去解决,比如jsonp,iframe信使等等,因为我们还有POST请求。

于是Http Proxy类工具就有用了,比如我就会在BrowserSync加入中间件判断每一个请求,如果是/api前缀就会代理到API Server端,API Server端收到数据后再返回给BrowserSync,BrowserSync再返回给浏览器端。这样就解决跨域请求的问题

生产环境有两种部署,一种是放到后台项目里,这就没啥说的,另外一种就是前后端分开部署,那就在前端WebServer处理端写点转发规则就好,如Nginx,Apache都支持。

静态资源路径问题

如果你的项目有上传资源功能,那自然就会产生用户资源,那前后端分离后,如何来处理这个问题呢?得先看模式。

资源与后台项目放一起,后台处理完后需要返回前台一个相对路径,如果资源时一台单独的服务器,那就需要返回资源的绝对URL即可。

会话

Web项目最头疼的就是无状态导致会话问题,传统的Web项目都使用Session/Cookie,但在前后端分离,集群部署模式下这Session明显缺陷太多。token方式已经是当前Web端解决会话的主流,并且有很多开源好用的token生成管理程序,基本上拿来就能用。



小众营销群站系统是一套SaaS化的群站系统,简单理解为在线版的建站程序,可以实现主流开源程序的几乎所有功能。突出亮点是把对SEO的友好性做到了极致,如:所有页面均可自定义TDK、多维度的产品分类、内容素材组合发布、自动微信采集定时发布、站内站功能、百科页功能、栏目页banner详情功能、自动化站内锚文本功能、自动检测友情链接等功能。


标签:
cache
Processed in 0.011576 Second.