今天小編給大家分享的是前后端分開寫的原因，相信大部分人都不太了解，為了讓大家更加了解，給大家總結(jié)了以下內(nèi)容，話不多說，一起往下看吧。

為嘉禾等地區(qū)用戶提供了全套網(wǎng)頁設計制作服務，及嘉禾網(wǎng)站建設行業(yè)解決方案。主營業(yè)務為成都網(wǎng)站制作、成都網(wǎng)站建設、嘉禾網(wǎng)站設計，以傳統(tǒng)方式定制建設網(wǎng)站，并提供域名空間備案等一條龍服務，秉承以專業(yè)、用心的態(tài)度為用戶提供真誠的服務。我們深信只要達到每一位用戶的要求，就會得到認可，從而選擇與我們長期合作。這樣，我們也可以走得更遠！

如果你沒有嘗試過前后端分離的工作流程，那么可以先試想一下這樣的流程改變：
把流程從
PM：“我要這個功能”
后端：“這個先找前端做個模板”
前端：“模板做完了”
后端：“我來對接一下，這里樣式不對”
前端：“我改完了”
后端：“功能交付”
PM：“春節(jié)要加這個活動”
后端：“這個先找前端改個模板”
前端：“模板做完了”
后端：“我來對接一下，這里樣式不對”
前端：“我改完了”
后端：“功能交付”

變成

PM：“我要這個功能”
前端：“我要接口”
后端：“接口完成了”
前端：“我來對接一下，功能交付”
PM：“春節(jié)要加這個活動”
前端：“需要增加接口”
后端：“接口完成了”
前端：“我來對接一下，功能交付”

由此可見，前后端分離的主要概念就是：后臺只需提供API接口，前端調(diào)用AJAX實現(xiàn)數(shù)據(jù)呈現(xiàn)。

現(xiàn)狀與分歧

作為一名前端開發(fā)人員，我們應該嘗試一些新穎的技術(shù)，完善每一個細節(jié)性的問題，不斷突破自我。雖然前后端分離已經(jīng)算不上什么新穎的技術(shù)或思路，但是目前很多后臺開發(fā)人員甚至前端開發(fā)人員都沒有接觸過。

據(jù)我個人的了解，如果在一個部門里，部門人員全是后臺開發(fā)人員，前端的一些頁面也是由后臺人員完成的，那么前后端分離對于他們而言可能是一片未知的領域，項目大多是前后端強耦合的，甚至不存在前端的概念。

在不重視前端的公司或部門，不了解前后端分離這也無可厚非。大多的創(chuàng)業(yè)型公司，一個部門就一兩個前端，而且一人負責幾個項目，很少有合作完成一個項目的時候。因為沒有什么標準可言（這里的標準指的是代碼組織結(jié)構(gòu)），所以就是前端人員切好圖寫好頁面扔給后端，以后端代碼結(jié)構(gòu)為標準。雖然一些公司有前后端分離的意識，但都不知該如何去實踐。在那時，部門的后臺人員認為前后端分離就是后臺不再需要寫HTML和JS了，可以交給前端來做了，然而這只能叫做前后端分工。

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

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

相反，也有可能是后臺開發(fā)人員非常推薦前后端分離，而前端開發(fā)人員不想去實踐的。這時候前端會認為后臺開發(fā)人員在瞎折騰，之前前后端不分離項目做起來都很順利，分離了反而會給自己帶來額外的工作量和學習成本，而這就取決于前端的技術(shù)能力和見識了。

當然，這也是我個人認為的前后端分離所存在的一些現(xiàn)狀和分歧所在。

場景與要求

對于前后端分離的應用場景，不是所有的場景都適合，但是大多數(shù)項目都能夠通過前后端分離來實現(xiàn)。

由于我主要從事企業(yè)級后臺應用的前端開發(fā)工作，個人認為對于后臺應用的開發(fā)來說，前后端分離帶來的利是遠大于弊的。

大多數(shù)后臺應用我們都可以做成SPA應用（單頁應用），而單頁應用最主要的特點就是局部刷新，這通過前端控制路由調(diào)用AJAX，后臺提供接口便可以實現(xiàn)，而且這樣的方式用戶體驗更加友好，網(wǎng)頁加載更加快速，開發(fā)和維護成本也降低了不少，效率明顯提升。

同樣的，在展示類網(wǎng)站和移動APP頁面中前后端分離也同樣試用。前后端不分離的情況下，服務端要單獨針對Web端做處理，返回完整HTML，這樣勢必增加服務端的復雜度，可維護性差，而web端需要加載完整的HTML，一定程度上影響網(wǎng)頁性能，這對于移動端性能為王的地方非常的不友好。

