談談前後端分離

2021-07-23 06:21:48 字數 2890 閱讀 9063

作為一名前端開發人員,我們應該嘗試一些新穎的技術,完善每乙個細節性的問題,不斷突破自我。雖然前後端分離已經算不上什麼新穎的技術或思路,但是目前很多後台開發人員甚至前端開發人員都沒有接觸過。

據我個人的了解,如果在乙個部門裡,部門人員全是後台開發人員,前端的一些頁面也是由後台人員完成的,那麼前後端分離對於他們而言可能是一片未知的領域,專案大多是前後端強耦合的,甚至不存在前端的概念。

在不重視前端的公司或部門,不了解前後端分離這也無可厚非。在我剛進入乙個全是後台開發人員的部門的時候,整個部門就我乙個前端,我剛開始的主要職責就是負責專案前端頁面的製作和js功能的實現,雖然部門有前後端分離的意識,但都不知該如何去實踐。在那時,部門的後台人員認為前後端分離就是後台不再需要寫html和js了,可以交給前端來做了,然而這只能叫做前後端分工。

以上講述的是一種情況: 不了解前後端分離,也不知如何去實踐的。下面還有一種情況:了解前後端分離,但不想去嘗試的。

針對第二種情況,很多人也做過相應的解釋,其實這就涉及到「前後端分離的利弊」問題。很多後台人員會認為自己所做的那一套沒有問題,即便後台套用前端html也是司空見慣,一直是大勢所趨,後台mvc框架也是這麼推薦使用的,很合理。這時候前端開發人員在部門中的話語權往往是不夠的,或者認為後台開發人員的意見永遠是對的,沒有主觀性。

相反,也有可能是後台開發人員非常推薦前後端分離,而前端開發人員不想去實踐的。這時候前端會認為後台開發人員在瞎折騰,之前前後端不分離專案做起來都很順利,分離了反而會給自己帶來額外的工作量和學習成本,而這就取決於前端的技術能力和見識了。

當然,這也是我個人認為的前後端分離所存在的一些現狀和分歧所在。

對於前後端分離的應用場景,不是所有的場景都適合,但是大多數專案都能夠通過前後端分離來實現。

由於我主要從事企業級後台應用的前端開發工作,個人認為對於後台應用的開發來說,前後端分離帶來的利是遠大於弊的。

大多數後台應用我們都可以做成spa應用(單頁應用),而單頁應用最主要的特點就是區域性重新整理,這通過前端控制路由呼叫ajax,後台提供介面便可以實現,而且這樣的方式使用者體驗更加友好,網頁載入更加快速,開發和維護成本也降低了不少,效率明顯提公升。

隨著前端技術的發展和迭代,前端mvc框架應運而生,利用目前主流的前端框架,如react、vue、angular等我們可以輕鬆的構建起乙個無需伺服器端渲染就可以展示的**,同時這類框架都提供了前端路由功能,後台可以不再控制路由的跳轉,將原本屬於前端的業務邏輯全部丟給前端,這樣前後端分離可以說是最為徹底。下面是一段前端控制路由的**:

export default

function

(router)

},'/m/:params':

},'/p': ,

subroutes: }}

}})

}

前後端分離的實現對技術人員尤其是前端人員的要求會上公升乙個層次,前端的工作不只是切頁面寫模板或是處理一些簡單的js邏輯,前端需要處理伺服器返回的各種資料格式,還需要掌握一系列的資料處理邏輯、mvc思想和各種主流框架。

對於前後端分離的意義我們也可以看做是前端渲染的意義,我主要總結了下面四點:

1、徹底解放前端

前端不再需要向後台提供模板或是後台在前端html中嵌入後台**,如:

value=''>--請選擇所屬業務--option>

value="

}">

}option>

select>

這是前後端耦合的,可讀性差。

id="rander">

value=''>--請選擇所屬業務--option>

v-for="list in lists"

:value="list"

v-text="list">

option>

select>

template>

export default

},ready: function

() )

.then(function

(response) )

}}script>

上面是前端渲染的一段**,前端通過ajax呼叫後台介面,資料邏輯放在前端,由前端維護。

2、提高工作效率,分工更加明確

前後端分離的工作流程可以使前端只關注前端的事,後台只關心後台的活,兩者開發可以同時進行,在後台還沒有時間提供介面的時候,前端可以先將資料寫死或者呼叫本地的json檔案即可,頁面的增加和路由的修改也不必再去麻煩後台,開發更加靈活。

3、區域性效能提公升

通過前端路由的配置,我們可以實現頁面的按需載入,無需一開始載入首頁便載入**的所有的資源,伺服器也不再需要解析前端頁面,在頁面互動及使用者體驗上有所提公升。

4、降低維護成本

通過目前主流的前端mvc框架,我們可以非常快速的定位及發現問題的所在,客戶端的問題不再需要後台人員參與及除錯,**重構及可維護性增強。

一路走來,專案乙個接著乙個,從一開始的後台控制路由、後台渲染頁面到現在的前端控制路由、前端渲染資料,工作流程和方式都發生了很大的變化。每當遇到下面情形的時候,我都會為前後端分離帶來的優勢而感慨一番:

專案一開始製作前端頁面的時候,我不再需要後台給我配置伺服器環境了

專案的前端檔案可以在需要呼叫後台介面的時候丟進伺服器就好了,完全不需要事先放進去

增加乙個專案頁面需要配置路由的時候不再需要讓後台同事給我加了,自己前端搞定

前端檔案裡不再摻雜後台的**邏輯了,看起來舒服多了

頁面跳轉比之前更加流暢了,區域性渲染區域性載入非常快速

頁面模板可以重複使用了,前端元件化開發提高了開發效率

等等。面對快速發展的前端,我們應該去適應其帶來的工作方式和流程的改變,目前的前後端分離的工作方式必然是今後的趨勢所在,作為乙個前端開發人員,我們應當承擔這個普及前端新知識和改變現狀的職責。

前後端分離

關於前後端分離的一些好的文章推薦 前端框架 為什麼前後端分離 最直白的理解,我認為是因為在開發過程中,前端總是需要等待後端的環境搭建好之後,前端才能獲取相關資料,對於前端的開發影響很大,事實上前端並不關心後端的開發,那麼有沒有方法不讓後端影響前端的開發呢?其實後端提供的是什麼?乙個執行伺服器,乙個就...

前後端分離

在此說明 前後端分離有利於後端的快速開發,但並不利於搜尋引擎優化 seo 上圖能清晰的看到,使用前後端分離模式進行開發,瀏覽器會向伺服器傳送請求,伺服器會向瀏覽器傳送乙個類似框架的html,是固定的空殼,此時瀏覽器再使用ajax請求向後端伺服器索要資料,後端伺服器返回json字串給瀏覽器,從而使瀏覽...

前後端分離

前後端分離的好處 1 徹底解放前端 2 提高工作效率,分工更加明確。3 區域性效能提公升 4 降低維護成本 2 前後端分離的概念 後台只需要提供api介面,前端呼叫ajax實現資料呈現 3 場景和要求 4 web前端路由 就是根據url分配到對應的處理程式,原理和路由器原理相同,不同的請求位址會交給...