网站前后端分离问题

Question

公司网站原本的网页数据是用php处理的，然后最近在尝试前后端分离，数据完全由js来处理页面的数据，用js的ajax来请求返回数据，我的疑问是：

1. 这种做法可取吗？

2. 会不会造成安全性的问题？

3. 不然前后端分离指的是什么？是怎么实现的？

4. 现在国内有没有哪些网站数据完全由js控制，就是后端返回json之类的数据，然后js来负责填充显示网页

知道的朋友不妨和我讨论讨论，公司前端体系不成熟，感激不尽！

---

: ) 谢谢大家的讨论，受益匪浅，感谢，

Answer 1

特意把我以前写过的一个总结转过来给你看看：http://segmentfault.com/a/1190000003795517

其实也没有谈什么很深的东西(比如所谓的“大前端”是什么），但是你问的几个问题多少都有些涉及，算是一个 overview 的回顾吧。

总结一句话：分不分离是要看情况的，你可以不选择分离，但是你不可以不会分离。

---

建议你以后不要把问题问的如此之泛，因为回答起来没重点，容易争执。把你的几个问题拆开来分别讨论还能多赚点分多好啊？哈哈

Answer 2

个人以前有过类似的问题，所以这里为楼主简单逐条解释一下。

这种做法可取吗，会不会造成安全性的问题？

技术是人们对解决问题的方式、方法的一种归结。也因此任何技术都有其特定的场景和适用领域。

个人初入社会时换过几家公司，他们的技术架构分别有J2EE、C++服务器与AS3网页客户端、C++服务器与C++客户端、PHP网站。

说白了这些看上去感觉不同的平台、技术，其实归根结底都是让用户通过网线把数据传到电信服务上，最后丢到你的服务器里。

因此说白了底层都是类 Socket(TCP/UDP) 技术，HTTP也只是基于这些技术的 “通信协议”。

而所谓通信协议，不过就是说我规定你必须以这样的方式传递数据：数据包头 · 数据包分隔符 · 数据包内容

那么在这个基础上，就延伸出来了加密通信方式来保证数据传输过程中的安全性。如：

1. HTTPS的从协议上解决问题的。

2. 在前端通过JS对数据进行MD5的加密方式.

3. 通过NSAPI来制作浏览器插件，并通过C++之类的语言来编写更加不容易被破解的本地通信方式（浏览器端的JS加密可能意味着加密方式被破解，写插件可以通过单独的通道去服务器上获取Token）

说白了，PHP也只是将HTML页面生成出来，然后传回给用户。如果用户和你的服务器间的通信层（如电信服务商、机房）被劫持拦截了，那就涉及到电信公司或大规模劫持、用户电脑被植入木马之类的问题...

这个你能解决么？

前后端分离指的是什么？是怎么实现的？

技（liu）术（cheng）架（guan）构（li）上的前后端分离

前后端分离通常是指程序架构上的，而不是说我用JS加载数据就可以 看起来更厉害 。

为什么一些应用会把数据处理丢在前端，哪些公司这么做了？

我以前跟着公司做的OA系统，J2EE与EXTJS的架构。为什么这么做？很简单，如果你的网页里涉及到像富客户端（Rich Client）一样的技术，那么这样做可以让你的前端工程师更好的把控应用的流程。

什么是Rich Client？形象一点来说就是把 Office 搬到 Web。

把流程从
PM：“我要这个功能”
后端：“这个先找前端做个模板”
前端：“模板做完了”
后端：“我来对接一下，这里样式不对”
前端：“我改完了”
后端：“功能交付”
PM：“春节要加这个活动”
后端：“这个先找前端改个模板”
前端：“模板做完了”
后端：“我来对接一下，这里样式不对”
前端：“我改完了”
后端：“功能交付”

变成
PM：“我要这个功能”
前端：“我要接口”
后端：“接口完成了”
前端：“我来对接一下，功能交付”
PM：“春节要加这个活动”
前端：“需要增加接口”
后端：“接口完成了”
前端：“我来对接一下，功能交付”

服务器结构上的前后端分离

以前的服务器结构：

数据库 -> 缓存服务器 -> N台PHP节点（通过代码控制JS、CSS）

现在的服务器结构：

数据库 -> 缓存服务器 -> N台PHP节点（只负责处理API请求） -> CDN托管（JS+CSS）

现在国内有没有哪些网站数据完全由js控制？

完全JS控制也不太可能，毕竟涉及到 SEO（搜索引擎优化） 问题。这里倒是可以问，有多少新的 Web 项目没用到 AJAX 呢？以下公司都这么做过：

• 腾讯：微云、QQ空间

• 百度：地图、百度盘

• 阿里：阿里云

• Google：没几个不是

• Apple：iCloud，iTunes Connect

• Microsoft：One Drive，Office

有没有什么现成的解决方案？可能会遇到哪些问题？

大部分PHP框架都提供了Restful API支持、JSON/JSONP输出。

可能会遇到的坑有：

• SEO，搜索引擎优化、爬出抓取，解决方案就是专门为搜索引擎写页面、SITEMAP，或是部分 AJAX

• HTML5安全风险详析之一：CORS攻击

• 浅谈跨域WEB攻击

• 深掘XSS漏洞场景之XSS Rootkit

还有一个我忘了，但是大概就是不安全的GET攻击。

比如你现在有一个接口是：comment.php?content=HelloWorld 的评论接口，或是 vote.php?target_id=12121 的投票接口

然后我现在在某个论坛把自己的签名改为

<img src="http://www.xxx.com/vote.php?target_id=12121" /> 

然后看到这个签名的用户有可能有你的程序的账号，之后他看到这个帖子就会请求一次于是就刷票了。微博以前出过这个问题，解决方案依然是搞定跨域。

如何区分出需要 AJAX 化的场景？

这一部分是我的一些粗浅理解，简单来说涉及到以下方面考虑：

• 技术人员配置

• 项目复杂度

• 用户接受度

技术人员配置

这个是私事，如果该项目后端多，前端少，那还是后端分担一部分前段工作吧。如果人员配置健康，建议把一部分业务变动需求量大操作接口化。毕竟万变却脱离不了：CRUD。

项目复杂度

我们要做个 MMO网页游戏 一般网页APP的出来，那你还是趁早把前后端分开，让大家用 "API" 交流吧。

我们要做个 页面刷新量少，效果酷炫 的网页社交APP出来，那你可以部分分离，优先分割操作复杂、重复编写次数高的功能，如购物车的操作。

我们要做个 类似网上图书馆 的网页APP出来，那你就PHP渲染吧，毕竟让用户能够通过Google找到你的网站、或是通过Google来搜索你的网站，比你自己设计个站内搜索都重要。

用户接受度

简单来说当年 Facebook 有过大量运用 AJAX 结果导致引起部分访问 Facebook 困难的国家的网民的愤怒的事情。因为他们刷出来页面却没有数据（笑）。

Answer 3

https://github.com/lifesinger/lifesinger.github.io/issues/184

Answer 4

最正常不过了。后端只返回json，前端加工json渲染页面。安全上，post和get的时候做权限检验，前端过来的数据都不可信，后端也要做数据校验。另外，用node很方便的一个地方，校验的几个库都是前后端都适用的，代码copy一下就行?

Answer 5

推荐你看看淘宝ued的文章哈。 淘宝ued

Answer 6

所谓的“前后端分离”仅仅是开发模式的一种而已，讨论的是分工，分工是为了提高效率。

早些时候基本都是前端提供好html页面，然后后端去套，这个思路基本虽然能满足需求但是已经被严重的证明影响开发效率

后端团队（如php,java等等）处理和提供数据是毫无争议的地方，当然也不排除所谓的“大前端”把数据处理的活也干了。

现在业界比较纠结的问题是页面渲染纠结谁做，其实涉及到页面的部分当然是前端团队比较“专业”，所以近几年来由前端团队来进行数据渲染的方式大行其道，几乎可以断定是未来的趋势。

但是有这么一个问题似乎很少人进行讨论，那就是后端团队向前端团队提供的“数据”到什么颗粒度。比方说一个页面可能需要好几块的数据聚合来做渲染，那么后端团队只是一些基础性数据，然后由前端团队整合渲染还是后端团队提供一整块数据直接做页面渲染？这似乎没有多少人关注。

上面提高的问题，个人见解得看前端团队的“水平”如何来抉择。数据整合这件事其实水很深，能做和做得好玩玩全全是两个概念，所以如果前端团队的“水平”很高，那么后端团队仅仅提供基础性数据就可以了，前端团队可以更加自如的组合数据做页面，但是如果前端团队的“水平”不高，那么我觉得仅仅做把整块的数据渲染成页面的工作就好了，这样至少能保证不会被“玩坏”。

上述是针对楼主提到的问题的一些个人思考，希望有所帮助。

Answer 7

为什么分离呢？因为前端逻辑已经很重了，为了前端能更快速开发？还是只是为了分离而分离。想了解下你想通过分离解决什么问题。不分离又是有什么限制？

Answer 8

php只提供api，js进行调用
以后方便做客户端

Answer 9

目前我也在做相关的分离工作，初衷目的是提高前端的重用性，开发多套客户端用同一套后台。

Answer 10

前后端分离，你可以看看淘宝的前后端分离实践。

Answer 11

很有必要，安全性采用token机制。

Answer 12

http://www.hfworks.cn/home?lang=zh，做了前后端分离

Answer 13

1.第一个问题，是必然趋势，一旦你的项目做得大了起来，必然要前后端分离：（1）可以使前后端的开发不受到彼此的影响，加快了开发进程；(2)使测试变得很简单，很容易维护你的项目。
2.第二个问题，关于安全性的问题有很多的措施可以进行保护的，这方面我没怎么研究过，就不能给你一些好建议了；但是方法肯定是有的，并不会因为前后端的分离使你的应用安全性降低。
3.第三个问题，前后端分离以后的交流方式是通过Rest方式，前端发起Http请求，通过POST，GET，PUT，DELETE方法，发送，获取，更新或者删除数据，方便简单。
4.第四个问题，国内应该有很多吧，我没怎么搜查过。

---

注：1.使用一些框架可以更方便的帮助你是先前后端的分离，比如：Angular或者Vue.js
2.我之前短学期做了一个小demo就是前后端分离实现的，方便快捷，有兴趣可以看一下。

Answer 14

我们前一段刚做了前后端分离 用了百度的FIS框架 用起来还是不错

Answer 15

我们是前端写controller，问model要数据

Answer 16

1）我个人认为非常可取
首先是不做嗯前后端分离会有什么问题，服务端要单独针对Web端做处理，要返回完整HTML，势必增加服务端的复杂度，可维护性差。
2）做好安全把控是没有问题，使用现在成熟的Json Web Token可以很好的规避安全问题，其实就算不做前后端分离，如果后台设计的不好，一样会出现安全问题的，对吧。
3）我理解的前后端分离就是后台关心数据的处理及提供数据的接口，前端（泛指安卓，iOS）只需要关注数据的展现。
4）http://m.123hxf.com/这是我目前在做的一个项目，后端采用RoR架构，前端AngularJS。

当然我对现在的架构还有些不满意的地方，希望能和更多人进行交流

Answer 17

我们目前的基础架构是
后端只提供统一的API,
前台使用 AngularJS进行实现,
无论web,wap,app还是其他什么平台,都调用统一的API进行功能实现即可,
感觉这个也是现在这个时代的大势所趋,比之前复杂的可能是授权方面的系统
总体来说,用angularJS做出来的单页面系统,感觉交互上还是很好的.

Answer 18

作为PHP开发人员我经历了两个阶段前后端分离。

一是PHP写完mc，等跟前端开发人员开发完v，我在套进来。这个阶段的分离是帮我摆脱了写html，有功能修改时还需要配合。

二是PHP写完接口，也是mc，只是换成json输出，再写文档。这个阶段的分离，帮我彻底的拜托了前端开发人员，他们看文档就好。

数据加密这块基本没办法，所见所得。更方便别人采集。

Answer 19

安全性的话 将token加入到所有的ajax请求的header里 所有服务端的api都对每次请求验证