中文字幕日韩精品一区二区免费_精品一区二区三区国产精品无卡在_国精品无码专区一区二区三区_国产αv三级中文在线

網(wǎng)絡(luò)公司做網(wǎng)站注重前后分離

2016-10-30    分類: 做網(wǎng)站

網(wǎng)絡(luò)公司做網(wǎng)站注重前后分離,什么是前后端分離,傳統(tǒng)開發(fā)模式相信很多做過Web開發(fā)童鞋應(yīng)該都會經(jīng)歷這樣一種開發(fā)模式,利用后端語言提供的模版引擎編寫HTML/XML頁面,比如:PHP 開發(fā)有 Smarty模板引擎Java web工程有jsp頁面Python 各個Web框架都有各自的模板引擎NodeJS 的express你懂得都有一個共同的特點,服務(wù)器端后臺語言生成解析后的HTML/XML格式返回給客戶端,例如瀏覽器端訪問直接返回解析好的HTML,瀏覽器直接就解釋執(zhí)行。在傳統(tǒng)的像ASP,JSP和PHP等開發(fā)模式中,前端是處在一個混沌的狀態(tài)中,可以說是沒有獨立的“人格”可言。前端負責切圖和編寫靜態(tài)頁面模板,后端將數(shù)據(jù)渲染到前端提供的頁面模板中,最后將頁面渲染到瀏覽器展示。這個過程中,前端只提供頁面模板或者寫一些JavaScript腳本,有的甚至JS腳本都是后端來寫,前端的作用只局限于切圖和樣式模板文件,這種角色就是傳說中的“切圖仔”。前后端分離,不只是簡單的代碼的分離。首先是要架構(gòu)上分離解耦,逐漸擺脫前后端在架構(gòu)上的依賴,前后端各司其職,分開部署在不同的服務(wù)器上,通過RESTful接口傳遞數(shù)據(jù)。減輕后端服務(wù)器的壓力,后端服務(wù)器不再負責頁面渲染,只負責輸入數(shù)據(jù),吞吐量提升了好幾倍。其次是邏輯分離,不分離的時候,對于業(yè)務(wù)代碼的界限很不明確,業(yè)務(wù)邏輯基本都放在后端,分離之后,前端也承擔了一部分不該后端來寫的業(yè)務(wù)邏輯,數(shù)據(jù)處理更加清晰。最后是系統(tǒng)分離,同一個后端系統(tǒng),可以將同樣的接口數(shù)據(jù)提供給PC端、Mobile端和Native端等不同的前端終端,不需要為每一種終端提供一套接口。同樣,對于前端應(yīng)用來說,可以更方便的調(diào)用多個后端服務(wù)器的接口,處理和展示多個系統(tǒng)間的數(shù)據(jù)。為什么要前后端分離前后端分離,讓軟件開發(fā)的流程更加清晰,解決了開發(fā)階段的痛點。從前,前端不止要學習后端的模板渲染語法,還要配置后端的開發(fā)環(huán)境,并不斷同步后端的代碼,這對于前端來說是非常痛苦的。而現(xiàn)在,前端有自己的服務(wù)器,不需要再依靠后端服務(wù)器來支持項目運行,如果在開發(fā)階段,還可以使用mock數(shù)據(jù)(要先和后端確定接口數(shù)據(jù)結(jié)構(gòu)),擺脫對后端接口的依賴,這樣極大的提高了開發(fā)效率,系統(tǒng)分工也更加明確。前后端分離后,需要考慮哪些事情分離后的前端,不再是一個簡單的HTML文件,已經(jīng)是一個獨立的應(yīng)用系統(tǒng)。除了要考慮頁面的數(shù)據(jù)渲染展示,還要用工程化的思想來考慮前端的架構(gòu),前后端的交互和數(shù)據(jù)安全等事情。架構(gòu)**前端應(yīng)用部署在Nodejs、Nginx或者Nodejs和Nginx組合的服務(wù)器上,通過反向代理轉(zhuǎn)發(fā)頁面請求到后端服務(wù)器,相當于在傳統(tǒng)的流程中加了Nodejs這一層。**當然,也可以用Nodejs服務(wù)器來承擔一部分負載均衡的工作,業(yè)務(wù)邏輯也可以放在Nodejs這一層來處理,例如:通過判斷請求是來自 PC 還是 APP ,將請求發(fā)到不同的后端服務(wù)器Nodejs的架構(gòu)中,分層如下讓我們來回想一下軟件開發(fā)流程中的幾個關(guān)鍵環(huán)節(jié):(1)產(chǎn)品經(jīng)理提需求,畫原型;(2)UI設(shè)計師根據(jù)原型出設(shè)計圖;(3)測試團隊根據(jù)產(chǎn)品原型編寫測試用例,制定測試計劃;(4)架構(gòu)師根據(jù)原型編寫API文檔;(5)前后端工程師基于API文檔完成業(yè)務(wù)開發(fā);(6)測試、改BUG、發(fā)布。API文檔環(huán)節(jié)直接關(guān)系到了前端和后端兩個開發(fā)團隊,也是整個軟件開發(fā)流程中耗時大的環(huán)節(jié)。RESTful接口交互前后端分離之后,更多的是采用 RESTful 風格的接口與后端進行數(shù)據(jù)交互。(如果你們的項目還在使用靜態(tài)的API文檔,比如word文檔,那你們必定經(jīng)歷著巨大的痛苦)REST是“呈現(xiàn)狀態(tài)轉(zhuǎn)移(REpresentational State Transfer)”的縮寫,一種API的架構(gòu)風格,在客戶端和服務(wù)端之間通過呈現(xiàn)狀態(tài)的轉(zhuǎn)移來驅(qū)動應(yīng)用狀態(tài)的演進。在 REST 樣式的 Web 服務(wù)中,每個資源都有一個地址。資源本身都是方法調(diào)用的目標,方法列表對所有資源都是一樣的。這些方法都是標準方法,包括 HTTP GET、POST、PUT、DELETE,還可能包括 HEADER 和 OPTIONS。RESTful的API設(shè)計,使得后端通過接口向前端傳遞數(shù)據(jù),數(shù)據(jù)的格式通常是JSON這種通用的格式。對前端來說,只要后端返回過來的是RESTful的數(shù)據(jù)就行,不管后端是用Java寫,還是用python或PHP,拜托對后端的依賴,做到前端系統(tǒng)的獨立。REST服務(wù)的調(diào)試:Postman 和 Insomnia使用模板引擎前后端分離之后,前端工程師需要將通過API獲取的數(shù)據(jù)呈現(xiàn)到頁面上,雖然也可以通過jQuery對頁面一個一個賦值,但是這種效率太低了,或者也可通過在JavaScript中拼接HTML,但是這種方式太難維護HTML代碼了,也很難閱讀。因此最好的方式就是使用模板引擎。前端的模板引擎跟后端模板引擎很相似,比如JSP或cshtml(razor),他們的語法都非常相似,他們所實現(xiàn)的功能也幾乎一樣:將數(shù)據(jù)綁定到HTML模板。VueJs和react都可以充當這樣的模板引擎。我們最終沒有選用react而是選用了VueJs的原因只有一個,那就是VueJs是真正的響應(yīng)式,而react改變model之后需要手工調(diào)用setState才會更新UI,這是完全無法忍受的。因為這個原因,我們只能選擇VueJS作為模板引擎。工程化構(gòu)建Nodejs不止可以用來做前端服務(wù)器,在開發(fā)階段,它也能發(fā)揮很大的作用。前端生態(tài)的發(fā)展,是圍繞著Nodejs進行的。用npm來管理項目依賴,可以很好的維護和運行在Nodejs環(huán)境上。打包工具grunt、gulp、webpack和rollup等,都是運行在nodejs上,再結(jié)合語法編譯、打包部署等插件,將應(yīng)用輸入成一個完整的應(yīng)用。如果你使用了Angular、React或Vue框架,或者你使用瀏覽器暫時還不兼容的ES6語法,還需要在應(yīng)用打包前用babel將語法編譯成瀏覽器可識別的ES5的語法。SPASPA是單頁Web應(yīng)用(single page web application,SPA)的簡寫,就是只有一張Web頁面的應(yīng)用,是加載單個HTML 頁面并在用戶與應(yīng)用程序交互時動態(tài)更新該頁面的Web應(yīng)用程序。像Angular、React或Vue就是為了SPA而設(shè)計的,結(jié)合前端路由庫(react-router、vue-router)和狀態(tài)熱存儲(redux、vuex)等,可以開發(fā)出一個媲美Native APP的Web APP,用戶體驗得到了很大的提升。當然,SPA也不是好的,也不是適合所有的web應(yīng)用,需要結(jié)合項目和場景來選擇。SPA有如下缺點:初次加載耗時增加??梢酝ㄟ^代碼拆分、懶加載來提升性能,減少初次加載耗時。SEO不友好,現(xiàn)在可以通過 Prerender 或 Server render 來解決一部分。頁面的前進和后端需要開發(fā)者自己寫,不過現(xiàn)在一些路由庫已經(jīng)幫助我們基本解決了。對開發(fā)者要求高,由于做SPA需要了解一整套技術(shù)棧,所以,要考慮后期是否有合適的人選進行維護。mock(模擬數(shù)據(jù))前后端分離框架中的API mock思路想要實現(xiàn)真正的前后端分離,那就必須得用好API mock(模擬數(shù)據(jù))。使用mock數(shù)據(jù)的好處有兩個:前端開發(fā)人員可以基于API文檔生成mock數(shù)據(jù),在后端開發(fā)人員將API發(fā)布出來之前就可以完成整個業(yè)務(wù)流程的開發(fā);使用mock數(shù)據(jù)能夠更低成本、更快速地,通過直接修改mock數(shù)據(jù)的方式,調(diào)試頁面樣式、調(diào)試頁面功能。全局的mock開關(guān)為什么要設(shè)置這樣一個全局的mock開關(guān)呢?主要基于以下兩點考慮:設(shè)置全局的mock開關(guān)之后就不再需要針對每一個頁面設(shè)置mock開關(guān),更容易維護,避免項目中有多個mock開關(guān)而難以統(tǒng)一開關(guān)狀態(tài);如果發(fā)布時忘記將mock開關(guān)給關(guān)掉,那么發(fā)布之后一運行發(fā)布者就會發(fā)現(xiàn)mock開關(guān)忘了關(guān),然后可以快速修復之后再重新發(fā)布,從而避免不小心將正式服更新為mock數(shù)據(jù)源。正是由于以上兩點考慮,我們的全局mock開關(guān)可以幫助程序開發(fā)者和發(fā)布者更不容易犯錯。解決請求問題前后端分離后,我們只需要Server端告訴我們Api URL即可,那么這會產(chǎn)生一個問題:Ajax跨域。這里就不能使用一般的跨域解決方法去解決,比如jsonp,iframe信使等等,因為我們還有POST請求。于是Http Proxy類工具就有用了,比如我就會在BrowserSync加入中間件判斷每一個請求,如果是/api前綴就會代理到API Server端,API Server端收到數(shù)據(jù)后再返回給BrowserSync,BrowserSync再返回給瀏覽器端。這樣就解決跨域請求的問題生產(chǎn)環(huán)境有兩種部署,一種是放到后臺項目里,這就沒啥說的,另外一種就是前后端分開部署,那就在前端WebServer處理端寫點轉(zhuǎn)發(fā)規(guī)則就好,如Nginx,Apache都支持。靜態(tài)資源路徑問題如果你的項目有上傳資源功能,那自然就會產(chǎn)生用戶資源,那前后端分離后,如何來處理這個問題呢?得先看模式。資源與后臺項目放一起,后臺處理完后需要返回前臺一個相對路徑,如果資源時一臺單獨的服務(wù)器,那就需要返回資源的絕對URL即可。會話Web項目最頭疼的就是無狀態(tài)導致會話問題,傳統(tǒng)的Web項目都使用Session/Cookie,但在前后端分離,集群部署模式下這Session明顯缺陷太多。token方式已經(jīng)是當前Web端解決會話的主流,并且有很多開源好用的token生成管理程序,基本上拿來就能用。做網(wǎng)站公眾平臺每天為您分享原創(chuàng)Web開發(fā)資訊,開發(fā)經(jīng)驗,為您的技能充電。期待您的關(guān)注與分享,同時歡迎您留言,讓我們每天進步一點點!

當前標題:網(wǎng)絡(luò)公司做網(wǎng)站注重前后分離
URL標題:http://m.rwnh.cn/news/56145.html

網(wǎng)站建設(shè)、網(wǎng)絡(luò)推廣公司-創(chuàng)新互聯(lián),是專注品牌與效果的網(wǎng)站制作,網(wǎng)絡(luò)營銷seo公司;服務(wù)項目有做網(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)

成都app開發(fā)公司
河北省| 蒙阴县| 临桂县| 大邑县| 积石山| 惠东县| 兴业县| 四子王旗| 永春县| 泾源县| 遂昌县| 临泽县| 安岳县| 临西县| 博客| 大城县| 德庆县| 荃湾区| 哈尔滨市| 阳江市| 项城市| 北京市| 巢湖市| 广西| 玛沁县| 新乡县| 鲁甸县| 格尔木市| 龙海市| 道真| 湛江市| 泗洪县| 白沙| 布拖县| 元朗区| 吴旗县| 祥云县| 大埔区| 社旗县| 安徽省| 庆阳市|