## 前后端分離  [Swagger - 前后端分離后的契約 - 破狼 - 博客園](http://www.cnblogs.com/whitewolf/p/4686154.html) > 比如很多團隊采取了后端的模板技術（JSP, FreeMarker, ERB等等），**前端的開發和調試需要一個后臺Web容器的支持**，從而無法將前后端開發和部署做到真正的分離。 * * * * * 前端開發就是寫模板？為什么我一個做后端的也成天的在寫模板？什么鬼？ 在開發時就能前后端分離，互不影響開發進度，這才是真正意義上的前后端分離。前端開發時需要后端部署同樣的環境，寫好控制器功能，前端寫模板，這樣不算是分離，后端套模板，這不是真正意義上的前端開發，不叫前端工程師，而是模板工程師。 * * * * * ### 終極的分離實踐 **如果要徹底的前后端分離，那就不要再把模版交給php處理了**，哪怕再簡單的單頁著落頁也不要后端管，就在中間加一層node.js，可以做頁面拼裝和簡單的邏輯處理和路由等等。后端完全專注于提供接口服務就行了（后端完全專注于接口，即API 和 RPC服務），這種方案應該是前后端分離的最佳實踐了。 從此前后端的邊界不再是瀏覽器到服務器的距離，再說node.js本來就是前端應該掌握的，所以服務器上的前端也是前端，這和以往相比，對前端要求更高了，大前端，哈哈。 如果使用node進行前后端分離了的話，那么用于防止 “跨站請求偽造攻擊”的 `__token__` 就不能使用api接口獲取了，只能使用RPC服務得到了。（傳統API是客戶端的API，RPC相當于是服務端的API，對外不可見。） >[danger] 前端（html/js/css） > 中前端（node/nginx/php） > 中后端（php） > 后端（php/swoole/c/go/java） [狼叔：Node全棧為前端帶來更多可能](http://mp.weixin.qq.com/s/IOC7Vv9plh7171Bdz8Z1fQ) > 頁面即服務，而不是后端api為服務，因為只有頁面是直接面對用戶的。并且一個功能往往是要多個API聯合使用的，所以單個API不算是服務。只有頁面才算是服務。至少對用戶來說是這樣的。 > 項目 前端和后端完全分離來做，兩個git項目，分開管理。 [專訪彭星老師：探究前后端分離存在的意義](https://mp.weixin.qq.com/s/SlwvqEFKrcSRr8FZgBImUQ) > 控制器要交給前端了，也就是以前由后端控制的url(面向用戶，用戶看到的，地址欄的url，而非后端api地址)，現在由前端掌控。 > > 如果把它當應用來做，頁面不是很多，使用場景網絡環境好的情況下，傾向于使用單頁前后端分離方式，如果還是比較傳統的網站，頁面多，使用場景多樣，網絡環境不穩定，那么還是傳統的模式，直接用node多頁模式前后端分離比較好（后端多頁渲染現在直接交給了前端而已）。 [前端發展閑聊](https://mp.weixin.qq.com/s/PEIVQe0KEw1JY3IACQnl3Q) > 其他開發當然也可以來做前端，不過要想做的好，學習代價大到令人發指——而這往往是不能被接受的。 > > 我甚至認為，前端會成為終端開發的最終解決方案，包括但不限于手機，電視，車載中控等等。 [大家都在說的前后端分離到底是什么？](https://mp.weixin.qq.com/s/EcwargTYzeRcjAx9NEZPjQ) ~~~ 對node層不太了解 沒太看懂。。。我們的結構是html js css 全部署在cdn上，js訪問后端的api 這是最簡單普通的一種方案，但是不夠強大，還是用node + rpc的方式最好，是目前最好的方式。 ~~~ [那些前端MVVM框架是如何誕生的](https://mp.weixin.qq.com/s/UNud9JF23Ba5ncSGxz7fmg) [漸進式Web應用（PWA）入門教程（上）](https://mp.weixin.qq.com/s/LRxyuLe8cCE_S917yOkMbA) [前后端交互如何確保數據安全性？](https://mp.weixin.qq.com/s/3QiaO7-Z9q7lowanQsgbpg) [前端重構方案了解一下](https://mp.weixin.qq.com/s/H9Dvm_5F8hdBrZynlNdlfw) [【原創】分布式之閑侃前后端分離的必要性 - 孤獨煙 - 博客園](https://www.cnblogs.com/rjzheng/p/9185502.html) > 然后，前端就滿臉不爽的在你那調代碼了。更有些情商低的后端就直接在旁邊開摁手機，實在是。。。。。 > > 需要數據填充輸出基本骨架的部分，用rpc內網調用（同步輸出）；其它的數據，首屏后再發起請求調用（異步輸出）。 > > 同步輸出的可以做SEO，異步輸出的無法SEO。 >[danger] ### 其實我們就是想結束套模板的日子！不想變成所謂的「前端phper」 給頁標綁定事件，阻止默認跳轉，而是用ajax請求分頁鏈接，后臺檢測到ajax請求就渲染html片段，檢測到是蜘蛛請求就渲染整個頁面。可以提高用戶體驗，但要注意用h5方式無刷新更新url，這樣就能提供友好的無刷新翻頁體驗了。實際使用中就看有沒有這么必要這樣來優化用戶體驗了。 [為什么前后端分離了，你比從前更痛苦？](https://mp.weixin.qq.com/s/3fFJth2FYjJYYF1u8r7aTw) [微前端 - 將微服務理念延伸到前端開發中](https://mp.weixin.qq.com/s/VgcIy3wCLE8J9h_ODWx1Ew) [前端如何高效的與后端協作開發](https://mp.weixin.qq.com/s/fGQj8eDn7UPURbV4RPKtLA) [mpvue 在前端項目的應用設計](https://mp.weixin.qq.com/s/0vnEnMwkxv1zcLv_EM6biQ) [細說后端模板渲染、客戶端渲染、node 中間層、服務器端渲染（ssr）](https://mp.weixin.qq.com/s/bQh-PssTgtnK4aPbTxB4xQ) [蘇寧的Node.js實踐：不低于Java的渲染性能、安全穩定迭代快](https://mp.weixin.qq.com/s/kX23axjtgPRb64jb1HQLOQ) > 使用 Node 模板，去替換 Java 模板，去除了模板文件誰寫這樣的模糊地帶，讓后端的 Java 工程師，只寫 JSON 服務，實現前后端分離。 * * * * * ### 擴展 [你真的懂前后端分離嗎？ - Phodal | 豆瓣閱讀](https://read.douban.com/reader/column/5 [嗶哩嗶哩（B站）的前端之路 - 掘金](https://juejin.im/post/5a473a2df265da431441098c) [前后端分離的思考與實踐（一） - 文章 - 伯樂在線](http://blog.jobbole.com/65513/#tt_daymode=1) [前后端分離的思考與實踐（二） - 文章 - 伯樂在線](http://blog.jobbole.com/65534/#tt_daymode=1) [如何做好前后端分離？](https://www.toutiao.com/a6312072190104715521/?tt_from=weixin&utm_campaign=client_share&timestamp=1515260495&app=news_article&utm_source=weixin&iid=22069500288&utm_medium=toutiao_android&wxshare_count=1) [web實戰開發--前后端分離之js模板渲染](https://www.toutiao.com/a6307131893104738562/?tt_from=weixin&utm_campaign=client_share&timestamp=1515261075&app=news_article&utm_source=weixin&iid=22069500288&utm_medium=toutiao_android&wxshare_count=1) [Mock.js](http://mockjs.com/) > 讓前端攻城師獨立于后端進行開發。 [JavaScript 全棧工程師培訓教程 - 阮一峰的網絡日志](http://www.ruanyifeng.com/blog/2016/11/javascript.html) [前端開發的歷史和趨勢](https://github.com/ruanyf/jstraining/blob/master/docs/history.md) > 互聯網發展的早期，前后端開發是一體的，前端代碼是后端代碼的一部分。 > 那時的前端工程師，實際上是模板工程師，負責編寫頁面模板。 [ruanyf/jstraining: 全棧工程師培訓材料](https://github.com/ruanyf/jstraining) [React 技術棧](https://github.com/ruanyf/jstraining/blob/master/docs/react.md) [分層架構，前后端分離有啥壞處？](http://mp.weixin.qq.com/s/ZKjKUkWkNqxiwNEjBDXtiQ) [互聯網分層架構，為啥要前后端分離？](http://mp.weixin.qq.com/s/Nhyo969WnEwyCWpr34ECcA) [一分鐘了解互聯網動靜分離架構](https://mp.weixin.qq.com/s/Kpsq8MH2TvXQEECyGrmj9A) > 總數據量不大，生成靜態頁面數量不多的業務，非常適合于“頁面靜態化”優化。 [必備，前臺與后臺分離的架構實踐](https://mp.weixin.qq.com/s/d65cXGXp_jcEeELyDZxGVA) [網站PC版和移動版的模板方案 · 前端筆記 · 看云](http://www.hmoore.net/xiak/quanduan/411654) [token是什么東西，登錄提交以后后臺一定會返回一個token嗎？ - justjavac的回答 - SegmentFault](https://segmentfault.com/q/1010000010834287/a-1020000010834335) > 用在不支持 cookie 的終端。 > > 原生app。除了瀏覽器，基本都不支持cookie。 [移動端開發者眼中的前端開發流程變遷與前后端分離 - 掘金](https://juejin.im/post/57b7a88679bc44005b95ebd4) [優化技巧 ：如何設計一個高質量的URL及頁面標題 - Phodal | 豆瓣閱讀](https://read.douban.com/reader/column/5945187/chapter/31584440/#) [專輯：淘寶前后端分離 - FED社區](http://frontenddev.org/column/taobao-full-stack-development/) [趣店前端團隊基于koajs的前后端分離實踐 - CNode技術社區](https://cnodejs.org/topic/57b062ed144011da12ff4183) [參考淘寶團隊實踐：一個簡單粗暴的前后端分離方案 - 51CTO.COM](http://developer.51cto.com/art/201501/463338.htm) [也談基于NodeJS的全棧式開發（基于NodeJS的前后端分離） - 51CTO.COM](http://developer.51cto.com/art/201404/435984.htm) [前后端分離實踐](http://mp.weixin.qq.com/s/nKvjsU2frT5NDU4DLWqvYg) > AJAX 異步請求過多等問題。畢竟后端思維和前端思維還是有所不同——前端思維傾向于用戶體驗，而后端思維則更傾向于業務的技術實現。 [Web 研發模式演變 · Issue #184 · lifesinger/blog](https://github.com/lifesinger/blog/issues/184) > 1、**前端開發重度依賴開發環境。** 這種架構下，前后端協作有兩種模式：一種是前端寫 demo，寫好后，讓后端去套模板。淘寶早期包括現在依舊有大量業務線是這種模式。好處很明顯，demo 可以本地開發，很高效。不足是還需要后端套模板，有可能套錯，套完后還需要前端確定，來回溝通調整的成本比較大。另一種協作模式是前端負責瀏覽器端的所有開發和服務器端的 View 層模板開發，支付寶是這種模式。好處是 UI 相關的代碼都是前端去寫就好，后端不用太關注，不足就是前端開發重度綁定后端環境，環境成為影響前端開發效率的重要因素。 > > 2、**前后端職責依舊糾纏不清。** Velocity 模板還是蠻強大的，變量、邏輯、宏等特性，依舊可以通過拿到的上下文變量來實現各種業務邏輯。這樣，只要前端弱勢一點，往往就會被后端要求在模板層寫出不少業務代碼。還有一個很大的灰色地帶是 Controller，頁面路由等功能本應該是前端最關注的，但卻是由后端來實現。Controller 本身與 Model 往往也會糾纏不清，看了讓人咬牙的代碼經常會出現在 Controller 層。這些問題不能全歸結于程序員的素養，否則 JSP 就夠了。 [Web應用的組件化（一）——基本思路 · Issue #6 · xufei/blog](https://github.com/xufei/blog/issues/6) [如何通過nodejs來實現php的前后端分離？ - 知乎](https://www.zhihu.com/question/26598306) [基于node的前后端分離初識 - 簡書](https://www.jianshu.com/p/61ec19f33018) [Nodeway--基于node.js的輕量級前后端分離框架 - CSDN博客](http://blog.csdn.net/xingkong0128/article/details/53690400) [實現前后端分離的心得 - 陳陳jg - 博客園](https://www.cnblogs.com/chenjg/archive/2017/06/12/6992062.html) [也談基于NodeJS的全棧式開發（基于NodeJS的前后端分離） - 51CTO.COM](http://developer.51cto.com/art/201404/435984.htm) [圖解基于 Node.js 實現前后端分離 - CSDN博客](http://blog.csdn.net/goodmentc/article/details/53576680) [基于NODEJS的前后端項目分離實踐 - - ITeye博客](http://jiangxiao-2000.iteye.com/blog/2219921) [javascript - 怎樣用node和php實現前后端分離，有具體的例子嗎 - SegmentFault](https://segmentfault.com/q/1010000009301531) [node PHP 前后端分離_百度搜索](https://www.baidu.com/s?wd=node+PHP+%E5%89%8D%E5%90%8E%E7%AB%AF%E5%88%86%E7%A6%BB&rsv_spt=1&rsv_iqid=0xcd62721f0005f537&issp=1&f=3&rsv_bp=0&rsv_idx=2&ie=utf-8&rqlang=&tn=baiduhome_pg&ch=&rsv_enter=1&inputT=5281) [互聯網風雨十年，我所經歷的技術變遷](https://mp.weixin.qq.com/s?__biz=MzA4NTg1MjM0Mg==&mid=2657261437&idx=1&sn=c21c3a6f821ecdb17627d9431b9116ad&chksm=84479ea4b33017b286f4b7f43c3d511511de3bc8d7ece978bf9bf18e3c6babde7c829533c587&scene=21#wechat_redirect) [討論：開發大型后臺管理系統，應該采用前后端分離嗎？](https://mp.weixin.qq.com/s/WFWz02sVU1W-477t7BQAUw) * * * * * last update：2018-1-25 14:51:12