龙空技术网

讲一讲前后端分离技术

切图和跨屏 269

前言:

现在朋友们对“nginx前后分离”大体比较关注,同学们都需要学习一些“nginx前后分离”的相关资讯。那么小编也在网摘上搜集了一些对于“nginx前后分离””的相关资讯,希望你们能喜欢,我们快快来了解一下吧!

前后端分离技术应该是未来的大势所趋,在网站开发要求越来越高,就越来越需要精细化,需要分工明确,前端负责前端和前端的业务逻辑比如vue,后端负责后端的搭建和逻辑。

所以在将来前端需要的技能不仅仅在于切图,前端页面动态交互上,而也应该多关注vue等前端的数据处理逻辑。切图网从最早专注于网页切图等HTML/CSS/JS相关的web前端外包开始,目前也一直跟随着技术的脚步,现在也全面投入到vue等开发进程中来了。

前后端工程师需要约定交互接口,实现并行开发,开发结束后需要进行独立部署,前端通过ajax来调用http请求调用后端的restful api。前端只需要关注页面的样式与动态数据的解析&渲染,而后端专注于具体业务逻辑。

在前后端分离的时代,前端工作人员主要负责什么工作呢?

1、拿到UI给的设计图用HTML进行高度还原

2、与后端约定接口&数据&参数

3、前后端集成,请求后端提供的API接口获取数据

4、前端页面调整

这些是我在前端工作过程中,需要负责的事。用一句话来总结前端的工作就是:前端追求的是,页面表现,速度流畅,兼容性,用户体验等等。

既然目前已经做到了前后端分离,那么对于前端工程师需要把精力放在html5,css3,jquery,angularjs,bootstrap,reactjs,vuejs,webpack,less/sass,gulp,nodejs,Google V8引擎,javascript多线程,模块化,面向切面编程,设计模式,浏览器兼容性,性能优化等等。

前后分离的优势

1、可以实现真正的前后端解耦,前端服务器使用nginx。前端/WEB服务器放的是css,js,图片等等一系列静态资源(甚至你还可以css,js,图片等资源放到特定的文件服务器,例如阿里云的oss,并使用cdn加速),前端服务器负责控制页面引用&跳转&路由,前端页面异步调用后端的接口,后端/应用服务器使用tomcat(把tomcat想象成一个数据提供者),加快整体响应速度。(这里需要使用一些前端工程化的框架比如nodejs,react,router,react,redux,webpack)

2、发现bug,可以快速定位是谁的问题,不会出现互相踢皮球的现象。页面逻辑,跳转错误,浏览器兼容性问题,脚本错误,页面样式等问题,全部由前端工程师来负责。接口数据出错,数据没有提交成功,应答超时等问题,全部由后端工程师来解决。双方互不干扰,前端与后端是相亲相爱的一家人。

3、在大并发情况下,我可以同时水平扩展前后端服务器,比如淘宝的一个首页就需要2000+台前端服务器做集群来抗住日均多少亿+的日均pv。(去参加阿里的技术峰会,听他们说他们的web容器都是自己写的,就算他单实例抗10万http并发,2000台是2亿http并发,并且他们还可以根据预知洪峰来无限拓展,很恐怖,就一个首页。。。)

4、减少后端服务器的并发/负载压力。除了接口以外的其他所有http请求全部转移到前端nginx上,接口的请求调用tomcat,参考nginx反向代理tomcat。且除了第一次页面请求外,浏览器会大量调用本地缓存。

5、即使后端服务暂时超时或者宕机了,前端页面也会正常访问,只不过数据刷不出来而已。

6、也许你也需要有微信相关的轻应用,那样你的接口完全可以共用,如果也有app相关的服务,那么只要通过一些代码重构,也可以大量复用接口,提升效率。(多端应用)

7、页面显示的东西再多也不怕,因为是异步加载。

8、nginx支持页面热部署,不用重启服务器,前端升级更无缝。

9、增加代码的维护性&易读性(前后端耦在一起的代码读起来相当费劲)。

10、提升开发效率,因为可以前后端并行开发,而不是像以前的强依赖。

11、在nginx中部署证书,外网使用https访问,并且只开放443和80端口,其他端口一律关闭(防止黑客端口扫描),内网使用http,性能和安全都有保障。

12、前端大量的组件代码得以复用,组件化,提升开发效率,抽出来!

标签: #nginx前后分离