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

一、前后端分離是什么？

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

二、對於前端來說前后端代碼分離的意義（頁面渲染的意義）？

1. 徹底解放前端

前端不再需要向后台提供模板或是后台在前端html中嵌入后台代碼，如：

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

這是前后端耦合的，可讀性差。

<!--前端渲染 -->
<template>
    <select id="rander">
        <option value=''>--請選擇所屬業務--</option>
        <option v-for="list in lists" :value="list" v-text="list"></option>
    </select>
</template>

<script>
export default {
    data: {
        return {
            lists: ['選項一', '選項二', '選項三', '選項四']
        }
    }，
    ready: function () {
        this.$http({
            url: '/demo/',
            method: 'POST',
        })
        .then(function (response) {
            this.lists = response.data.lists // 獲取服務器端數據並渲染
        })
    }
}
</script>

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

2. 提高工作效率，分工更加明確

前后端分離的工作流程可以使前端只關注前端的事，后台只關心后台的活，兩者開發可以同時進行，在后台還沒有時間提供接口的時候，前端可以先將數據寫死或者調用本地的json文件即可，頁面的增加和路由的修改也不必再去麻煩后台，開發更加靈活。

3. 局部性能提升

通過前端路由的配置，我們可以實現頁面的按需加載，無需一開始加載首頁便加載網站的所有的資源，服務器也不再需要解析前端頁面，在頁面交互及用戶體驗上有所提升。

4. 降低維護成本

通過目前主流的前端MVC框架，我們可以非常快速的定位及發現問題的所在，客戶端的問題不再需要后台人員參與及調試，代碼重構及可維護性增強。

 

通俗的自己前端理解來說：

• 項目一開始制作前端頁面的時候，我不再需要后台給我配置服務器環境了

• 項目的前端文件可以在需要調用后台接口的時候丟進服務器就好了，完全不需要事先放進去

• 增加一個項目頁面需要配置路由的時候不再需要讓后台同事給我加了，自己前端搞定

• 前端文件里不再摻雜后台的代碼邏輯了，看起來舒服多了

• 頁面跳轉比之前更加流暢了，局部渲染局部加載非常快速

• 頁面模板可以重復使用了，前端組件化開發提高了開發效率

等等一些好處。

 

 

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

                     勞卜——我們為什么要嘗試前后端分離=>https://segmentfault.com/a/1190000006240370