文档章节

前后端分离开发部署模式

u
 uosdnioos
发布于 2015/12/14 14:39
字数 1352
阅读 40
收藏 0

这周着手开始重新构建官网,OTA1.3V继续推进,目前分为了企业版,与国外版,老官网那套架构的代码经过几千人手的改动,于是索性干掉,采用新的架构模式(前后端分离开发部署模式),找到下面这篇文章我觉得说的挺好,在开始讨论这个话题之前我们先来认识一下传统的开发模式。

一、传统开发模式

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

  1. PHP 开发有 Smarty模板引擎

  2. Java web工程有jsp页面

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

  4. NodeJS 的express你懂得

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

二、Ajax过渡

Ajax是把前后端分离部署的推进者,当时网页局部更新就是未来前后端分离的开端。那什么是前后端分离开发呢?

简单来说就是前端开发不需要部署后台语言那堆垃圾环境,后端开发也不需要前端写好的任何程序,后台只管暴露各种API接口提供前端进行数据的增删改查,不负责生成HTML页面

前端请求到数据后再动态声称dom节点。

三、前端构建

相对于后台来说,前端构建是重点,因为前后端分离开发后侧重点在于前端,后端就是一个数据提供,权限控制api。

后端项目通常都带自己的Server,除了PHP以外,所以后端做PHP开发的还需要一个WebServer,Apache就是经典配合,最近被抛弃换做Nginx了,所以后台环境本来就是伪生产环境。

前端项目还是要搭建一个Server,然后把项目丢里边才能跑起来调试开发,最笨的直接整一个Apache或者Nginx也可以,但这样开发还是很痛苦。可以利用Node工具集即可,Node工具集非常多,比如我非常喜欢用的BrowserSync。

四、解决请求问题

前后端分离后,我们只需要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生成管理程序,基本上拿来就能用。

最后

前后端分离的弱点,无非有两点

1、前端负载增多,如请求到列表后,前端需要自己遍历数据集声称DOM节点 (目前绝大多数用户的电脑配置都不差,而且浏览器内核已经不在是满身缺陷的IE浏览器了)

2、不利于蜘蛛(其实现在的部分蜘蛛已经很厉害了,能够支持H5 C3效果)

强点,

1、Web端就像手机端的App一样,不需要Cookie/Session,与Server完全分离,易于维护、扩展。一个Server API可以随意多个Web App

2、AngularJS用过了以后,你应该会感觉未来的Web开发模式,AngularJS在几乎是前后端分离的领航者

3、前端静态资源与后台API分流,互不影响,甚至不会存在IO问题

4、开发上与后台几乎同步,互相不影响,特别是基于RESTFul API风格,更是减少了沟通的成本

5、方便各自debug,JAVA开发人员不需要跑到前端开发人员机器上看tomcat控制台的报错,前端开发人员也不需要跑到后端开发人员的机器上看浏览器报错调试


获取【下载地址】  

© 著作权归作者所有

u
粉丝 0
博文 3
码字总数 2423
作品 0
昆明
私信 提问
前后端分离-为什么分离

What? 什么是前后端分离?一般我们所说的前后端分离都是说开发模式的前后端分离,部署一般也是分离的。 现在我所知道的常见的开发模式有: 传统的MCV模式:前端写html,后端套界面,转成jsp...

郭恩洲_OSC博客
2016/11/21
369
0
前后端分离到前后端整合进行开发

首先我是很赞同业界的前后端分离的开发模式,虽然现在都讲究全栈工程师,但是毕竟术业有专攻,前端同学专注多终端,后端同学关注高性能高可用。大家各自再自己的专注点上发光发热。 想想我们...

王小明123
2016/08/01
2.5K
5
实现前后端分离的心得

原文出处:陈陈jg 实现前后端分离的心得 对目前的web来说,前后端分离已经变得越来越流行了,越来越多的企业/网站都开始往这个方向靠拢。那么,为什么要选择前后端分离呢?前后端分离对实际开...

陈陈jg
2017/07/02
0
0
前后端分离,https站点无法通过Ajax访问http资源(Mixed Content,The page at 'https://xxx.com' was loaded over HTTPS)

目前Web开发,大部分公司都用的是前后端分离模式,即前端专注于前端页面交互,后端专注于功能实现及提供Web Api接口。 在某次新站点的开发过程中,为了网站的安全性,要求Web站点使用https协...

一直在路上
2018/12/20
0
0
webkixi/FKP-REST

About This is a starter boilerplate app I've put together using the following technologies: Both client and server make calls to load data from separate API server KOA React Mon......

webkixi
2016/08/11
0
0

没有更多内容

加载失败,请刷新页面

加载更多

500行代码,教你用python写个微信飞机大战

这几天在重温微信小游戏的飞机大战,玩着玩着就在思考人生了,这飞机大战怎么就可以做的那么好,操作简单,简单上手。 帮助蹲厕族、YP族、饭圈女孩在无聊之余可以有一样东西让他们振作起来!...

上海小胖
今天
8
0
关于AsyncTask的onPostExcute方法是否会在Activity重建过程中调用的问题

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。 本文链接:https://blog.csdn.net/XG1057415595/article/details/86774575 假设下面一种情况...

shzwork
今天
7
0
object 类中有哪些方法?

getClass(): 获取运行时类的对象 equals():判断其他对象是否与此对象相等 hashcode():返回该对象的哈希码值 toString():返回该对象的字符串表示 clone(): 创建并返此对象的一个副本 wait...

happywe
今天
6
0
Docker容器实战(七) - 容器中进程视野下的文件系统

前两文中,讲了Linux容器最基础的两种技术 Namespace 作用是“隔离”,它让应用进程只能看到该Namespace内的“世界” Cgroups 作用是“限制”,它给这个“世界”围上了一圈看不见的墙 这么一...

JavaEdge
今天
8
0
文件访问和共享的方法介绍

在上一篇文章中,你了解到文件有三个不同的权限集。拥有该文件的用户有一个集合,拥有该文件的组的成员有一个集合,然后最终一个集合适用于其他所有人。在长列表(ls -l)中这些权限使用符号...

老孟的Linux私房菜
今天
7
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部