javascript - 請教一下關於前後端分離的一些疑問

今天早上看了一篇關於vue前台架構的使用教程,然後引發了我一些的疑問,望各位大神能告知一二.問題如下:

1. 前後端分離指的是視圖檔案不再存在伺服器指令碼語言嗎?意義是什麼?

2. 類似vue架構的v-for遍曆資料和thinkphp的標籤volist遍曆有什麼卻別嗎?是和一個在用戶端運行,一個在服務端運行有關嗎?還是說對頁面的渲染起到不一樣的作用?

3. 前台架構和js模板引擎有什麼區別?例如artTemplate模板引擎和vue架構

回複內容：

今天早上看了一篇關於vue前台架構的使用教程,然後引發了我一些的疑問,望各位大神能告知一二.問題如下:

1. 前後端分離指的是視圖檔案不再存在伺服器指令碼語言嗎?意義是什麼?

2. 類似vue架構的v-for遍曆資料和thinkphp的標籤volist遍曆有什麼卻別嗎?是和一個在用戶端運行,一個在服務端運行有關嗎?還是說對頁面的渲染起到不一樣的作用?

3. 前台架構和js模板引擎有什麼區別?例如artTemplate模板引擎和vue架構

非大神，以下觀點純粹個人理解，前後端分離，傳統的web頁面都是通過伺服器產生，然後發送到瀏覽器渲染，js在這個過程中起輔助作用。現在，無論是vue、angular還是reactjs，操作真實的DOM也好，Virtual DOM也好，都通過js產生html，從一定程度上來說，方式和php、python的模板引擎也沒有多大區別，最終都是產生html。
那前後端分離的意義在哪裡？
1、對前端工程師而言，有更大的自由度（傳統模式下，大概最多就算是個美工吧，現在能把自己叫做工程師了），更能專註於前端的頁面的呈現、互動邏輯的處理。（ps. 一直覺得傳統模式下，前端把頁面做出來，後端又把他們改成模板，最後再渲染成html，這整個流程是一件很蠢的事情）
2、對於後端而言，可以脫離視圖，專註於純邏輯的處理，再也不用管你頁面該怎麼呈現了，想想就很開心。
3、前端和後端只用對接好api就可以了，大大減少了不必要的交流，加快開發效率。個人覺得這一點很重要。
4、當你同時要開發app、web、案頭應用的時候，api可以最大程度的被複用。
5、前端架構通過ajax的方式非同步擷取資料，不用為了局部的改動重新重新整理整個頁面，相較於服務端渲染的方案，更加流暢。
6、前後端分離後，項目更易於管理。
7、data binding， 這是伺服器渲染做不到的。
etc.

2、3兩個問題，其實應該差不多算是一個問題，前端架構和模板引擎以及後端模板引擎這幾個的區別，如我所說，要說區別也沒用多大區別，你要是瞭解ember.js，你看看它handlebars的寫法。模板引擎算是前端架構的一部分吧，但不是全部。然後，前端架構的模板引擎和後端模板引擎，實現的方式是不一樣的，後端是把模板當成文本解析之後把資料填到相應的位置，而前端架構是對真實DOM或者Virtual DOM的操作。所以後端模板引擎要改變頁面，只能重新渲染，而前端架構並不用。
拿v-for和volist來說，（好吧，我並不用php），一個是遍曆產生html文本，一個是在html中進行DOM操作。

前後端分離前
用戶端請求服務端,通過 PHP/Java 等後端語言擷取到資料,渲染到靜態頁面,並把渲染後的頁面返回到用戶端.

分離後
用戶端直接請求服務端擷取靜態頁面,略過php/java後端擷取資料步驟.
頁面展示後, 通過 ajax 請求服務端介面,擷取資料.並把資料渲染到頁面.
介面只返回資料,因此不僅可以給 web 前端提供資料,還可以為安卓, ios 用戶端提供資料,提高了介面的可用性.