隨著前端技術(shù)的發(fā)展和迭代，前端MVC框架應運而生，利用目前主流的前端框架，如React、Vue、Angular等我們可以輕松的構(gòu)建起一個無需服務器端渲染就可以展示的網(wǎng)站，同時這類框架都提供了前端路由功能，后臺可以不再控制路由的跳轉(zhuǎn)，將原本屬于前端的業(yè)務邏輯全部丟給前端，這樣前后端分離可以說是最為徹底。下面是一段前端控制路由的代碼：

'use strict'export default function (router) {
    router.map({        '/': {            component: function (resolve) {                require(['./PC.vue'], resolve)
            }
        },        '/m/:params': {            component: function (resolve) {                require(['./Mobile.vue'], resolve)
            }
        },        '/p': {            component: function (resolve) {                require(['./PC.vue'], resolve)
            },            subRoutes: {                '/process/:username': {                    component: function (resolve) {                        require(['./components/Process.vue'], resolve)
                    }
                }
            }
        }
    })
}

前后端分離的實現(xiàn)對技術(shù)人員尤其是前端人員的要求會上升一個層次，前端的工作不只是切頁面寫模板或是處理一些簡單的js邏輯，前端需要處理服務器返回的各種數(shù)據(jù)格式，還需要掌握一系列的數(shù)據(jù)處理邏輯、MVC思想和各種主流框架。

優(yōu)勢與意義

對于前后端分離的意義我們也可以看做是前端渲染的意義，我主要總結(jié)了下面四點：

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

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

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

<!--前端渲染 --><template>
    <select id="rander">
        <option value=''>--請選擇所屬業(yè)務--</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 // 獲取服務器端數(shù)據(jù)并渲染
        })
    }
}
</script>

上面是前端渲染的一段代碼，前端通過AJAX調(diào)用后臺接口，數(shù)據(jù)邏輯放在前端，由前端維護。

提高工作效率，分工更加明確
前后端分離的工作流程可以使前端只關(guān)注前端的事，后臺只關(guān)心后臺的活，兩者開發(fā)可以同時進行，在后臺還沒有時間提供接口的時候，前端可以先將數(shù)據(jù)寫死或者調(diào)用本地的json文件即可，頁面的增加和路由的修改也不必再去麻煩后臺，開發(fā)更加靈活。

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

降低維護成本
通過目前主流的前端MVC框架，我們可以非?？焖俚亩ㄎ患鞍l(fā)現(xiàn)問題的所在，客戶端的問題不再需要后臺人員參與及調(diào)試，代碼重構(gòu)及可維護性增強。

心得與體會：

一路走來，項目一個接著一個，從一開始的后臺控制路由、后臺渲染頁面到現(xiàn)在的前端控制路由、前端渲染數(shù)據(jù)，工作流程和方式都發(fā)生了很大的變化。每當遇到下面情形的時候，我都會為前后端分離帶來的優(yōu)勢而感慨一番：

1、項目一開始制作前端頁面的時候，我不再需要后臺給我配置服務器環(huán)境了
2、項目的前端文件可以在需要調(diào)用后臺接口的時候丟進服務器就好了，完全不需要事先放進去
3、增加一個項目頁面需要配置路由的時候不再需要讓后臺同事給我加了，自己前端搞定
4、前端文件里不再摻雜后臺的代碼邏輯了，看起來舒服多了
5、頁面跳轉(zhuǎn)比之前更加流暢了，局部渲染局部加載非?？焖?br/>6、頁面模板可以重復使用了，前端組件化開發(fā)提高了開發(fā)效率

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

以上就是前后端分開寫的原因的詳細說明了，看完之后是否有所收獲呢？如果想了解更多相關(guān)內(nèi)容，歡迎關(guān)注創(chuàng)新互聯(lián)成都網(wǎng)站設計公司行業(yè)資訊！

另外有需要云服務器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務器、裸金屬服務器、高防服務器、香港服務器、美國服務器、虛擬主機、免備案服務器”等云主機租用服務以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應用場景需求。

分享名稱：前后端分開寫的原因-創(chuàng)新互聯(lián)
標題來源：http://redsoil1982.com.cn/article40/cogeeo.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供微信小程序、靜態(tài)網(wǎng)站、網(wǎng)站設計、手機網(wǎng)站建設、網(wǎng)站排名、企業(yè)網(wǎng)站制作

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)