怎樣理解先後端代碼分離(簡單版前端理解)

1、先後端分離是什麼？

簡單的說，就是前端負責瀏覽器端（客戶端）用戶交互界面和邏輯等，顯示數據；後端負責數據的處理和存儲等，提供數據。

2、對於前端來講先後端代碼分離的意義（頁面渲染的意義）？

1. 完全解放前端

前端再也不須要向後臺提供模板或是後臺在前端html中嵌入後臺代碼，如：

1 <!--服務器端渲染 -->
2 <select>
3     <option value=''>--請選擇所屬業務--</option>
4     {% for p in p_list %}
5     <option value="{{ p }}">{{ p }}</option>
6     {% endfor %}
7 </select>

這是先後端耦合的，可讀性差。

 1 <!--前端渲染 -->
 2 <template>
 3     <select id="rander">
 4         <option value=''>--請選擇所屬業務--</option>
 5         <option v-for="list in lists" :value="list" v-text="list"></option>
 6     </select>
 7 </template>
 8 
 9 <script>
10 export default {
11     data: {
12         return {
13             lists: ['選項一', '選項二', '選項三', '選項四']
14         }
15     }，
16     ready: function () {
17         this.$http({
18             url: '/demo/',
19             method: 'POST',
20         })
21         .then(function (response) {
22             this.lists = response.data.lists // 獲取服務器端數據並渲染
23         })
24     }
25 }
26 </script>

上面是前端渲染的一段代碼，前端經過AJAX調用後臺接口，數據邏輯放在前端，由前端維護。

2. 提升工做效率，分工更加明確

先後端分離的工做流程可使前端只關注前端的事，後臺只關心後臺的活，二者開發能夠同時進行，在後臺尚未時間提供接口的時候，前端能夠先將數據寫死或者調用本地的json文件便可，頁面的增長和路由的修改也沒必要再去麻煩後臺，開發更加靈活。

3. 局部性能提高

經過前端路由的配置，咱們能夠實現頁面的按需加載，無需一開始加載首頁便加載網站的全部的資源，服務器也再也不須要解析前端頁面，在頁面交互及用戶體驗上有所提高。

4. 下降維護成本

經過目前主流的前端MVC框架，咱們能夠很是快速的定位及發現問題的所在，客戶端的問題再也不須要後臺人員參與及調試，代碼重構及可維護性加強。

 

通俗的本身前端理解來講：

• 項目一開始製做前端頁面的時候，我再也不須要後臺給我配置服務器環境了

• 項目的前端文件能夠在須要調用後臺接口的時候丟進服務器就行了，徹底不須要事先放進去

• 增長一個項目頁面須要配置路由的時候再也不須要讓後臺同事給我加了，本身前端搞定

• 前端文件裏再也不摻雜後臺的代碼邏輯了，看起來舒服多了

• 頁面跳轉比以前更加流暢了，局部渲染局部加載很是快速

• 頁面模板能夠重複使用了，前端組件化開發提升了開發效率

等等一些好處。

 

 

博客參考文：吳隱隱—先後端分離與前端工程化=>https://segmentfault.com/a/1190000006751300

                     勞卜——咱們爲何要嘗試先後端分離=>https://segmentfault.com/a/1190000006240370