今天小編給大家分享的是前后端分開寫的原因,相信大部分人都不太了解,為了讓大家更加了解,給大家總結(jié)了以下內(nèi)容,話不多說,一起往下看吧。
為嘉禾等地區(qū)用戶提供了全套網(wǎng)頁設(shè)計(jì)制作服務(wù),及嘉禾網(wǎng)站建設(shè)行業(yè)解決方案。主營業(yè)務(wù)為成都網(wǎng)站制作、成都網(wǎng)站建設(shè)、嘉禾網(wǎng)站設(shè)計(jì),以傳統(tǒng)方式定制建設(shè)網(wǎng)站,并提供域名空間備案等一條龍服務(wù),秉承以專業(yè)、用心的態(tài)度為用戶提供真誠的服務(wù)。我們深信只要達(dá)到每一位用戶的要求,就會(huì)得到認(rèn)可,從而選擇與我們長期合作。這樣,我們也可以走得更遠(yuǎn)!如果你沒有嘗試過前后端分離的工作流程,那么可以先試想一下這樣的流程改變:
把流程從
PM:“我要這個(gè)功能”
后端:“這個(gè)先找前端做個(gè)模板”
前端:“模板做完了”
后端:“我來對(duì)接一下,這里樣式不對(duì)”
前端:“我改完了”
后端:“功能交付”
PM:“春節(jié)要加這個(gè)活動(dòng)”
后端:“這個(gè)先找前端改個(gè)模板”
前端:“模板做完了”
后端:“我來對(duì)接一下,這里樣式不對(duì)”
前端:“我改完了”
后端:“功能交付”
變成
PM:“我要這個(gè)功能”
前端:“我要接口”
后端:“接口完成了”
前端:“我來對(duì)接一下,功能交付”
PM:“春節(jié)要加這個(gè)活動(dòng)”
前端:“需要增加接口”
后端:“接口完成了”
前端:“我來對(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ā)人員都沒有接觸過。
據(jù)我個(gè)人的了解,如果在一個(gè)部門里,部門人員全是后臺(tái)開發(fā)人員,前端的一些頁面也是由后臺(tái)人員完成的,那么前后端分離對(duì)于他們而言可能是一片未知的領(lǐng)域,項(xiàng)目大多是前后端強(qiáng)耦合的,甚至不存在前端的概念。
在不重視前端的公司或部門,不了解前后端分離這也無可厚非。大多的創(chuàng)業(yè)型公司,一個(gè)部門就一兩個(gè)前端,而且一人負(fù)責(zé)幾個(gè)項(xiàng)目,很少有合作完成一個(gè)項(xiàng)目的時(shí)候。因?yàn)闆]有什么標(biāo)準(zhǔn)可言(這里的標(biāo)準(zhǔn)指的是代碼組織結(jié)構(gòu)),所以就是前端人員切好圖寫好頁面扔給后端,以后端代碼結(jié)構(gòu)為標(biāo)準(zhǔn)。雖然一些公司有前后端分離的意識(shí),但都不知該如何去實(shí)踐。在那時(shí),部門的后臺(tái)人員認(rèn)為前后端分離就是后臺(tái)不再需要寫HTML和JS了,可以交給前端來做了,然而這只能叫做前后端分工。
以上講述的是一種情況: 不了解前后端分離,也不知如何去實(shí)踐的。下面還有一種情況:了解前后端分離,但不想去嘗試的。
針對(duì)第二種情況,很多人也做過相應(yīng)的解釋,其實(shí)這就涉及到“前后端分離的利弊”問題。很多后臺(tái)人員會(huì)認(rèn)為自己所做的那一套沒有問題,即便后臺(tái)套用前端html也是司空見慣,一直是大勢所趨,后臺(tái)MVC框架也是這么推薦使用的,很合理。這時(shí)候前端開發(fā)人員在部門中的話語權(quán)往往是不夠的,或者認(rèn)為后臺(tái)開發(fā)人員的意見永遠(yuǎn)是對(duì)的,沒有主觀性。
相反,也有可能是后臺(tái)開發(fā)人員非常推薦前后端分離,而前端開發(fā)人員不想去實(shí)踐的。這時(shí)候前端會(huì)認(rèn)為后臺(tái)開發(fā)人員在瞎折騰,之前前后端不分離項(xiàng)目做起來都很順利,分離了反而會(huì)給自己帶來額外的工作量和學(xué)習(xí)成本,而這就取決于前端的技術(shù)能力和見識(shí)了。
當(dāng)然,這也是我個(gè)人認(rèn)為的前后端分離所存在的一些現(xiàn)狀和分歧所在。
場景與要求
對(duì)于前后端分離的應(yīng)用場景,不是所有的場景都適合,但是大多數(shù)項(xiàng)目都能夠通過前后端分離來實(shí)現(xiàn)。
由于我主要從事企業(yè)級(jí)后臺(tái)應(yīng)用的前端開發(fā)工作,個(gè)人認(rèn)為對(duì)于后臺(tái)應(yīng)用的開發(fā)來說,前后端分離帶來的利是遠(yuǎn)大于弊的。
大多數(shù)后臺(tái)應(yīng)用我們都可以做成SPA應(yīng)用(單頁應(yīng)用),而單頁應(yīng)用最主要的特點(diǎn)就是局部刷新,這通過前端控制路由調(diào)用AJAX,后臺(tái)提供接口便可以實(shí)現(xiàn),而且這樣的方式用戶體驗(yàn)更加友好,網(wǎng)頁加載更加快速,開發(fā)和維護(hù)成本也降低了不少,效率明顯提升。
同樣的,在展示類網(wǎng)站和移動(dòng)APP頁面中前后端分離也同樣試用。前后端不分離的情況下,服務(wù)端要單獨(dú)針對(duì)Web端做處理,返回完整HTML,這樣勢必增加服務(wù)端的復(fù)雜度,可維護(hù)性差,而web端需要加載完整的HTML,一定程度上影響網(wǎng)頁性能,這對(duì)于移動(dòng)端性能為王的地方非常的不友好。
隨著前端技術(shù)的發(fā)展和迭代,前端MVC框架應(yīng)運(yùn)而生,利用目前主流的前端框架,如React、Vue、Angular等我們可以輕松的構(gòu)建起一個(gè)無需服務(wù)器端渲染就可以展示的網(wǎng)站,同時(shí)這類框架都提供了前端路由功能,后臺(tái)可以不再控制路由的跳轉(zhuǎn),將原本屬于前端的業(yè)務(wù)邏輯全部丟給前端,這樣前后端分離可以說是最為徹底。下面是一段前端控制路由的代碼:
'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è)層次,前端的工作不只是切頁面寫模板或是處理一些簡單的js邏輯,前端需要處理服務(wù)器返回的各種數(shù)據(jù)格式,還需要掌握一系列的數(shù)據(jù)處理邏輯、MVC思想和各種主流框架。
優(yōu)勢與意義
對(duì)于前后端分離的意義我們也可以看做是前端渲染的意義,我主要總結(jié)了下面四點(diǎn):
徹底解放前端
前端不再需要向后臺(tái)提供模板或是后臺(tái)在前端html中嵌入后臺(tái)代碼,如:
<!--服務(wù)器端渲染 --><select> <option value=''>--請選擇所屬業(yè)務(wù)--</option> {% for p in p_list %} <option value="{{ p }}">{{ p }}</option> {% endfor %}</select>
這是前后端耦合的,可讀性差。
<!--前端渲染 --><template> <select id="rander"> <option value=''>--請選擇所屬業(yè)務(wù)--</option> <option v-for="list in lists" :value="list" v-text="list"></option> </select></template><script>export default { data: { return { lists: ['選項(xiàng)一', '選項(xiàng)二', '選項(xiàng)三', '選項(xiàng)四'] } }, ready: function () { this.$http({ url: '/demo/', method: 'POST', }) .then(function (response) { this.lists = response.data.lists // 獲取服務(wù)器端數(shù)據(jù)并渲染 }) } } </script>
上面是前端渲染的一段代碼,前端通過AJAX調(diào)用后臺(tái)接口,數(shù)據(jù)邏輯放在前端,由前端維護(hù)。
提高工作效率,分工更加明確
前后端分離的工作流程可以使前端只關(guān)注前端的事,后臺(tái)只關(guān)心后臺(tái)的活,兩者開發(fā)可以同時(shí)進(jìn)行,在后臺(tái)還沒有時(shí)間提供接口的時(shí)候,前端可以先將數(shù)據(jù)寫死或者調(diào)用本地的json文件即可,頁面的增加和路由的修改也不必再去麻煩后臺(tái),開發(fā)更加靈活。
局部性能提升
通過前端路由的配置,我們可以實(shí)現(xiàn)頁面的按需加載,無需一開始加載首頁便加載網(wǎng)站的所有的資源,服務(wù)器也不再需要解析前端頁面,在頁面交互及用戶體驗(yàn)上有所提升。
降低維護(hù)成本
通過目前主流的前端MVC框架,我們可以非常快速的定位及發(fā)現(xiàn)問題的所在,客戶端的問題不再需要后臺(tái)人員參與及調(diào)試,代碼重構(gòu)及可維護(hù)性增強(qiáng)。
心得與體會(huì):
一路走來,項(xiàng)目一個(gè)接著一個(gè),從一開始的后臺(tái)控制路由、后臺(tái)渲染頁面到現(xiàn)在的前端控制路由、前端渲染數(shù)據(jù),工作流程和方式都發(fā)生了很大的變化。每當(dāng)遇到下面情形的時(shí)候,我都會(huì)為前后端分離帶來的優(yōu)勢而感慨一番:
1、項(xiàng)目一開始制作前端頁面的時(shí)候,我不再需要后臺(tái)給我配置服務(wù)器環(huán)境了
2、項(xiàng)目的前端文件可以在需要調(diào)用后臺(tái)接口的時(shí)候丟進(jìn)服務(wù)器就好了,完全不需要事先放進(jìn)去
3、增加一個(gè)項(xiàng)目頁面需要配置路由的時(shí)候不再需要讓后臺(tái)同事給我加了,自己前端搞定
4、前端文件里不再摻雜后臺(tái)的代碼邏輯了,看起來舒服多了
5、頁面跳轉(zhuǎn)比之前更加流暢了,局部渲染局部加載非常快速
6、頁面模板可以重復(fù)使用了,前端組件化開發(fā)提高了開發(fā)效率
等等。面對(duì)快速發(fā)展的前端,我們應(yīng)該去適應(yīng)其帶來的工作方式和流程的改變,目前的前后端分離的工作方式必然是今后的趨勢所在,作為一個(gè)前端開發(fā)人員,我們應(yīng)當(dāng)承擔(dān)這個(gè)普及前端新知識(shí)和改變現(xiàn)狀的職責(zé)。
以上就是前后端分開寫的原因的詳細(xì)說明了,看完之后是否有所收獲呢?如果想了解更多相關(guān)內(nèi)容,歡迎關(guān)注創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計(jì)公司行業(yè)資訊!
另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn,海內(nèi)外云服務(wù)器15元起步,三天無理由+7*72小時(shí)售后在線,公司持有idc許可證,提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案,具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢,專為企業(yè)上云打造定制,能夠滿足用戶豐富、多元化的應(yīng)用場景需求。
分享名稱:前后端分開寫的原因-創(chuàng)新互聯(lián)
標(biāo)題來源:http://m.newbst.com/article40/cogeeo.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供微信小程序、靜態(tài)網(wǎng)站、網(wǎng)站設(shè)計(jì)、手機(jī)網(wǎng)站建設(shè)、網(wǎng)站排名、企業(yè)網(wǎng)站制作
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容