日韩无码专区无码一级三级片|91人人爱网站中日韩无码电影|厨房大战丰满熟妇|AV高清无码在线免费观看|另类AV日韩少妇熟女|中文日本大黄一级黄色片|色情在线视频免费|亚洲成人特黄a片|黄片wwwav色图欧美|欧亚乱色一区二区三区

這不是一篇純技術(shù)文章，而是一篇分享我個(gè)人在前后端分離路上收獲的點(diǎn)點(diǎn)滴滴的文章，以此來(lái)為準(zhǔn)備嘗試前后端分離或者想了解前后端分離的童鞋做一個(gè)大體的講解。

我們提供的服務(wù)有：成都做網(wǎng)站、成都網(wǎng)站制作、微信公眾號(hào)開發(fā)、網(wǎng)站優(yōu)化、網(wǎng)站認(rèn)證、渝水ssl等。為1000多家企事業(yè)單位解決了網(wǎng)站和推廣的問題。提供周到的售前咨詢和貼心的售后服務(wù)，是有科學(xué)管理、有技術(shù)的渝水網(wǎng)站制作公司

嘗試與改變

如果你沒有嘗試過(guò)前后端分離的工作流程，那么可以先試想一下這樣的流程改變：

把流程從

PM：“我要這個(gè)功能”

后端：“這個(gè)先找前端做個(gè)模板”

前端：“模板做完了”

后端：“我來(lái)對(duì)接一下，這里樣式不對(duì)”

前端：“我改完了”

后端：“功能交付”

PM：“春節(jié)要加這個(gè)活動(dòng)”

后端：“這個(gè)先找前端改個(gè)模板”

前端：“模板做完了”

后端：“我來(lái)對(duì)接一下，這里樣式不對(duì)”

前端：“我改完了”

后端：“功能交付”

變成

PM：“我要這個(gè)功能”

前端：“我要接口”

后端：“接口完成了”

前端：“我來(lái)對(duì)接一下，功能交付”

PM：“春節(jié)要加這個(gè)活動(dòng)”

前端：“需要增加接口”

后端：“接口完成了”

前端：“我來(lái)對(duì)接一下，功能交付”

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

現(xiàn)狀與分歧

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

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

在不重視前端的公司或部門，不了解前后端分離這也無(wú)可厚非。在我剛進(jìn)入一個(gè)全是后臺(tái)開發(fā)人員的部門的時(shí)候，整個(gè)部門就我一個(gè)前端，我剛開始的主要職責(zé)就是負(fù)責(zé)項(xiàng)目前端頁(yè)面的制作和JS功能的實(shí)現(xiàn)，雖然部門有前后端分離的意識(shí)，但都不知該如何去實(shí)踐。在那時(shí)，部門的后臺(tái)人員認(rèn)為前后端分離就是后臺(tái)不再需要寫HTML和JS了，可以交給前端來(lái)做了，然而這只能叫做前后端分工。

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

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

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

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

場(chǎng)景與要求

對(duì)于前后端分離的應(yīng)用場(chǎng)景，不是所有的場(chǎng)景都適合，但是大多數(shù)項(xiàng)目都能夠通過(guò)前后端分離來(lái)實(shí)現(xiàn)。

由于我主要從事企業(yè)級(jí)后臺(tái)應(yīng)用的前端開發(fā)工作，個(gè)人認(rèn)為對(duì)于后臺(tái)應(yīng)用的開發(fā)來(lái)說(shuō)，前后端分離帶來(lái)的利是遠(yuǎn)大于弊的。

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

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

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

 
 

  
  
'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)
  
  
                    }
  
  
                }
  
  
            }
  
  
        }
  
  
    })
  
  
} 
 
 

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

優(yōu)勢(shì)與意義

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

1. 徹底解放前端

前端不再需要向后臺(tái)提供模板或是后臺(tái)在前端html中嵌入后臺(tái)代碼，如：

 
 

  
  

  
  

  
  
    --請(qǐng)選擇所屬業(yè)務(wù)--
  
  
    {% for p in p_list %}
  
  
    {{ p }}
  
  
    {% endfor %}
  
  
 
 
 

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

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

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

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

3. 局部性能提升

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

4. 降低維護(hù)成本

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

心得與體會(huì)

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

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

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

只有嘗試了才知道適不適合，只有切身體會(huì)才能辨別誰(shuí)是誰(shuí)非，本文并非推崇一定要前后端分離，而是希望大家在合適的應(yīng)用場(chǎng)景下去嘗試前后端分離，在豐富經(jīng)驗(yàn)的同時(shí)或許也會(huì)擦出火花。

新聞名稱：我們?yōu)槭裁匆獓L試前后端分離
分享URL：http://www.5511xx.com/article/dhpiigs.html